## 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>