Request for date widget with configurable display format - Githubissues

OpenClinica / enketo-oc

OpenClinica's fork of the Enketo web forms monorepo

Apache License 2.0

0 stars 5 forks source link

Request for date widget with configurable display format #173

Open pbowen-oc opened 5 years ago

pbowen-oc commented 5 years ago

We have had requests for a way to standardize date display across different devices/browsers. Right now, the format the dates are displayed in often doesn't meet our users' guidelines and it also varies just based on whether the form is opened on a phone or laptop (and I think maybe also from browser to browser).

For example, some users would like dates to always be displayed as "mm/dd/yyyy", while other would prefer "dd-mon-yyyy". Could we add a few appearance options for date items that would display the date value in the format corresponding to the appearance regardless of the environment of the the user who opens the form? This would not change how dates are selected via the date picker.

MartijnR commented 5 years ago

[x] check native datepicker configuration options - none https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
[x] create codepen using native datepicker overlaid with formatted text input
[x] check iOS
[x] check FF
[ ] check if that can be matched with js datepicker

MartijnR commented 5 years ago

This approach looks somewhat promising: https://codepen.io/MartijnR/pen/PXJEZG?editors=1010

In the main Enketo I think it makes sense to link the format to the locale (form language, and otherwise browser language). But we could perhaps create a way to override this. Tbc..

MartijnR commented 5 years ago

make rough estimate

MartijnR commented 5 years ago

For consistency, might be good to use the format identifiers from the format-date function: https://opendatakit.github.io/xforms-spec/#fn:format-date, and use a prefix. E.g.:

appearance="format-%m/%d/%Y"
appearance="format-%m-%a-%Y"

MartijnR commented 5 years ago

[ ] utilities that can convert a JS Date instance into a formatted datestring from the appearances that will be supported
[ ] widget for non-js datepicker
[ ] consider how the datepickers locale functionality can/should be activated and whether it messes up the feature
[ ] figure out how we could support this in js datepicker with the custom month-year and year functionality
[ ] change widget for js datepicker to use built-in toDisplay and toValue functions: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format
[ ] same for datetime widget perhaps
[ ] check for regressions in native month picker

MartijnR commented 5 years ago

@pbowen-oc, my best estimate is 45 hours +/- 25 hours