search

duetds / date-picker

Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/
https://www.duetds.com
MIT License
1.73k stars 68 forks source link

Allow user to specify timezone and time via date picker #86

Open patrickdamery opened 3 years ago

patrickdamery commented 3 years ago

Is your feature request related to a problem? Please describe. It would be nice if we could have an option to allow users to specify the time and timezone for the date they are providing.

Describe the solution you'd like I would like to have an attribute I could add to specify to the duet date picker that I want to allow the user to select time and timezones.

<label for="date">Choose a date</label>
<duet-date-picker identifier="date" select-time="true"
  select-timezone="true" min="1990-06-10"
  max="2020-07-18" value="2020-06-16">
</duet-date-picker>

Or alternatively if I could enable this option in the same way as localization is allowed:

<label for="date">Choose a date</label>
<duet-date-picker first-day-of-week="0" identifier="date"></duet-date-picker>

<script>
  const picker = document.querySelector("duet-date-picker")
  picker.selectTime = true
  picker.selectTimezone = true
</script>

Describe alternatives you've considered I can currently achieve this by selecting time and timezones via different fields outside of the date picker and using JS to make a date object from the datepicker, time field and timezone field.

Additional context I imagine the date picker would look something like this with the time and timezone options enabled: http://openjdk.java.net/projects/openjfx/ux/datePicker/images/datepicker-time.png