<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>日期demo</title>
<script src="plugins/my97datepicker/WdatePicker.js"></script>
</head>
<style>
div{
margin-bottom: 10px;
}
</style>
<body>
<div>
雙月日曆<input type="text" id="date1" onfocus="WdatePicker({doubleCalendar:true})">
<br>
<input type="text" id="date2" >
<input type="button" value="選中日期" />
</div>
<button id="clickMe">比較第一個和第二個的大小</button>
<br>
<div>
顯示周： <input type="text" id="date3" onfocus="WdatePicker({isShowWeek:true})"><br>
日期框只可讀,隱藏清空按鈕：<input type="text" id="date4" onfocus="WdatePicker({readOnly:true,isShowClear:false})" >
</div>
<br>
<div>
設置週末高亮，通過position【默認absolute】設置位置：<br><input type="text" id="date5" onfocus="WdatePicker({highLineWeekDay:true,position:{left:0,top:0}})"><br>
firstDayOfWeek:設置每個星期的第一個是星期幾；【0:星期日。1:星期一】：<br><input type="text" id="date6" onfocus="WdatePicker({firstDayOfWeek:1})">
</div>
<br>
<div>
設置起始日期,無論日期框是何值，alwaysUseStartDate：始終將‘2000-01-10’設爲起始日期。：<br><input type="text" id="date7" onfocus="WdatePicker({startDate:'2000-01-10',alwaysUseStartDate:true})"><br>
使用當年當月的1日,時分秒使用00:00:00作爲起始時間,dateFmt:設置時間的格式：<br><input type="text" id="date8" onfocus="WdatePicker({starDate:'%y-%M-01 00:00:00)',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})">
</div>
<br>
<div>
autoPickDate：true:解決了點兩次才能選擇日期的原因,false：需要點兩次<br><input type="text" id="date9" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH時mm分ss秒',autoPickDate:true})" style="width:400px"><br>
添加了Wdate這個class,就多了一個按鈕圖標;星期，月 日，年：<br><input type="text" id="date01" onfocus="WdatePicker({dateFmt:'DD, MMMM d, yyyy'})" class="Wdate" >
</div>
<br>
<div>
只選擇時分秒,skin：改變skin的顏色<input type="text" id="date02" onfocus="WdatePicker({dateFmt:'HH:mm:ss',skin:'whyGreen'})"><br>
vel 指定一個控件或控件的ID,必須具有value屬性(如input),用於存儲真實值<br><input type="text" id="date03" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日',vel:'canRead'})">
可識別的日期<input type="text" id="canRead">
</div>
<br>
<div id="date21" >平面顯示</div>
<br>
<div>
通過配置el屬性將值返回給其他的元素：
<span id="sDate">2010-10-23</span>
<img src="plugins/My97DatePicker/skin/datePicker.gif" width="16" height="22" style="cursor: pointer;">
</div>
<div>
<img src="img/dateFmt0.png" alt="日期格式">
</div>
<div>
<img src="img/dateFmt1.png" alt="日期格式示例">
</div>
<div>
自動糾錯:默認0:輸完了提示，1:輸完了自動把不符合格式的內容清空<input type="text" id="date05" onfocus="WdatePicker({errDealMode:0})">
<br>
如果沒有定義onpicked事件,自動觸發文本框的onchange事件<br>
如果沒有定義oncleared事件,清空時,自動觸發onchange事件<br>
<input type="text" id="date06" >
</div>
<div>三：日期範圍限制</div>
<div>
日期範圍限制：minDate和maxDate
<input type="text" id="date07" onfocus="WdatePicker({minDate:'2016-01-06',maxDate:'%y-%M-%d'})" class="Wdate">
<br>
限制日期範圍
<input type="text" id="date08" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',skin:'whyGreen',minDate:'2016-01-06 %H:%m:%s',maxDate:'%y-%M-%d %H:%m:%s'})">
</div>
<div>
時分秒的限制：<input type="text" id="date09" onfocus="WdatePicker({dateFmt:'HH:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})">
<br>
<input type="text" id="date10" >
</div>
<div>
<img src="img/activeDate.png" alt="日期格式示例">
</div>
<div>
<p>只能選擇今天以前的日期（包括今天）</p>
<input type="text" onfocus="WdatePicker({maxDate:'%y-%M-%d'})" id="dateRange0">
<p>只能選擇今天以後的日期（不包括今天）</p>
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})" id="dateRange10">
</div>
<div>
<p>只能選擇本月一號到本月的最後一天</p>
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})" id="dateRange1">
<p>只能選擇今天8:00:00至明天21:00:00的日期</p>
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="dateRange11">
</div>
<div>
<p> 只能選擇 20小時前 至 30小時後 的日期</p>
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})" id="dateRange2">
<p>只能選擇今天8:00:00至明天21:00:00的日期</p>
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="dateRange12">
</div>
<div>#F{}:----自定義限制：注意:兩個日期的日期格式必須相同，$dp.$ 相當於 document.getElementById 函數.</div>
<p>
日期差量用法:<br>
屬性y,M,d,H,m,s分別代表年月日時分秒<br>
如爲空時,表示直接取值,不做差量(示例4-3-1中的參數就是空的)<br>
{M:5,d:7} 表示 五個月零7天<br>
{y:1,d:-3} 表示 1年少3天<br>
{d:1,H:1} 表示一天多1小時
</p>
<div>
<p> 前面的日期不能大於後面的日期且兩個日期都不能大於 2020-10-01</p>
<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'dateRange13\')||\'2020-10-01\'}'})" id="dateRange3">
<input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'dateRange3\')}',maxDate:'2020-10-01'})" id="dateRange13">
</div>
<div>
<p>前面的日期+3天 不能大於 後面的日期</p>
<input type="text" class="Wdate" id="d4321" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/>
<input type="text" class="Wdate" id="d4322" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})"/>
</div>
<div>
<p>前面的日期+3月零2天 不能大於 後面的日期
且 前面日期都不能大於 2020-4-3減去3月零2天 後面日期 不能大於 2020-4-3</p>
<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'dateRange14\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})" id="dateRange4">
<input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'dateRange4\',{M:3,d:2});}',maxDate:'2020-4-3'})" id="dateRange14">
<br>
<input type="text" class="Wdate" id="d4331" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>
<input type="text" class="Wdate" id="d4332" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/>
</div>
<div>
<p> 發揮你的JS才能,定義任何你想要的日期限制</p>
</div>
<div>
<p>可以使用此功能禁用週日至週六所對應的日期,相關屬性:disabledDays (0至6 分別代表 週日至週六)</p>
無效天，禁用週六，週日所對應的日期：<input type="text" onfocus="WdatePicker({disabledDays:[0,6]})" id="dateRange6"><br>
每個月份的 5日 15日 25日：<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>
<input id="d4510" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$'],opposite:true})"/>
禁用 所有早於2000-01-01的日期<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>
</div>
<div>四：禁用和高亮日期：</div>
<div>
<p>只能選擇今天以前的日期（包括今天）</p>
specialDays (0至6 分別代表 週日至週六) 用法同無效天
specialDates 用法同無效日期,但是對時分秒無效<br>
高亮<input id="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/>
<input type="text" onfocus="WdatePicker({specialDates:['5$']})" id="dateRange17">
</div>
</body>
<script>
WdatePicker({
eCont:'date21',
onpicked:function(dp){//自定義事件
alert("你選擇的日期是："+dp.cal.getDateStr());
}
});
window.onload=function(){
document.getElementById("clickMe").onclick=function(){
//時間大小的比較
var val1=document.getElementById("date1").value;
var val2=document.getElementById("date2").value;
alert(val1+"----"+val2);
if(Date.parse(val1)<Date.parse(val2)){
alert("日期一的時間小於日期二的時間---");
}else{
alert("日期一的時間大於日期二的時間---");
}
};
};
</script>
</html>