Timepicker

[asieverding]

Hey, love your vanillajs date picker!
Are there any plans to include a time picker?

[BariqDharmawan]

Love to know if there's one

[mymth]

There are no plans for it at the moment.Since it's highly likely to need fundamental design changes, the possibility to have a plan in the near future is not so high, unfurtunately.

[stsrki]

Hi @mymth, did you consider making Timepicker a separate project instead?

[mymth]

@stsrki,
Unfortunately no. I personally never had opportunities to need time picker and it seems unlikely to have one in the near future. My motivation for it is not really high, to be honest.

[lubomirblazekcz]

What about timepicker as part of datepicker? Same functionality as https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

If anyone wants, I manage to cooked in the timepicker here https://github.com/newlogic-digital/ui/blob/main/src/scripts/Ui/Input.js#L102 it uses native type="time" input, can be used also with https://github.com/epavanello/input-time-polyfill

[xdev1]

I personally kinda like how the air datepicker is handling time selection:
https://air-datepicker.com/examples (click "Timepicker" in the menu)

It also has an option to show only the timepicker (without the datepicker part):
https://air-datepicker.com/docs?scrollTo=onlyTimepicker

@mymth Would a solution like this also mean "fundamental design changes"?

[mymth]

@xdev1 This is why I think "fundamental"

The time value of local time 00:00:00.000 of the date is used for the internal date value.
— https://mymth.github.io/vanillajs-datepicker/#/overview?id=providing-date

All dates given to date picker are converted to the time values of their local time 00:00:00.000 for internal use. This is to make these possible, to use Array.prototype.includes() on selected/disabled dates arrays and to compare dates with simple arithmetic comparison.

Other hurdles for this library but not for Air Datepicker are...
- This library has its own parser and it needs to be enhanced in order to allow users to edit the time string in the input field as well as the date string. (Air Datepicker doesn't have parser—for date string, it only accepts ones that the Date class constructer can parse—and it doesn't allow users to edit the text in input field.)
- This library includes more locales (many of them are non-Western European languages'). They need to be updated to include time format, but they are just a copy of bootstrap-datepicker's and I have no knowledge on most of those languages.

[xdev1]

@mymth Thank you very much for the detailed information.

[buncis]

this library is perfect until I realize I also need time instead just date, damn I wish I could still use this clean simple tiny vanilla js library

@mymth for the second part I think you should not focus on it, let the community update their own locale