How can I set start and end dates for a datepicker?

Published on Jan 16, 2013 09:57

Sometimes you only want to allow the user to pick dates after a certain date - e.g. only in the future; or only after a week from today; or you only want to allow them to pick dates before a certain - e.g. only in the past; or more than ten years ago. This FAQ shows one way of doing that with the MooTools datepicker.

The new version of this tutorial for ChronoForms 8 is available here

The code in this FAQ is written for the MooTools datepicker. Click the form name link in the Forms Manager and scroll down the General tab to find the Date Picker Settings and set the DatePicker Type to "MooTools DatePicker".

Setting a start date

On the form general tab (see above) add the following code to the DateTime Picker config box:

minDate: start_date

Save the form and open the Form Wizard.

Adding JavaScript: If you are using the Easy Form Wizard go to the Others | JS/CSS Settings tab and use the JavaScript Code box; if you are using the Normal/Advanced Wizard drag a Load JS action from the Utilities group into the On Load event and drag it up before the Show HTML action.

Add this JavaScript to your form:

var start_date = new Date();

This will set the start date (the earliest selectable date) to today. To move this into the future use code like this:

var start_date = new Date().increment('day', 7);

which will set the start date one week ahead.

Setting an end date

On the form general tab (see above) add the following code to the DateTime Picker config box:

maxDate: end_date

Save the form and open the Form Wizard.

Add this JavaScript to your form:

var end_date = new Date();

This will set the end date (the latest selectable date) to today. To move this into the past use code like this:

var start_date = new Date().decrement('year', 10);

which will set the end date ten years ago.

Note this uses decrement not increment!

Setting a start and end date

On the form General tab (see above) add the following code to the DateTime Picker config box:

minDate: start_date, maxDate: end_date

Then add both lines in the JavaScript Code box e.g.

var start_date = new Date().increment('week', 1);
var end_date = new Date().increment('week', 5);

This will allow the picking of dates between one week and five weeks in the future.

Valid time intervals are 'day', 'week', 'month', 'year' or 'hour', 'minute', 'second', and 'ms' if you use a time picker

Setting fixed dates

If you want to set a fixed date rather than 'x days from now' then you can set this too:

var start_date = new Date ('2013-06-21');
var end_date = new Date('2013-12-24');

How can I set start and end dates for a datepicker?

Setting a start date

Setting an end date

Setting a start and end date

Setting fixed dates

Comments: