Customizing the Date Field to Disable Certain Dates
The Date picker field in Simfatic Forms has many built-in features. You can use the smart-init feature to initialize it to a certain date. (for example: today or today + 1 week or another_date+1week etc)
If you need even further customization that is possible through custom code. In this post I will show you how to disable certain dates (for example, Saturdays and Sundays) through custom code.
The Simfatic Forms date picker uses jQuery UI Date picker. So all the options available for the jQuery UI is available in Simfatic Forms date picker as well. Here is the list of options, methods and events in jQuery UI Date picker.
To disable saturdays and Sundays, we make use of the beforeShowDay call back option. So in the Draw the form page->Custom Code->Javascript tab, enter the following code:
$('#dd').datepicker("option","beforeShowDay",function(date) {
var day = date.getDay();
return [(day != 0 && day != 6), ''];
});
dd is the name of the date field.
for the day, Sunday is 0 , Monday is 1 and so forth
Preview the form and it would have disabled Saturdays and Sundays.
However, the user can type and enter a date (that is Sunday) in the text box. For that, you have to add a custom validation.
Here is the custom validation code that checks the day. Enter this custom validation code in the Input Validations-> Options->Custom Validation box
var datelement = $('#dd').get(0);
var date = datelement.getcal();
if(date.getDay()==6 || date.getDay()==0)
{
return({ elementobj:datelement, message:"Shouldn't be Saturday or Sunday!" });
}
return true;
The Simfatic Forms date picker input has a function getcal() that gets the associated Javascript Date object. We then check the day and return error if it is Saturday or Sunday