Vista-Like Ajax Calendar version 2.1.1 - Examples

Scriptpage: http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html.
Note: Some features in all examples are vlaCalendar v2.1.x only. See the change and option lists.
Example I
  Standard datepicker.
Show code
Javascript 
new vlaDatePicker('exampleI');
xHTML 
<input id="exampleI" type="text" style="width: 80px;" maxlength="10" />
Example II
  Datepicker with a different separator, two digit year and without a leading zero. Datepicker is positioned center-bottom.
Show code
Javascript 
new vlaDatePicker('exampleII',
    { separator: '-', leadingZero: false, twoDigitYear: true,
      alignX: 'center', alignY: 'bottom',
      offset: { y: 3 } } );
xHTML 
<input id="exampleII" type="text" style="width: 80px;" maxlength="10" />
Example III
  Datepicker with separate day, month and year input. The calendar icon toggles the datepicker.
Show code
Javascript 
new vlaDatePicker('exampleIII',
    { openWith: 'togglePicker', offset: { y: -2, x: 2 },
      separateInput: { day: 'day', month: 'month',
        year: 'year' } } );
xHTML 
<span id="exampleIII">
    <input name="day" type="text" style="width: 18px; border-width: 1px 0 1px 1px;" maxlength="2" />
    <input value="/" type="text" disabled="disabled" style="width: 5px; border-width: 1px 0;" />
    <input name="month" class="textbox" style="width: 16px; border-width: 1px 0;" maxlength="2" type="text" />
    <input value="/" type="text" disabled="disabled" style="width: 5px; border-width: 1px 0;" />
    <input name="year" type="text" style="width: 28px; border-width: 1px 0;" maxlength="4" />
    <input type="text" disabled="disabled" style="width: 15px; border-width: 1px 1px 1px 0;" />
    <img src="images/calendar.gif" id="togglePicker" class="pickerImg" alt="Pick date" />
</span>
Example IV Two alternative styles are included in the download.
  Datepicker with Adobe CS3 GUI style. Date format is d/m/y (month/day/year).
Show code
Javascript 
new vlaDatePicker('exampleIV-A',
    { style: 'adobe_cs3', offset: { y: 1 },
      format: 'm/d/y', ieTransitionColor: '' });
xHTML 
<input id="exampleIV-A" type="text" style="width: 80px;" maxlength="10" />
 
  Datepicker with Apple OSX Tiger calendar widget style.
Show code
Javascript 
new vlaDatePicker('exampleIV-B',
    { style: 'apple_widget', offset: { x: 3, y: 1 } });
xHTML 
<input id="exampleIV-B" type="text" style="width: 80px;" maxlength="10" />
Example V
 
  The normal calendar. Calendar week starts on monday.
Show code
Javascript 
new vlaCalendar('exampleV', { startMonday: true });
xHTML 
<div id="exampleV"></div>
Example VI
  Datepicker with the current year as a default view.
Show code
Javascript 
new vlaDatePicker('example', { defaultView: 'year' });
xHTML 
<input id="exampleVI" type="text" style="width: 80px;" maxlength="10" />
Example VII
  Datepicker with a default date set to 12 December 2012.
Show code
Javascript 
new vlaDatePicker('example', 

    { prefillDate: { day: 12, month: 12, year: 2012 } });
xHTML 
<input id="exampleVII" type="text" style="width: 80px;" maxlength="10" />