Custom between 24-hours style or 12-hours

[permanar]

In the Vuetify time format, we can add a props that switch between 24h or 12h (here).

Now, how do we possibly do this?

[TitorTraveller]

Hi! You may try this solution, handle the timeOpts as computed prop in the case you want to switch dynamically using a switch component for example.

Datetime picker implementation:

<v-datetime-picker
     label="PickUp Datetime"
     v-model="datetimePickup"
     @input="updateDateTime"
     :timePickerProps="timeOpts">
</v-datetime-picker>

timeOpts handling:

computed:{
    timeOpts:() => {
        return {
	    format: "24hr",
            format: "ampm",
            min: new Date()
	}
    },
}

You can even handle the format value with another calculated variable.

[permanar]

Hi @TitorTraveller,

Thanks for replying to me!
Actually I just fixed this issue for me by just adding format: "24hr" inside the object.

<v-datetime-picker
  label="Start date"
  v-model="date_start"
  :text-field-props="textFieldProps"
  :date-picker-props="dateProps"
  :time-picker-props="timeProps"
  time-format="HH:mm"
  :disabledDates="disabledDates"
></v-datetime-picker>

....

<scripts>
...
      date_start: null,
      date_end: null,
      timeProps: {
        useSeconds: true,
        ampmInTitle: true,
        format: "24hr",
      },
...
</scripts>

Thank you so much for you help.
But now, I had a very strange issue about the v-model, the date_start v-model didn't change the value even the text field and the display already did.

As you can see above, I use null for the default value. Change it to empty string, not working. As well for the new Date(). Could you also help me with this? Any help would be really aprreaciated!

[TitorTraveller]

Hi @TitorTraveller,

Thanks for replying to me!
Actually I just fixed this issue for me by just adding format: "24hr" inside the object.

<v-datetime-picker
  label="Start date"
  v-model="date_start"
  :text-field-props="textFieldProps"
  :date-picker-props="dateProps"
  :time-picker-props="timeProps"
  time-format="HH:mm"
  :disabledDates="disabledDates"
></v-datetime-picker>

....

<scripts>
...
      date_start: null,
      date_end: null,
      timeProps: {
        useSeconds: true,
        ampmInTitle: true,
        format: "24hr",
      },
...
</scripts>

Thank you so much for you help.
But now, I had a very strange issue about the v-model, the date_start v-model didn't change the value even the text field and the display already did.

As you can see above, I use null for the default value. Change it to empty string, not working. As well for the new Date(). Could you also help me with this? Any help would be really aprreaciated!

Try adding a key to the component using the value of v-model:

<v-datetime-picker
 :key="date_start"
  label="Start date"
  v-model="date_start"
   ...
></v-datetime-picker>

[permanar]

Try adding a key to the component using the value of v-model:

<v-datetime-picker
 :key="date_start"
  label="Start date"
  v-model="date_start"
   ...
></v-datetime-picker>

@TitorTraveller Hi. Thanks for replying to me. Unfortunately, I have tried to adding :key props to the component but nothing happen.
So the strange thing is, the display (text field) is changed on the UI side but, whenever I tried to get the value and console.log() it, it always return the default value from the data(). I really really got no ideas for this.

Please help.

[TitorTraveller]

Try adding a key to the component using the value of v-model:

<v-datetime-picker

:key="date_start"

label="Start date"

v-model="date_start"

...

@TitorTraveller Hi. Thanks for replying to me. Unfortunately, I have tried to adding :key props to the component but nothing happen.

So the strange thing is, the display (text field) is changed on the UI side but, whenever I tried to get the value and console.log() it, it always return the default value from the data(). I really really got no ideas for this.

Please help.

Can you provide a Fiddle replication of the issue?

[permanar]

Try adding a key to the component using the value of v-model:

<v-datetime-picker

:key="date_start"

label="Start date"

v-model="date_start"

...

@TitorTraveller Hi. Thanks for replying to me. Unfortunately, I have tried to adding :key props to the component but nothing happen.
So the strange thing is, the display (text field) is changed on the UI side but, whenever I tried to get the value and console.log() it, it always return the default value from the data(). I really really got no ideas for this.
Please help.

Can you provide a Fiddle replication of the issue?

@TitorTraveller
Here's the fiddle: CodeSandbox. Please click the button and see the console log.

Anyway, I found the issue was occurred, because of me NOT clicking the "OK" button from the modal.
Somehow, I quickly click the overlay to close the modal.

I understand the idea behind clicking the overlay means like cancel or something but, I don't really sure why it change the DOM element tho. I mean normally, it should be changed after we clicked the "OK" button, right? That's kinda funny when it directly changed the display but not the state.

What do you think?

[permanar]

Should we add the 'persistent' props to the v-dialog as mentioned on here and the example would be like this here?

[permanar]

I just thought for making a PR for this issue and #64 is actually what I was gonna do. I hope @darrenfang could merge the pull!💪

Cheers.