nswdpc / waratah

NSW Design System integration for Silverstripe websites
BSD 3-Clause "New" or "Revised" License
0 stars 3 forks source link

Add component 'date picker' #89

Open JamesDPC opened 3 months ago

JamesDPC commented 3 months ago

This seems to duplicate widespread browser and device support for date pickers, and provides yet another interface for people to understand how to pick a date.

Refer: https://caniuse.com/input-datetime

In nearly all cases, the standard date input fields would be a better choice, especially when dealing with dates that are more than a month in the past or future.

The standard date/datetime field willl provide this feature but we can provide a template for this, for the sake of completeness. Date validation will need to be considered, as the component uses a text input.

JamesDPC commented 3 months ago

(added in 3.16.0)

JamesDPC commented 2 months ago

The extension needs to be applied selectively, i.e not in the modeladmin context. The main issue is that the date picker component requires a text input type.. date input type will work but there are 2 calendar icons. Modify the input type to text without loading the nswds requirements causes the input field to render as a text field.

JamesDPC commented 1 month ago

With input type="date":

image

image

With input type="text"

image

JamesDPC commented 1 month ago

Date validation will need to be considered, as the component uses a text input.

The implementation only changes the type attribute, not the class, so validation is unaffected.

JamesDPC commented 1 month ago

A possible blocker here is that unlike the standard date input, this component sends dates through in the format dd/mm/yyyy e.g 04/05/2024 for 4th May.

If the date provided in that format is considered to be invalid, the value will not be handled by DateField.

Additionally, adding dates like 11/12/2024 (11 Dec) results in the date being redisplayed in the field (e.g on validation error) as 2024-11-12 (12 Nov)

The standard date input only handle ISO date format and converts to locale format which solves this issue.