Form Fields‎ > ‎

Date & Time

The Date field has two available options, the jQuery date picker and the simple standard Month/Year picker. You can customize the date picker using the jQuery Theme option from the General Settings section or by styling the CSS classes from the UI Settings section.


Optionally, you can provide a JSON object with other options to pass into the jQuery Date Picker control.

For example:

1. To disable the weekends from the date picker, write in the Other Options for jQuery UI Datepicker (JSON) field:
 
{
 beforeShowDay: $.datepicker.noWeekends
}


2. To enable days beginning with the system date:

{
minDate: 0
}


3. To enable days between the system date and a certain date (e.g. until the 25th of August 2014):

{
minDate: -0,
maxDate: '08/
25/2014'
}

4. To enable one month, starting with the current day, without weekends:

{
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
maxDate: 30
}


5. To disable all dates except Sundays: (Where 0=Sunday, 1=Monday ... 6 = Saturday)

{
beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day == 0), ''];
    }
}



Ensure End Date is later than Start Date


If you want to make sure the user selects an End Date that is later than the Start Date, you can add the following piece of code to the JavaScript section of the submit button:

var start=$scope.form.fields.StartDate.value; 

var end= $scope.form.fields.EndDate.value; 

var startDate = Date.parse(start); 

var endDate = Date.parse(end); 

// Make sure they are valid 

if (isNaN(startDate)) { 

alert("The start date provided is not valid, please enter a valid date."); 

return false; 

} 

if (isNaN(endDate)) { 

alert("The end date provided is not valid, please enter a valid date."); 

return false; 

} 

if (endDate < startDate) { 

alert("The start date cannot be greater than end date."); 

return false; 

} 

// Check the date range, 86400000 is the number of milliseconds in one day 

var difference = (endDate - startDate) / (86400000 * 60); 

if (difference >1){ 

alert("You can only search for 60 days at a time. Please adjust the start date or end date."); 

return false; 

} 


return true; 


Then, in the OnClick Event Handler for that form you need to add an Action for Data->Repost Data.
Comments