<!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" οnfοcus="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" οnfοcus="WdatePicker({isShowWeek:true})"><br>

    日期框只可读,隐藏清空按钮：<input type="text" id="date4" οnfοcus="WdatePicker({readOnly:true,isShowClear:false})" >

</div>

<br>

<div>

    设置周末高亮，通过position【默认absolute】设置位置：<br><input type="text" id="date5" οnfοcus="WdatePicker({highLineWeekDay:true,position:{left:0,top:0}})"><br>

    firstDayOfWeek:设置每个星期的第一个是星期几；【0:星期日。1:星期一】：<br><input type="text" id="date6" οnfοcus="WdatePicker({firstDayOfWeek:1})">

</div>

<br>

<div>

    设置起始日期,无论日期框是何值，alwaysUseStartDate：始终将‘2000-01-10’设为起始日期。：<br><input type="text" id="date7" οnfοcus="WdatePicker({startDate:'2000-01-10',alwaysUseStartDate:true})"><br>

    使用当年当月的1日,时分秒使用00:00:00作为起始时间,dateFmt:设置时间的格式：<br><input type="text" id="date8" οnfοcus="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" οnfοcus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒',autoPickDate:true})" style="width:400px"><br>

    添加了Wdate这个class,就多了一个按钮图标;星期，月 日，年：<br><input type="text" id="date01" οnfοcus="WdatePicker({dateFmt:'DD, MMMM d, yyyy'})" class="Wdate" >

</div>

<br>

<div>

    只选择时分秒,skin：改变skin的颜色<input type="text" id="date02" οnfοcus="WdatePicker({dateFmt:'HH:mm:ss',skin:'whyGreen'})"><br>

    vel 指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值<br><input type="text" id="date03" οnfοcus="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" οnfοcus="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" οnfοcus="WdatePicker({minDate:'2016-01-06',maxDate:'%y-%M-%d'})" class="Wdate">

    <br>

    限制日期范围

    <input type="text" id="date08" οnfοcus="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" οnfοcus="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" οnfοcus="WdatePicker({maxDate:'%y-%M-%d'})" id="dateRange0">

    <p>只能选择今天以后的日期（不包括今天）</p>

    <input type="text" οnfοcus="WdatePicker({minDate:'%y-%M-{%d+1}'})" id="dateRange10">

</div>

<div>

    <p>只能选择本月一号到本月的最后一天</p>

    <input type="text" οnfοcus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})" id="dateRange1">

    <p>只能选择今天8:00:00至明天21:00:00的日期</p>

    <input type="text" οnfοcus="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" οnfοcus="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" οnfοcus="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" οnfοcus="WdatePicker({maxDate:'#F{$dp.$D(\'dateRange13\')||\'2020-10-01\'}'})" id="dateRange3">

    <input type="text" οnfοcus="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" οnfοcus="WdatePicker({maxDate:'#F{$dp.$D(\'dateRange14\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})" id="dateRange4">

    <input type="text" οnfοcus="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" οnfοcus="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" οnfοcus="WdatePicker({specialDates:['5$']})" id="dateRange17">


</div>

</body>

<script>

    WdatePicker({

        eCont:'date21',

        onpicked:function(dp){//自定义事件

            alert("你选择的日期是："+dp.cal.getDateStr());

        }

    });

    window.οnlοad=function(){

        document.getElementById("clickMe").οnclick=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>