vuetify-datetime-picker
vuetify-datetime-picker copied to clipboard
Allow manual input on text field
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 formatdateFormat + " " + 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.
- Clear vuetify
- When users select a new value from the dialog:
- Update the text field value.
- Set readonly prop on text field to
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.
Also looking for this behavior. @Vontus did you have a fork you're working off of?
@gabaum10 I haven't started yet. We changed priorities in our project and this isn't so important anymore, but we'll probably need manual date input in the near future anyway so I'm still open to do it.