Skuid Mobile Date Picker

  • 1
  • Question
  • Updated 3 years ago
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 <input type="Date">

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](field,value);

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.
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Andrew Duensing

Andrew Duensing, Employee

  • 740 Points 500 badge 2x thumb
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.
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb
Andrew excellent informative reply, greatly appreciated !!