Skuid Mobile Date Picker

Questions
1

The standard Skuid date picker using JQuery UI is not user friendly on mobile.

I’m currently building a mobile skuid page for IOS and simply want to deactivate the standard Skuid Date picker and use IOS’s built in picker by setting

I have created a custom field render on date but

  1. Cannot truly remove the JQuery date picker with “destroy”
  2. When I add type=“Date” to the input the IOS picker displays but the date never saves.

Attempt Custom field render:

/* Custom Field Render for Date field */

var field = arguments[0],
value = arguments[1];

skuid.ui.fieldRenderers[field.metadata.displaytype]field.mode;

var dateInput = field.element.find(‘input.hasDatepicker’);
dateInput.datepicker( “destroy” );
dateInput.removeClass(“hasDatepicker”).removeAttr(‘id’);
dateInput.attr(“type”, “Date”);

This is a crucial part of our App so any thoughts / idea’s would be greatly appreciated.

2

Hey Sean, there are a couple things to note here.

1. Whenever you change make a Skuid renderer you have to consider how you are going to ultimately get the data from the interface layer is going to make it into the model layer. By destroying the jQuery datepicker, you destroy the default behavior for this.
2. Dates are very complex. You have to deal with time zones, daylight savings, different formats, etc. Luckily, Skuid has an awesome library for dealing with all this stuff under “skuid.time”. You can read the documentation here. 

Those things being said, my recommended approach would be to completely forgo the standard Skuid renderer and use your own. I’ve written an example renderer that does just that, although it’s date only. If you want datetime you may have to do some slight modifications. Hope this was helpful.

3

Andrew excellent informative reply, greatly appreciated !!