Fork me on GitHub


Customization demos

Use createDatepicky() to render the date picker and bind it to an input element of type text of date. The first parameter is the id of the input element, the second parameter is the id of a div which will contain the datepicker. The third parameter is a hash for customizations, it is optional.

createDatepicky("id1", "id2");

If the input element already has a value from the start, the datepicky.js will read and display it.

createDatepicky("id1", "id2");

Set a default date which will automatically get selected on startup. Use a Date object or a "YYYY-MM-DD" string.

createDatepicky("id1", "id2", {defaultDate: "1973-05-20"});

Set a default month which will automatically get displayed on startup. Use a Date object, a "YYYY-MM-DD" string, or simply "YYYY-MM".

createDatepicky("id1", "id2", {defaultMonth: "2100-03"});

Specify disabledDays with an array of weekday indicies that should be disabled. The index for Sunday is 0, Monday is 1, ...

createDatepicky("id1", "id2", {disabledDays: [0, 6]});

Disable specific dates with disabledDates. The dates can be specified as Date objects or "YYYY-MM-DD" strings.

createDatepicky("id1", "id2", {disabledDates: [new Date(2011, 6, 12), "2011-07-05"], defaultMonth: "2011-07"});

Use minDate to specify the earliest valid date, use maxDate to specify the latest valid date. Use a Date object or a "YYYY-MM-DD" string.

createDatepicky("id1", "id2", {minDate: new Date(2011, 6, 12), maxDate: "2011-07-25", defaultMonth: "2011-07"});

By default, Monday is the first day of the week. Use firstDayOfWeek to change that.

createDatepicky("id1", "id2", {firstDayOfWeek: 0});

Customize the names of weekday and months with weekdayNames and monthNames.

createDatepicky("id1", "id2", {weekdayNames: ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"], monthNames: ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]});

Let the datepicker indicate an invalid date in the input element with a class. To try this out, enter 2011-07-12 into the input element.

createDatepicky("id1", "id2", {invalidDateClassName: "InvalidDate", disabledDays: [1, 2, 3, 4, 5]});

Use CSS to change the look.

.Datepicky { display: inline-block; font-family: times, serif; ...