Calendar Eightysix version 1.1 - Examples

Look at the source code of this document for the HTML and JS-code.


Example I
Standard datepicker.

Example II
Datepicker week starts on Monday. Different slide transition and date format. The datepicker is draggable.

Example III
Datepicker with Saturday and Sunday as excluded weekdays. The calendar icon toggles the datepicker.

Example IV
Datepicker with a default date of December 1st 2012 and with first and second Christmas day as excluded dates.
The format is dd-mm-yyyy. (!) Note that the parsing of the dates has nothing to do with provided format.

Example V
Datepicker with minimum date of 'tomorrow', so only dates in the future can be picked. The default date is set on 'next Wednesday'. Theme is Default, red style.

Example VI
Datepicker with decade as the default view and Vista theme. User input is disallowed.

Example VII
Datepicker with year as the default view and OSX Dashboard theme. Position is bottom left.
An hidden input is created next to the input element (which you can see in the DOM whith for example Firebug). This hidden element receives timestamp as value whenever a date is picked.

Example VIII
 
Datepicker with a middle top position and different date format. Target is a div element instead of an input text element.

Example IX
Datepicker with a custom events, which set the month and year drop-downs. Changing the select and inputs manually will change the calendar date.
The date is ranged from January 1st 2010 to December 31st 2014.

Example X
Change the language of all the datepickers by clicking one of the buttons above.

Example XI A)    till    B)
Date range example where date A influences date B. Date B has to at least one day higher as date A.

Example XII
Datepicker with arrow key navigation. Automaticly skips excluded days. Press left or right to navigate days, press up or down to navigate months.

Example XIII
This calendar is injected inside the target, and is always visible. It makes use of a custom event which adds titles to each day, and added some styling and a click event the fourteenth.

More script and css style : www.htmldrive.net