Datepicker for Mobile and Desktop

I needed a datepicker that was usable on a tablet of phone.
With Modernizer this was relatively simple, http://modernizr.com
In Firefox etc it uses the jQuery UI Datepicker and in Opera and (modern) moble browsers HTML5

Installed the jQuery UI with the tool from the FAQ.

Firefox (Windows):

Opera (Windows)

Android


The javascript in the Setup (Chronoforms 5):

if (!Modernizr.inputtypes.date) { 

  jQuery(document).ready(function (jQ) {
    jQ( '#dp_a' ).datepicker({
      dateFormat: "dd-mm-yy" ,
      changeYear: true ,
      changeMonth: true ,
      yearRange: "c-50:c" ,
      });
    });
}

The Custom Module in the Designer:

<input type="date"  
id="dp_a"  
size="20"
 class="form-control A"
inputmask= 'dd-mm-yyyy'
data-tooltip="testje voor de tooltip" 
name="dp_a" />

The HTML5 Datepicker needs a "Date" field for the input, not possible with a Textfield.

Rob

Hi Rob,

I'm not clear what the question is here?

Is it how to set an input type=date? If so, I think that the only answer is with a Custom Element or, possibly, with JavaScript.

Is it about using the JQuery UI datepicker? In that case there's a FAQ about it. I've just checked and it's fine on the iPad and usable on the iPod/iPhone.

Bob

Hi Bob,

My post was not a question.
Just wanted to share this solution.

The JQuery UI datepicker works good on a pc, but not on a phone, at least not for someone with big hands.

The HTML5 datepicker works great on a phone, but only a few browsers (Opera an Chrome) support it.

With Modernizr I try not to load any javascripts that are not necessary for HTML5 browsers, especially for phones.

Rob

I changed the javascript a little bit.
Now the HTML Datepicker is only used on touch screens with browsers that support HTML5 Datepickers.

if (!Modernizr.touch || !Modernizr.inputtypes.date) {
 jQuery(document).ready(function (jQ) {
   jQ( '#dp_a' ).datepicker({
      dateFormat: "dd-mm-yy" ,
      changeYear: true ,
      changeMonth: true ,
      yearRange: "c-50:c" ,
      monthNamesShort: [ "Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ]
      });

  var inputField = document.getElementById("dp_a");
  inputField.type="text";

});
}

Rob

I did found a small problem.
The HTML5 datepicker returns the date in the format yyyy-mm-dd and displays it as dd-mm-yyy (Netherlands). That works great.

Unfortunately the JQuiry-ui datepicker returns the date as displayed, in this case dd-mm-yyy.
The result is that the dates are not is the right format in the Table.

I added two fields in the javascript, altField and altFormat.

if (!Modernizr.touch || !Modernizr.inputtypes.date) {
 jQuery(document).ready(function (jQ) {
   jQ( '#dp_a' ).datepicker({
   dateFormat: "dd-mm-yy" ,
      changeYear: true ,
      changeMonth: true ,
      yearRange: "c-50:c" ,
      altField: "#actualDate",
      altFormat: "yy-mm-dd",
      monthNamesShort: [ "Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ]
      });

 var inputField = document.getElementById("dp_a");
  inputField.type="text"; // to prevent two datepickers opening in Opera

});
}

and a hidden field in the designer with Fieldname datum and id actualDate.
With the JQuiry-ui datepicker this field gets de date in the yyy-mm-dd format.

A small script in the On Submit (before the DB Save.

<?php
if (empty( $form->data['datum'] )) {
 $form->data['datum'] = $form->data['dp_a'];  
}
?>

This puts the dp_a value in the datum field for the HTML5 Datepicker.

Now everything seems to work.

Rob