my97datepicker日期插件的demo
<!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>