Editor: use native (html5) datepicker if available

calexander

Hello

I have a date field in my Datatable and my Editor field options look similar to this:
fields: [
{
label: "label",
name: "name",
type: "date"
}
]

What I would like is for:
* Editor to use the browser's native (html5) datepicker if it exists.
* If the browser doesn't have a native datepicker I would like Editor to use a javascript fallback (either jQueryUI or Editor's built-in picker)

Does anyone know if this is possible?

The Editor documentation and my own quick tests tell me:
* if jQueryUI is present Editor will use the jQueryUI datepicker regardless of the browser's capabilities
* if jQueryUI is not present Editor will use browser's native datepicker if it exists - if not it'll just present a plain text input

Many thanks

allan

Hi,

The date field type has a description of when the HTML5 date type will be used, and also a comparison to the datetime field type.

The problem I've found with the HTML5 date input type is that only Chrome supports it on the desktop (possibly Edge as well now, I can't remember!) - and perhaps more importantly it also has very limited formatting options - typically expected ISO8601 as the wire format, so its flexibility is greatly reduced.

I would love to ditch the jQuery UI support and the datetime Javascript input, but it just hasn't been practical to do so so far.

Regards,
Allan

calexander

Hi Allan

Thanks for your reply.

I'd like to provide a consistent experience across the app we're currently developing - wherever else we have a date input we first use Modernizr to test for a native html5 datepicker and finally fallback to jquery ui. We've found it preferable to use the browser's native datepicker, particularly on mobile/touch devices.

I'm currently evaluating the trial version of Editor but presumably somewhere in the editor source it says something to the effect of:
if( jQuery.ui.datepicker ){ use datepicker }.

If I wanted to modify this code, would it be as straightforward as changing the condition to something like:
if( jQuery.ui.datepicker && [no html5 datepicker] ){ use datepicker }?

Thanks
Colin

PS. if you're interested, here's the current browser support for native datepickers.

allan

That is almost exactly what it does:

if ( $.datepicker ) {

Perhaps an easier solution than modifying the Editor code is to use the standard text input type and set its type attribute to date:

{
  name: "myField",
  label: "Date:",
  attr: {
    type: 'date'
  }
}

That will use an HTML5 date picker, and if not available it will just be a regular text input.

Allan

calexander

Ah ok. So, if I understand correctly, the above will result in <input type="date" /> being rendered but without Editor initiating jquery's datepicker.

If I then wanted to test whether the browser has a native datepicker and then initiate jquery manually if that test failed, where would I do it? (I'm editing inline). My best guesses have been in the inline() method or in the open/preOpen events, but I'm not sure how to retrieve the form field.

Thanks

allan

So, if I understand correctly, the above will result in <input type="date" /> being rendered but without Editor initiating jquery's datepicker.

Exactly that, yes.

If I then wanted to test whether the browser has a native datepicker and then initiate jquery manually if that test failed, where would I do it?

Two options:

1. Modify Editor's date field (search the code for the if statement I put above)
2. You could use field().input() to get the input element after the Editor has been created and enhance it as you require. It need only be done once since the element is reused.

Allan