[OPEN-ILS-DEV] Native browser date / time selectors in Angular?

Tue Aug 13 15:24:40 EDT 2019

Hi all,

There are some long-standing accessibility issues with input
type="date".  Here's a detailed and recent evaluation with a variety
of browsers and assistive technologies:
https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/
(tl;dr Chrome and Firefox work pretty well, including with screen
readers, but mobile, Edge, Safari, and Dragon all have a hard time
with it).  I don't have a sense for how these experiences compare to
the ngb-datepicker, but we should take that into consideration.

I'm also wondering how important it is for these inputs to use the
user-specified date and time formats vs. the format provided by the
locale in their browser.  My understanding is that type="date" always
uses the browser's locale to determine the format.

Otherwise, I think it is a good idea to use the built-in ones!

  -Jane

On Tue, Aug 13, 2019 at 11:54 AM
<open-ils-dev-request at list.georgialibraries.org> wrote:
>
> Send Open-ils-dev mailing list submissions to
>         open-ils-dev at list.georgialibraries.org
>
> To subscribe or unsubscribe via the World Wide Web, visit
>         http://libmail.georgialibraries.org/mailman/listinfo/open-ils-dev
> or, via email, send a message with subject or body 'help' to
>         open-ils-dev-request at list.georgialibraries.org
>
> You can reach the person managing the list at
>         open-ils-dev-owner at list.georgialibraries.org
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of Open-ils-dev digest..."
>
>
> Today's Topics:
>
>    1. Native browser date / time selectors in Angular? (Bill Erickson)
>    2. Re: Native browser date / time selectors in Angular?
>       (Mike Rylander)
>    3. Re: Native browser date / time selectors in Angular? (Dan Scott)
>    4. Re: Native browser date / time selectors in Angular?
>       (Bill Erickson)
>
>
> ----------------------------------------------------------------------
>
> Message: 1
> Date: Tue, 13 Aug 2019 13:39:13 -0400
> From: Bill Erickson <berickxx at gmail.com>
> To: Public Open-ILS tech discussion
>         <OPEN-ILS-DEV at list.georgialibraries.org>
> Subject: [OPEN-ILS-DEV] Native browser date / time selectors in
>         Angular?
> Message-ID:
>         <CAEjrdbryzXu89N_9=ULZ+L3EUD3eHn2W2qDWg+O18qf7R1xxOQ at mail.gmail.com>
> Content-Type: text/plain; charset="utf-8"
>
> Hi All,
>
> For a long time, Firefox didn't support date and time <inputs/> -- no
> calendar widget, no controls, etc.  Because of this, we have traditionally
> relied on the date / time pickers provided by the toolkit (ng-bootstrap in
> Angular).
>
> However, Firefox does now support date [1], time [2], and datetime-local
> [3] input types, as does Chrome.  Date selectors provide calendar widgets,
> all variations provide 'clear' actions, increment/decrement actions
> (buttons and arrow key), input validation, and manual entry w/ support for
> automatically jumping to the next field once a value part is entered (e.g.
> hours => minutes).
>
> It looks like they do everything we need, but I could be overlooking
> something...
>
> Is there any value in continuing to use the ng-bootstrap widgets for date
> and time selectors?  Thoughts on migrating to native browser widgets?
>
> -b
>
> [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
> [2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
> [3]
> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
> -------------- next part --------------
> An HTML attachment was scrubbed...
> URL: <http://libmail.georgialibraries.org/pipermail/open-ils-dev/attachments/20190813/5314c098/attachment-0001.html>
>
> ------------------------------
>
> Message: 2
> Date: Tue, 13 Aug 2019 14:17:30 -0400
> From: Mike Rylander <mrylander at gmail.com>
> To: Evergreen Development Discussion List
>         <open-ils-dev at list.georgialibraries.org>
> Subject: Re: [OPEN-ILS-DEV] Native browser date / time selectors in
>         Angular?
> Message-ID:
>         <CAO8ar=nGwyM20TcpFbsjhe_EbY7TVzRF9zm=0uT8O9t0FcpgGQ at mail.gmail.com>
> Content-Type: text/plain; charset="UTF-8"
>
> First, +1M to using the builtins!
>
> However, I just fired up Firefox to test empirically and I'm getting
> the default text input.  CanIUse
> (https://caniuse.com/#search=input-date) seems to agree that FF isn't
> yet there with datetime-local, sadly.
>
> Hopefully soon?  (Or we could drop FF support... j/k, mostly.)
>
> Thanks for bringing it back up, in any case.
>
> --
> Mike Rylander
>  | Executive Director
>  | Equinox Open Library Initiative
>  | phone:  1-877-OPEN-ILS (673-6457)
>  | email:  miker at equinoxinitiative.org
>  | web:  http://equinoxinitiative.org
>
> On Tue, Aug 13, 2019 at 1:39 PM Bill Erickson <berickxx at gmail.com> wrote:
> >
> > Hi All,
> >
> > For a long time, Firefox didn't support date and time <inputs/> -- no calendar widget, no controls, etc.  Because of this, we have traditionally relied on the date / time pickers provided by the toolkit (ng-bootstrap in Angular).
> >
> > However, Firefox does now support date [1], time [2], and datetime-local [3] input types, as does Chrome.  Date selectors provide calendar widgets, all variations provide 'clear' actions, increment/decrement actions (buttons and arrow key), input validation, and manual entry w/ support for automatically jumping to the next field once a value part is entered (e.g. hours => minutes).
> >
> > It looks like they do everything we need, but I could be overlooking something...
> >
> > Is there any value in continuing to use the ng-bootstrap widgets for date and time selectors?  Thoughts on migrating to native browser widgets?
> >
> > -b
> >
> > [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
> > [2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
> > [3] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
> >
>
>
> ------------------------------
>
> Message: 3
> Date: Tue, 13 Aug 2019 14:38:11 -0400
> From: Dan Scott <dan at coffeecode.net>
> To: Evergreen Development Discussion List
>         <open-ils-dev at list.georgialibraries.org>
> Subject: Re: [OPEN-ILS-DEV] Native browser date / time selectors in
>         Angular?
> Message-ID:
>         <CAJcoVMipTEf+TOnw6atwDMn-UqnMn_1Ri+g9BoGnsWRGXo1ERQ at mail.gmail.com>
> Content-Type: text/plain; charset="utf-8"
>
> The Browser Support section agrees with caniuse.com about the lack of
> support in Firefox for datetime-local:
> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#Browser_compatibility
>
> But date looks good and usable (per the live examples on the corresponding
> MDN page). Time is functional but I'm not sure it's as friendly as the
> ng-bootstrap implementation.
>
> On Tue, Aug 13, 2019 at 2:18 PM Mike Rylander <mrylander at gmail.com> wrote:
>
> > First, +1M to using the builtins!
> >
> > However, I just fired up Firefox to test empirically and I'm getting
> > the default text input.  CanIUse
> > (https://caniuse.com/#search=input-date) seems to agree that FF isn't
> > yet there with datetime-local, sadly.
> >
> > Hopefully soon?  (Or we could drop FF support... j/k, mostly.)
> >
> > Thanks for bringing it back up, in any case.
> >
> > --
> > Mike Rylander
> >  | Executive Director
> >  | Equinox Open Library Initiative
> >  | phone:  1-877-OPEN-ILS (673-6457)
> >  | email:  miker at equinoxinitiative.org
> >  | web:  http://equinoxinitiative.org
> >
> > On Tue, Aug 13, 2019 at 1:39 PM Bill Erickson <berickxx at gmail.com> wrote:
> > >
> > > Hi All,
> > >
> > > For a long time, Firefox didn't support date and time <inputs/> -- no
> > calendar widget, no controls, etc.  Because of this, we have traditionally
> > relied on the date / time pickers provided by the toolkit (ng-bootstrap in
> > Angular).
> > >
> > > However, Firefox does now support date [1], time [2], and datetime-local
> > [3] input types, as does Chrome.  Date selectors provide calendar widgets,
> > all variations provide 'clear' actions, increment/decrement actions
> > (buttons and arrow key), input validation, and manual entry w/ support for
> > automatically jumping to the next field once a value part is entered (e.g.
> > hours => minutes).
> > >
> > > It looks like they do everything we need, but I could be overlooking
> > something...
> > >
> > > Is there any value in continuing to use the ng-bootstrap widgets for
> > date and time selectors?  Thoughts on migrating to native browser widgets?
> > >
> > > -b
> > >
> > > [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
> > > [2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
> > > [3]
> > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
> > >
> >
> -------------- next part --------------
> An HTML attachment was scrubbed...
> URL: <http://libmail.georgialibraries.org/pipermail/open-ils-dev/attachments/20190813/2d4b9d3d/attachment-0001.html>
>
> ------------------------------
>
> Message: 4
> Date: Tue, 13 Aug 2019 14:53:14 -0400
> From: Bill Erickson <berickxx at gmail.com>
> To: Evergreen Development Discussion List
>         <open-ils-dev at list.georgialibraries.org>
> Subject: Re: [OPEN-ILS-DEV] Native browser date / time selectors in
>         Angular?
> Message-ID:
>         <CAEjrdbqag8Wvzppw1qeoQb6om-rue-Jero4POcDBZF0KSD4-ww at mail.gmail.com>
> Content-Type: text/plain; charset="utf-8"
>
> Thanks, Mike & Dan.
>
> I must have been bouncing around between browsers and saw what I wanted to
> see in Chrome.  *sigh*
>
> In any event, if we do move toward native widgets, we would presumably be
> replacing the innards of the existing eg-date-select and forthcoming
> datetime and time range selectors [1].  If so, using combinations of date
> and time widgets in place of datetime-local should be an option, as long as
> we retain the API.
>
> Regarding the time picker, I prefer direct entry, so the lack of a pop-up
> didn't seem like a showstopper to me, but I could be in the minority on
> that one.
>
> -b
>
> [1] https://bugs.launchpad.net/evergreen/+bug/1834662
>
>
>
> On Tue, Aug 13, 2019 at 2:39 PM Dan Scott <dan at coffeecode.net> wrote:
>
> > The Browser Support section agrees with caniuse.com about the lack of
> > support in Firefox for datetime-local:
> > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#Browser_compatibility
> >
> > But date looks good and usable (per the live examples on the corresponding
> > MDN page). Time is functional but I'm not sure it's as friendly as the
> > ng-bootstrap implementation.
> >
> > On Tue, Aug 13, 2019 at 2:18 PM Mike Rylander <mrylander at gmail.com> wrote:
> >
> >> First, +1M to using the builtins!
> >>
> >> However, I just fired up Firefox to test empirically and I'm getting
> >> the default text input.  CanIUse
> >> (https://caniuse.com/#search=input-date) seems to agree that FF isn't
> >> yet there with datetime-local, sadly.
> >>
> >> Hopefully soon?  (Or we could drop FF support... j/k, mostly.)
> >>
> >> Thanks for bringing it back up, in any case.
> >>
> >> --
> >> Mike Rylander
> >>  | Executive Director
> >>  | Equinox Open Library Initiative
> >>  | phone:  1-877-OPEN-ILS (673-6457)
> >>  | email:  miker at equinoxinitiative.org
> >>  | web:  http://equinoxinitiative.org
> >>
> >> On Tue, Aug 13, 2019 at 1:39 PM Bill Erickson <berickxx at gmail.com> wrote:
> >> >
> >> > Hi All,
> >> >
> >> > For a long time, Firefox didn't support date and time <inputs/> -- no
> >> calendar widget, no controls, etc.  Because of this, we have traditionally
> >> relied on the date / time pickers provided by the toolkit (ng-bootstrap in
> >> Angular).
> >> >
> >> > However, Firefox does now support date [1], time [2], and
> >> datetime-local [3] input types, as does Chrome.  Date selectors provide
> >> calendar widgets, all variations provide 'clear' actions,
> >> increment/decrement actions (buttons and arrow key), input validation, and
> >> manual entry w/ support for automatically jumping to the next field once a
> >> value part is entered (e.g. hours => minutes).
> >> >
> >> > It looks like they do everything we need, but I could be overlooking
> >> something...
> >> >
> >> > Is there any value in continuing to use the ng-bootstrap widgets for
> >> date and time selectors?  Thoughts on migrating to native browser widgets?
> >> >
> >> > -b
> >> >
> >> > [1]
> >> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
> >> > [2]
> >> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
> >> > [3]
> >> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
> >> >
> >>
> >
> -------------- next part --------------
> An HTML attachment was scrubbed...
> URL: <http://libmail.georgialibraries.org/pipermail/open-ils-dev/attachments/20190813/3c523495/attachment.html>
>
> End of Open-ils-dev Digest, Vol 160, Issue 6
> ********************************************

-- 
Jane Sandberg
Electronic Resources Librarian
Linn-Benton Community College
sandbej at linnbenton.edu / 541-917-4655
Pronouns: she/her/hers