Buy Now
Sign in

Datepicker for Mobile and Desktop

RobP , August 04 2014
Featured
R
RobP
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
GreyHead
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
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
R
RobP
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
R
RobP
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
R
RobP
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