protocalendar.js version 

Simple Calendar


      <input id="simple_calendar" name="simple_calendar" type="text" /><br/>

      <script type="text/javascript">
        InputCalendar.createOnLoaded('simple_calendar');
      </script>

Calendar Style + IE bug fix



http://support.microsoft.com/kb/177378
    <input id="style_calendar" name="style_calendar" size="30" type="text" />

    <script type="text/javascript">
      InputCalendar.createOnLoaded('style_calendar');
    </script>
    <br/>
    <select name="calendar_style_select" id="calendar_style_select">
      <option value="simple">simple</option>
      <option value="metal">metal</option>
      <option value="paper">paper</option>
      <option value="jquery-calendar">jquery-calendar</option>
      <option value="ext-simple">ext-simple</option>
    </select>

Simple Calendar with Label


      <input id="simple_calendar_with_label" name="simple_calendar_with_label" type="text" /><br/>

      <script type="text/javascript">
        InputCalendar.createOnLoaded('simple_calendar_with_label', {labelFormat: 'ddddi dd mmmm yyyy'});
      </script>

Calendar(Date format)

    <input id="dateformat_calendar" name="dateformat_calendar" type="text" />

    <div id="dateformat_calendar_label"></div>
    <script type="text/javascript">
      InputCalendar.createOnLoaded('dateformat_calendar', {format: 'yyyy-mm-dd', labelEl: 'dateformat_calendar_label', labelFormat: 'dddi dd mmm yyyy'});
    </script>

Calendar(Start Year, End Year)

    <input id="start_end_year_calendar" name="start_end_year_calendar" type="text" />

    <script type="text/javascript">
      InputCalendar.createOnLoaded('start_end_year_calendar', {startYear: 1950, endYear: 1999});
    </script>

Calendar Start with Sunday

    <input id="weekday_calendar" name="" size="30" type="text" />

    <script type="text/javascript">
      InputCalendar.createOnLoaded('weekday_calendar', {weekFirstDay:ProtoCalendar.SUNDAY});
    </script>

Japanese Calendar(+ Japanese holidays)

    <input id="japan_calendar" name="japan_calendar" size="30" type="text" />

    <script type="text/javascript">
      InputCalendar.createOnLoaded('japan_calendar', {lang:'ja'});
    </script>

Chinese Calendar

    <input id="chinese_calendar" name="chinese_calendar" size="30" type="text" />

    <script type="text/javascript">
      InputCalendar.createOnLoaded('chinese_calendar', {lang:'zh-cn'});
    </script>

Read only Calendar(+ Icon)

    <input id="icon_calendar" name="icon_calendar" size="30" type="text" />

    <img src="../images/icon_calendar.gif" id="calendar_icon"/>
    <script type="text/javascript">
      document.observe('dom:loaded', function() {
      var cal1 = new InputCalendar('icon_calendar', {inputReadOnly: true, lang:'zh-cn'});
      cal1.addTrigger('calendar_icon');
      });
    </script>

Setup Calendar






    <input class="calendar" name="calendar1" size="30" type="text" /><br/>

    <input class="calendar" name="calendar2" size="30" type="text" /><br/>
    <input class="calendar" name="calendar3" size="30" type="text" /><br/>
    <input class="calendar" name="calendar4" size="30" type="text" /><br/>
    <input class="calendar" name="calendar5" size="30" type="text" /><br/>
    <script type="text/javascript">
      InputCalendar.initCalendars('input.calendar');
    </script>

Select Calendar(Date)

    <select id="y" name="year"></select>年

    <select id="m" name="month"></select>月
    <select id="d" name="day"></select>日
    <img src="../images/icon_calendar.gif" id="select_date_calendar_icon"/>
    <script type="text/javascript">
      SelectCalendar.createOnLoaded({yearSelect: 'y',
             monthSelect: 'm',
             daySelect: 'd'
            },
            {startYear: 1900,
             endYear: 2007,
             lang: 'ja',
             triggers: ['select_date_calendar_icon']
            });
    </script>

Select Calendar(Datetime)

    <select id="y2" name="year"></select>年

    <select id="m2" name="month"></select>月
    <select id="d2" name="day"></select>日
    <select id="hour"></select>時
    <select id="minute"></select>分
    <img src="../images/icon_calendar.gif" id="select_datetime_calendar_icon"/>
    <script type="text/javascript">
      SelectCalendar.createOnLoaded({yearSelect: 'y2',
             monthSelect: 'm2',
             daySelect: 'd2',
             hourSelect: 'hour',
             minuteSelect: 'minute'
            },
            {enableHourMinute: true,
             startYear: 1900,
             endYear: 2007,
             lang: 'ja',
             triggers:['select_datetime_calendar_icon']
            });
    </script>

Input Calendar(Datetime)



    <input id="calendar-hm" size="30" type="text" /><br/>

    <script type="text/javascript">
      InputCalendar.createOnLoaded('calendar-hm',
      {format: 'yyyy/mm/dd HH:MM:ss', enableHourMinute: true, enableSecond: true});
    </script>
    <input id="calendar-hm2" size="30" type="text" /><br/>
    <script type="text/javascript">
      InputCalendar.createOnLoaded('calendar-hm2',
           {format: 'yyyy/mm/dd HH:MM',
            enableHourMinute: true,
            lang: 'ja'});
    </script>

Input Calendar for Label(Datetime)

    <div id="calendar_hm3_label"></div>

    <input id="calendar_hm3" name="calendar_hm3" type="hidden" />
    <input type="button" value="Edit Date" id="calendar_hm3_icon"/>
    <script type="text/javascript" id="cal-script3">
      InputCalendar.createOnLoaded('calendar_hm3',
           {labelEl: 'calendar_hm3_label',
            labelFormat: 'yyyy年mm月dd日 HH時MM分',
            alignTo: 'calendar_hm3_icon',
            format: 'yyyy/mm/dd HH:MM',
            enableHourMinute: true,
            lang: 'ja',
            triggers: ['calendar_hm3_icon']});
    </script>