My97DatePicker（WdatePicker）日期控制元件用法
阿新 • • 發佈：2018-10-31
WdatePicker[html] view plain copy print? <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 它的官網是http://www.my97.net/ --> <!-- 引入它的js(這裡用的是My97.DatePicker.4.72.Release) --> <!-- My97DatePicker引入到專案中後的目錄結構如下 WebRoot |--js | |--My97DatePicker | | |--lang | | | |--zh-cn.js | | |--skin | | | |--default | | | | |--datepicker.css | | | | |--img.gif | | | |--datePicker.gif | | | |--WdatePicker.css | | |--calendar.js | | |--config.js | | |--My97DatePicker.htm | | |--WdatePicker.js --> <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script> <!-- 下面演示My97DatePicker的一些效果 --> <font color="blue">常規呼叫(若想在文字框中尾部顯示日期圖示，可以設定<input class="Wdate"/>)</font> <br/> <input type="text" onClick="WdatePicker()"/> <br/> <br/> <font color="blue">圖示觸發(此時只有點選圖示才能彈出日期選擇框)</font> <br/> <input id="iconInvoke" type="text"/> <img onclick="WdatePicker({el:'iconInvoke'})" src="js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle"> <br/> <br/> <font color="blue">禁止清空(即使用者選擇完日期後，不能直接在文字框中按detele鍵刪掉或清空，只能重新選擇日期)</font> <br/> <input type="text" class="Wdate" onFocus="WdatePicker({isShowClear:false, readOnly:true})"/> <br/> <br/> <font color="blue">自定義每週的第一天(4.6新增：設定週一為每週第一天)</font> <br/> <input type="text" onfocus="WdatePicker({firstDayOfWeek:1})"/> <br/> <br/> <font color="blue">自定義日期顯示格式(這裡設定為yyyy-MM-dd HH:mm，這一點和Java相同，還可設定其它的如'yyyy年MM月')</font> <br/> <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})"/> <br/> <br/> <font color="blue">雙月日曆功能(4.6新增：可以同時彈出兩個月的日曆)</font> <br/> <input type="text" onfocus="WdatePicker({doubleCalendar:true, dateFmt:'yyyy-MM-dd'})"/> <br/> <br/> <font color="blue">限制日期範圍為2013-09-14到2013-9-20</font> <br/> <input type="text" onfocus="WdatePicker({minDate:'2013-09-14', maxDate:'2013-9-20'})"/> <br/> <br/> <font color="blue">限制日期範圍為2013年9月到2013年10月</font> <br/> <input type="text" onfocus="WdatePicker({minDate:'2013-9', maxDate:'2013-10-31'})"/> <br/> <br/> <font color="blue">限制日期範圍為10:00:20到14:30:00</font> <br/> <input type="text" onfocus="WdatePicker({dateFmt:'HH:mm:ss', minDate:'10:00:20', maxDate:'14:30:00'})"/> <br/> <br/> <font color="blue">限制日期範圍為2013-9-14 10:30到2013-9-15 16:40</font> <br/> <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'2013-09-14 10:30', maxDate:'2013-09-15 16:40'})"/> <br/> <br/> <font color="blue">只能選擇今天以前的日期(包括今天)</font> <br/> <input type="text" onfocus="WdatePicker({maxDate:'%y-%M-%d'})"/> <br/> <br/> <font color="blue">只能選擇今天以後的日期(不包括今天)(這裡使用了My97DatePicker的運算表示式)</font> <br/> <input type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/> <br/> <br/> <font color="blue">只能選擇本月日期的第一天到最後一天</font> <br/> <input type="text" onfocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld'})"/> <br/> <br/> <font color="blue">只能選擇今天10:20至明天14:28的日期</font> <br/> <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d 10:20', maxDate:'%y-%M-{%d+1} 14:28'})"/> <br/> <br/> <font color="blue">只能選擇20個小時前到30個小時後的日期(這裡使用了My97DatePicker的運算表示式)</font> <br/> <input type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d {%H-20}:%m:%s', maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/> <br/> <br/> <font color="blue">後面的日期大於前面的日期，且兩個日期都不能大於2020-10-01</font> <br/> <input type="text" id="date01" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date02\')||\'2020-10-01\'}'})"/> 到 <input type="text" id="date02" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date01\')}', maxDate:'2020-10-01'})"/> <br/> <br/> <font color="blue">後面的日期最少要比前面的日期大3天</font> <br/> <input type="text" id="date03" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date04\',{d:-3});}'})"/> 到 <input type="text" id="date04" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date03\',{d:3});}'})"/> <br/> <br/> <font color="blue">禁用週六日</font> <br/> <input type="text" onFocus="WdatePicker({disabledDays:[0,6]})"/> <br/> <br/> <font color="blue">禁用每月的5日15日25日('5$'表示以5結尾)</font> <br/> <input type="text" onFocus="WdatePicker({disabledDates:['5$']})"/> <br/> <br/> <font color="blue">禁用所有早於2000-01-01的日期('^19'表示以19開頭，可用minDate實現類似功能，這裡主要是演示^的用法)</font> <br/> <input type="text" onFocus="WdatePicker({disabledDates:['^19']})"/> <br/> <br/> <font color="blue">將本月可用日期分隔成五段，分別是: 1-3、8-10、16-24、26、27、29到月末</font> <br/> <input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/> <br/> <br/> <font color="blue">將本月可用日期分隔成五段，分別是: 1-3、8-10、16-24、26、27、29到月末，並禁用每個週一、三、六</font> <br/> <input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$'], disabledDays:[1,3,6]})"/> <br/> <br/> <font color="blue">禁用前一個小時和後一個小時內所有時間(滑鼠點選日期輸入框時，你會發現當前時間對應的前一個小時和後一個小時是灰色的)</font> <br/> <input type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/> <br/> <br/> <form action="servlet/DatePickerServlet" method="POST"> <font color="blue"> 只能選擇7天以內日期(包括今天)<br/> 注意：假設使用者先選擇後面日期為後天，然後再選擇前面日期，此時前面日期允許選擇今天以前的5天<br/> 注意：這是為了將來的編輯用途(比方說這倆日期是一個活動的起止日期，使用者有權在釋出活動後回來修改日期) </font> <br/> <input type="text" id="startTime" name="startTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', maxDate:'#F{$dp.$D(\'endTime\')}', minDate:'#F{$dp.$D(\'endTime\',{d:-7})||\'%y-%M-%d\'}'})"/> 到 <input type="text" id="endTime" name="endTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', minDate:'#F{$dp.$D(\'startTime\')}', maxDate:'#F{$dp.$D(\'startTime\',{d:7});}'})"/> <br/> <br/> <input type="submit" value="提交活動日期到伺服器"> </form> [html] view plain copy print? <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 它的官網是http://www.my97.net/ --> <!-- 引入它的js(這裡用的是My97.DatePicker.4.72.Release) --> <!-- My97DatePicker引入到專案中後的目錄結構如下 WebRoot |--js | |--My97DatePicker | | |--lang | | | |--zh-cn.js | | |--skin | | | |--default | | | | |--datepicker.css | | | | |--img.gif | | | |--datePicker.gif | | | |--WdatePicker.css | | |--calendar.js | | |--config.js | | |--My97DatePicker.htm | | |--WdatePicker.js --> <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script> <!-- 下面演示My97DatePicker的一些效果 --> <font color="blue">常規呼叫(若想在文字框中尾部顯示日期圖示，可以設定<input class="Wdate"/>)</font> <br/> <input type="text" onClick="WdatePicker()"/> <br/> <br/> <font color="blue">圖示觸發(此時只有點選圖示才能彈出日期選擇框)</font> <br/> <input id="iconInvoke" type="text"/> <img onclick="WdatePicker({el:'iconInvoke'})" src="js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle"> <br/> <br/> <font color="blue">禁止清空(即使用者選擇完日期後，不能直接在文字框中按detele鍵刪掉或清空，只能重新選擇日期)</font> <br/> <input type="text" class="Wdate" onFocus="WdatePicker({isShowClear:false, readOnly:true})"/> <br/> <br/> <font color="blue">自定義每週的第一天(4.6新增：設定週一為每週第一天)</font> <br/> <input type="text" onfocus="WdatePicker({firstDayOfWeek:1})"/> <br/> <br/> <font color="blue">自定義日期顯示格式(這裡設定為yyyy-MM-dd HH:mm，這一點和Java相同，還可設定其它的如'yyyy年MM月')</font> <br/> <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})"/> <br/> <br/> <font color="blue">雙月日曆功能(4.6新增：可以同時彈出兩個月的日曆)</font> <br/> <input type="text" onfocus="WdatePicker({doubleCalendar:true, dateFmt:'yyyy-MM-dd'})"/> <br/> <br/> <font color="blue">限制日期範圍為2013-09-14到2013-9-20</font> <br/> <input type="text" onfocus="WdatePicker({minDate:'2013-09-14', maxDate:'2013-9-20'})"/> <br/> <br/> <font color="blue">限制日期範圍為2013年9月到2013年10月</font> <br/> <input type="text" onfocus="WdatePicker({minDate:'2013-9', maxDate:'2013-10-31'})"/> <br/> <br/> <font color="blue">限制日期範圍為10:00:20到14:30:00</font> <br/> <input type="text" onfocus="WdatePicker({dateFmt:'HH:mm:ss', minDate:'10:00:20', maxDate:'14:30:00'})"/> <br/> <br/> <font color="blue">限制日期範圍為2013-9-14 10:30到2013-9-15 16:40</font> <br/> <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'2013-09-14 10:30', maxDate:'2013-09-15 16:40'})"/> <br/> <br/> <font color="blue">只能選擇今天以前的日期(包括今天)</font> <br/> <input type="text" onfocus="WdatePicker({maxDate:'%y-%M-%d'})"/> <br/> <br/> <font color="blue">只能選擇今天以後的日期(不包括今天)(這裡使用了My97DatePicker的運算表示式)</font> <br/> <input type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/> <br/> <br/> <font color="blue">只能選擇本月日期的第一天到最後一天</font> <br/> <input type="text" onfocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld'})"/> <br/> <br/> <font color="blue">只能選擇今天10:20至明天14:28的日期</font> <br/> <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d 10:20', maxDate:'%y-%M-{%d+1} 14:28'})"/> <br/> <br/> <font color="blue">只能選擇20個小時前到30個小時後的日期(這裡使用了My97DatePicker的運算表示式)</font> <br/> <input type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d {%H-20}:%m:%s', maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/> <br/> <br/> <font color="blue">後面的日期大於前面的日期，且兩個日期都不能大於2020-10-01</font> <br/> <input type="text" id="date01" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date02\')||\'2020-10-01\'}'})"/> 到 <input type="text" id="date02" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date01\')}', maxDate:'2020-10-01'})"/> <br/> <br/> <font color="blue">後面的日期最少要比前面的日期大3天</font> <br/> <input type="text" id="date03" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date04\',{d:-3});}'})"/> 到 <input type="text" id="date04" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date03\',{d:3});}'})"/> <br/> <br/> <font color="blue">禁用週六日</font> <br/> <input type="text" onFocus="WdatePicker({disabledDays:[0,6]})"/> <br/> <br/> <font color="blue">禁用每月的5日15日25日('5$'表示以5結尾)</font> <br/> <input type="text" onFocus="WdatePicker({disabledDates:['5$']})"/> <br/> <br/> <font color="blue">禁用所有早於2000-01-01的日期('^19'表示以19開頭，可用minDate實現類似功能，這裡主要是演示^的用法)</font> <br/> <input type="text" onFocus="WdatePicker({disabledDates:['^19']})"/> <br/> <br/> <font color="blue">將本月可用日期分隔成五段，分別是: 1-3、8-10、16-24、26、27、29到月末</font> <br/> <input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/> <br/> <br/> <font color="blue">將本月可用日期分隔成五段，分別是: 1-3、8-10、16-24、26、27、29到月末，並禁用每個週一、三、六</font> <br/> <input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$'], disabledDays:[1,3,6]})"/> <br/> <br/> <font color="blue">禁用前一個小時和後一個小時內所有時間(滑鼠點選日期輸入框時，你會發現當前時間對應的前一個小時和後一個小時是灰色的)</font> <br/> <input type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/> <br/> <br/> <form action="servlet/DatePickerServlet" method="POST"> <font color="blue"> 只能選擇7天以內日期(包括今天)<br/> 注意：假設使用者先選擇後面日期為後天，然後再選擇前面日期，此時前面日期允許選擇今天以前的5天<br/> 注意：這是為了將來的編輯用途(比方說這倆日期是一個活動的起止日期，使用者有權在釋出活動後回來修改日期) </font> <br/> <input type="text" id="startTime" name="startTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', maxDate:'#F{$dp.$D(\'endTime\')}', minDate:'#F{$dp.$D(\'endTime\',{d:-7})||\'%y-%M-%d\'}'})"/> 到 <input type="text" id="endTime" name="endTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', minDate:'#F{$dp.$D(\'startTime\')}', maxDate:'#F{$dp.$D(\'startTime\',{d:7});}'})"/> <br/> <br/> <input type="submit" value="提交活動日期到伺服器"> </form>