darrenfang / vuetify-datetime-picker Goto Github PK

I want to use this plugin in my Nuxt.js/VuetifyJs application. For this purpose, I created a plugins/datetime-picker.js file:

import Vue from 'vue'
import DatetimePicker from 'vuetify-datetime-picker'

Vue.use(DatetimePicker)

And in nuxt.config.js, declare the plugin as recommended on the documentation:

export default {
  plugins: ['~/plugins/datetime-picker']
}

I run yarn run dev to launch the server, I do not see any error in the Terminal, but when I open the broswer on http://localhost:3000/ I see:

SyntaxError
Unexpected identifier

Link to reproduce

Github link for the bug
Why this is happening ? I simply followed the steps mentioned on the documentation.
How to fix this ?

Just like the date-pickers itself from vuetify, i would like to pass on a hint to be shown under the input field.

Right now you only accept type Date, but since you are running it through momentjs, moment will handle the conversion of String to Date

For now it works, but it gives alot of redundant errors in the console caused by the type: Date when you feed it with type String

Hi,
When we want to change the time, we can only change the minutes

Even after installing babel-preset-env

It would be great to get typescript support for this package!

I want to user the prop "format="24hr", but don`t work properly

When using this I get these errors that seem to not be able to find any Vuetify components. Yet Vuetify is working just fine in my application.

If I copy/paste the component from github it does work. Albeit never updates the text field value until something else is clicked on, which is annoying.

Without flag ssr: false in Nuxt.
I have error:

Cannot use import statement outside a module

I would like to use the format prop to manipulate what the displayed datetime in the input looks like:
ddd D MMMM YYYY, HH:mm"

This works fantastic, until I click the input to bring up the picker and the value is way out, the picker displays (and outputs) completely obscure dates, e.g. 2000-01-10 00:00:00.

Some examples:
input: 2018-03-31 10:00:00
Output: 2000-01-10 00:00
Desired: Mon 31 March 2018, 10:00

Input: 2018-06-18 16:45:00
Output: 2030-01-20 00:00:00
Desired: Mon 18 June 2018, 16:45

Struggling to find any correlation between these results, but my thought was that the plugin should be parsing the raw value in the v-model rather than the formatted value for the text box?

Hello,

I have downloaded the .vue and modified the source code. Date and time selection limits added.

This way, when the date is selected and equals date limit, then it sets the time limit

modifications

// template:
<v-time-picker 
  ...
  :max="maxTime"  
// ... 

props:
// ...
datetimeMax: {
  type: [Date],
  default: null,
},
// ...

computed: {
// ....
  maxDate() {
    return this.datetimeMax
      ? this.datetimeMax.toISOString().substr(0, 10)
      : null;
  },
  maxTime() {
    if (!this.datetimeMax || !this.date) 
      return null;
    var eqDay =
      new Date(this.date).toISOString().substr(0, 10) ==
      this.datetimeMax.toISOString().substring(0, 10); 
    return eqDay 
      ? this.datetimeMax.toLocaleTimeString() 
      : null;
  },
// ...

I use full installation of vuetify https://vuetifyjs.com/en/getting-started/quick-start#full-installation

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import DatetimePicker from 'vuetify-datetime-picker';
import '@mdi/font/css/materialdesignicons.css';

Vue.use(Vuetify);
Vue.use(DatetimePicker);
export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#06f',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
      },
    },
  },
  icons: {
    iconfont: 'mdi',
  },
});

But after adding datepicker there components errors

How to add class by option ?

                  <v-datetime-picker
                    ...
                    class="errors-filter__dateStart mt-0 pt-0 mr-2"
                    ...
                  />

It is't working.

Hi,

If you put the class "elevation-0" on date and time pickers, the widget look like better and more unified. I think this must be the default configuration.

       <v-datetime-picker
        v-model="from"
        :datePickerProps="{'show-week': true, 'class': 'elevation-0'}"
        :timePickerProps="{'format': '24hr', 'class': 'elevation-0'}">

Regards,

Is there a way to change the tab active indicator color?

how do we set min for datetimepicker ?
lets say my min is '2020-08-09 04:00:00', i need to set for both date-picker-props.min = '2020-08-09' and time-picker-props.min = '04:00:00' ?
if the user change the date, timepicker still cant select hours lower than '04:00:00'.
or is there a method that i missed ?

ERROR in ./node_modules/vuetify-datetime-picker/src/components/DatetimePicker.vue 1:0
Module parse failed: Unexpected token (1:0)

I am getting this error:

 in ./node_modules/vuetify-datetime-picker/src/stylus/main.styl (./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vuetify-datetime-picker/src/stylus/main.styl)
Module build failed (from ./node_modules/stylus-loader/index.js):
TypeError: Cannot read property 'stylus' of undefined
    at Object.module.exports (C:\Users\Bruger\Source\Repos\konxion-insights\Konxion.Insights\Konxion.Insights\node_modules\stylus-loader\index.js:29:33)
 @ ./node_modules/vuetify-datetime-picker/src/stylus/main.styl 4:14-99 14:3-18:5 15:22-107
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./App/Components/Backend/SystemSettings.vue?vue&type=script&lang=js
 @ ./App/Components/Backend/SystemSettings.vue?vue&type=script&lang=js
 @ ./App/Components/Backend/SystemSettings.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./App/Components/Backend/BackendSettings.vue?vue&type=script&lang=js
 @ ./App/Components/Backend/BackendSettings.vue?vue&type=script&lang=js
 @ ./App/Components/Backend/BackendSettings.vue
 @ ./App/router/index.js
 @ ./App/index.js
 @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./App/index.js

I am unsure how to fix this,
Versions:

"style-loader": "^0.22.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vuetify-datetime-picker": "^1.0.3",
"vuetify": "^1.1.8",
"webpack": "^4.16.3",
"vue": "^2.5.16",

Please provide a live demo link in the README.md

It seems there were breaking changes for the timer

Hi, I have to include the component in a project without webpack. Is it possible?

Hello there.
I want to use vuetify-datetime-picker as just time picker. Can I use without extra need coding ?

Hello,

I was wondering if it's at all possible to set the datetime after I've opened the dialog.
I want it to start at null, but when I click it, it would be nice if it were to show the current date in the datepicker, rather than showing an empty div.

Thanks!

The installation works fine on my local machine but when i ran "npm run build" for production depolyment, i got the below error in the console:

[Vuetify] v-ripple can only be used on block-level elements
And styling of the datetime picker is all messed up.

It's not working at ie11

• https://github.com/darrenfang/vuetify-datetime-picker/blob/master/src/components/DatetimePicker.vue#L20
• https://github.com/darrenfang/vuetify-datetime-picker/blob/master/src/components/DatetimePicker.vue#L23

I use Font Awesome in my project and dont want Material Icons
Let us provide other icons like far fa-calendar

Does exists a way to disable the timepicker part?

How to reproduce:

• Select a day on the calender.
• Select a hour
• Select a minute
• Repeat the first two steps, but in the second step choose a different hour
• Don't select minute and just hit ok.

Expected Results:

• The hour value should have been updated to the new hour value.

Actual Outcome:

• The hours value stayed the same as the previous input.

Admittedly, this may be an upstream bug somewhere in the timepicker component.

It's not possible to use it with simple JS?

I am getting the following error message:

Invalid default value for prop "errorMessages": Props with type Object/Array
must use a factory function to return the default value.

Looking at the file https://github.com/darrenfang/vuetify-datetime-picker/blob/master/src/components/DatetimePicker.vue, I see that some pops of type Object or Array have default value of null. This raises a warning.

Vue version 2.6.7.

I just attempted to use this component and for some reason it has a panel at the top with what appear to be buttons or links that do nothing but are labelled "Event" and "Access_time" and are causing a scroll bar to appear to the right.

What are these and how do I remove them?

Add a prop to allow users to manually input the desired date and time with their keyboard.

• When the prop is set to true:
  • Set readonly prop on text field to false.
  • Only open the dialog when clicking the calendar icon, not the text field.
  • On text field @blur event, validate input (input should have the format dateFormat + " " + timeFormat):
    • If no input, don't do anything.
    • If input isn't correct, display format error using vuetify's error-messages.
    • If input is correct, update datetime picker value and emit @input event.
  • On text field @focus event:
    • Clear vuetify error-messages prop.
  • When users select a new value from the dialog:
    • Update the text field value.

That may look too specific, but I'm open to changes. Please let me know what you think, I'm willing to open a PR myself if this is approved.

The disabled property (as seen in the default vuetify input controls) is not available.

I included your datetime-picker into my project with Vuetify >2.0

While I can use the default date and time pickers without any issues I always receive the following error when I try to use your library

[Vue warn]: Unknown custom element: <v-dialog> - did you register the component correctly? For recursive components, make sure to provide the "name" option

I use v-dialog by myself without any issues but it seems to break in your library. Is there anything I can do?

The v-model does not change as well, so when we click the 'X' nothing happens

yarn version: 1.16.0
nuxt.js: 2.9.2

On dev mode translation showing correct. After building application translation showing incorrect.

How to initiate so that when it is opened it will select a date from the v-model?

The "full-width" keyword is dropped for several vuetify components including v-dialog.

I have tried this #17 but still I am facing the issue.

This is the component

<v-datetime-picker
 label="Date Time"
 v-model="datetime"
 :width='410'
 format='YYYY-MM-DD HH:mm:ss'
 useSeconds
 okText='SAVE'
 clearText='CANCEL'
 @input='inputChange()'
>
</v-datetime-picker>

Script

export default{
 data(){
  return {
	datetime: new Date(),
            }
 },
methods:{
 getDate(timestamp) {
  if(this.datetime){
	this.datetime = new Date(timestamp);
	console.log(this.datetime); //this update the datetime property in data object
   }
 },
  editItem(item){
	this.getDate(item.created);
  }
}

So, when I am calling edit item and passing the api response with item parameter and inside this calling the getData function and passing the timestamp i.e. item.created.
Now when getDate method is called it update the datetime property in data object,but when I open the modal it select the current date or today's date.

For example, In text field I am getting this date and time 2020-01-01 17:25:25 through api response but when I open the modal it select the today's date,

How I can Select this date in my dialog?

If I am passing the timestamp value as param in new Date() like

datetime : new Date(12345679892345)

then it select the upcoming datetime in modal but now it select the same datetime for every entery. Can we make this dynamic?

And one more thing, when I click on cancel button of modal it erases the datetime value from field, how to prevent from this?

In the current version, I can only select the hours and minutes and my place for seconds in 00, How do I select the seconds also?
And how I can call a custom method on click of save button?

how to install "vuetify-datetime-picker\src\stylus\main.styl" as it does not contain a package.json file.

I have Vuetify 2.1.0. Assigning a model to the component updates the datetime prop, but the input field won't update. In other words, the data ('date' and 'time') is not updating when the v-model's related variable changes.

For a bit of context, here is a simple example of how I use the picker:

<template>
  <v-datetime-picker
    v-model="event.start"
    label="Start"
  ></v-datetime-picker>
</template>

<script>
export default {
  data: () => ({
    event: {
      start: null
    }
  })
}

Modifying 'event.start' won't update the data in the picker.

The reason I need this is because the picker is in a form that is only shown once the user clicks a date in a calendar. They can create events and that field is filled for them, making things easier. That means I should be able to change its value from the parent component after the picker is created. This is something that used to work when I used Vuetify ^1.5.5. Probably because it was destroying the picker.

For now, all I can do is using v-if so the picker is destroyed once my dialog closes. And is created again when the form opens. I hoped there would be something more efficient and intuitive.

It works fine for me in local. But creating build and when I deploy it live it does not work properly.

In live, I get some warnings in my local

There doesn't seem to be any documentation with regards to using this library with validations.

The v-text-field

<v-text-field
        slot="activator"
        :label="label"
        v-model="formattedDatetime"
        // :value="formattedDatetime" <-- solution
        readonly>
</v-text-field>

is bound using v-model however its val is provided by the computed property

formattedDatetime () {
        return this.datetime ? moment(this.datetime).format(this.format) : ''
}

Perhaps changing v-model to :value will remove the error?

Hi, thanks for the project, it was very useful.

Just a detail. I'm not managing to set the current time with the clock component.

How can I do that?

Thank you.

Cannot 'Cancel' or go out of the Modal once you are in.

Would be good to have a Cancel Option