FigmentDesign

Just jQuery UI Widgets

Once you install the plugin and enable the datepicker plus al lthe required ones all the scripts are identical to the jQuery version found in jQuery UI. This example might not work for you but in the “Custom jQuery Code” box under the settings I added this: #CheckIn is the ID my first date box and #CheckOut is the ID of my second. Also you might need to change the dateFormat to you one prefer. The last lines I also included on how to set Sunday as the first day of the week for the calendar. Keep in mind that in WordPress you need to replace $ for the word jQuery when using code from jQuery UI. I was desperate for it to work so I actually enabled everything under “use These jQuery UI Scripts” and everything under “Use These jQuery Effect Scripts”

jQuery( function() {
var dateFormat = “dd-MM-yy”,
from = jQuery( “#CheckIn” )
.datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 1
})
.on( “change”, function() {
to.datepicker( “option”, “minDate”, getDate( this ) );
}),
to = jQuery( “#CheckOut” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 1
})
.on( “change”, function() {
from.datepicker( “option”, “maxDate”, getDate( this ) );
});

function getDate( element ) {
var date;
try {
date = jQuery.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );

jQuery( function() {
var dateFormat = jQuery( “#CheckIn” ).datepicker( “option”, “dateFormat” );
jQuery( “#CheckIn” ).datepicker( “option”, “dateFormat”, “dd-MM-yy” );
var dateFormat = jQuery( “#CheckOut” ).datepicker( “option”, “dateFormat” );
jQuery( “#CheckOut” ).datepicker( “option”, “dateFormat”, “dd-MM-yy” );

//getter
var firstDay = jQuery(‘#CheckIn’).datepicker(‘option’, ‘firstDay’);
//setter
jQuery(‘#CheckIn’).datepicker(‘option’, ‘firstDay’, 0);
//getter
var firstDay = jQuery(‘#CheckOut’).datepicker(‘option’, ‘firstDay’);
//setter
jQuery(‘#CheckOut’).datepicker(‘option’, ‘firstDay’, 0);