日期插件 【好用】扩展性好

http://www.my97.net/dp/demo/

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">

<meta name="apple-mobile-web-app-capable" content="yes" />

    <title>日期插件</title>

    <script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>

    <!-- 地址:http://www.my97.net/dp/demo/resource/2.1.asp -->

    <style>



     *{ margin:0; padding:0;}

     div.main{ max-width:640px; width:100%; margin:0 auto;}

     div.demo{ margin:20px 0;}

    </style>

</head>

<body>



<div class="main">

    <p>演示地址:http://www.my97.net/dp/demo/resource/2.1.asp</p>



    <div class="demo">

        <font color=red>选择日期:(周末高亮)</font>

        <input class="Wdate" type="text" onClick="WdatePicker()"> 

    </div>



    <div class="demo">

        <font color=red>选择日期:</font>

        <input class="Wdate" type="text" onClick="WdatePicker()" onfocus="WdatePicker({readOnly:true,highLineWeekDay:false})"> 

    </div>

   <div class="demo">

        <font color=red>自定义星期的第一天</font>

        <input class="Wdate" type="text" onClick="WdatePicker()" onfocus="WdatePicker({readOnly:true,firstDayOfWeek:2})"> 

    </div>



    <div class="demo">

        <input id="d12" type="text"/>

        <img onclick="WdatePicker({el:'d12'})" src="My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">

    </div>



    <div class="demo">

       <input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/>

    </div>



    <div class="demo">

       <input type="text" class="Wdate" id="d122" onFocus="WdatePicker({isShowWeek:true,onpicked:function() {$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>

       您选择了第<input type="text" size="3" id="d122_1">周

       (W格式)周, 另外您可以使用WW格式:<input id="d122_2" type="text" size="3"></div>



    <div class="demo">

      <b>禁用清空按钮</b> <input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>

    </div>



    <div class="demo">

       <b>通过position属性,自定义弹出位置</b> <input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:100,top:50}})"/>

    </div>



    <div class="demo">

        <font color=red>两个日期</font>

        <input class="Wdate" type="text" onClick="WdatePicker({doubleCalendar:true})" > 

    </div>



    <div class="demo">

        <font color=red>修改日期格式,时间格式,皮肤</font>

        <input class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy.MM.dd',realTimeFmt:'HH:mm:ss',realFullFmt:'%Date %Time',skin:'whyGreen'})" > 

    </div>

    <div class="demo">

        <font color=red>最大日期 、最小日期</font>

        <input class="Wdate" type="text" onClick="WdatePicker({doubleCalendar:true,minDate:'2014-01-01 00:00:00',maxDate:'2016-01-01 00:00:00'})" > 

    </div>





    <div class="demo">

        <font color=red>设置起始时间</font>

       <input type="text" id="d221" onFocus="WdatePicker({startDate:'1980-05-01'})"/>

    </div>



    <div class="demo">

       <font color=red>设置某天无效</font>

       <input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[3]})"/>

    </div>





    <div class="demo">

        <font color=red>实现日期选择联动 从某天 到某天</font>

         <input id="d5221" class="Wdate" type="text" onFocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})"/><input id="d5222" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})"/>



    </div>



    <div class="demo">

        <input type="text" id="d523_y" size="5"/><input type="text" id="d523_M" size="3"/><input type="text" id="d523_d" size="3"/><input type="text" id="d523_HH" size="3"/><input type="text" id="d523_mm" size="3"/><input type="text" id="d523_ss" size="3"/><input id="d523" type="text">

        <img onclick="WdatePicker({el:'d523',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer"/>

        <script>

        function pickedFunc(){

        $dp.$('d523_y').value=$dp.cal.getP('y');

        $dp.$('d523_M').value=$dp.cal.getP('M');

        $dp.$('d523_d').value=$dp.cal.getP('d');

        $dp.$('d523_HH').value=$dp.cal.getP('H');

        $dp.$('d523_mm').value=$dp.cal.getP('m');

        $dp.$('d523_ss').value=$dp.cal.getP('s');

        }

        </script>

    </div>



    <div class="demo">

    

    </div>



    <div class="demo">

    

    </div>



    <div class="demo">

    

    </div>



    <div class="demo">

    

    </div>





    <div class="demo">

    

    </div>





    <div class="demo">

    

    </div>





    <div class="demo">

    

    </div>





    <div class="demo">

    

    </div>







</div>















    

</body>

</html>
View Code

 

你可能感兴趣的:(插件)