<input id="simple_calendar" name="simple_calendar" type="text" /><br/> <script type="text/javascript"> InputCalendar.createOnLoaded('simple_calendar'); </script>
<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>
<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>
<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>
<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>
<input id="weekday_calendar" name="" size="30" type="text" /> <script type="text/javascript"> InputCalendar.createOnLoaded('weekday_calendar', {weekFirstDay:ProtoCalendar.SUNDAY}); </script>
<input id="japan_calendar" name="japan_calendar" size="30" type="text" /> <script type="text/javascript"> InputCalendar.createOnLoaded('japan_calendar', {lang:'ja'}); </script>
<input id="chinese_calendar" name="chinese_calendar" size="30" type="text" /> <script type="text/javascript"> InputCalendar.createOnLoaded('chinese_calendar', {lang:'zh-cn'}); </script>
<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>
<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 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 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 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>
<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>