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

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

 

posted @ 2015-05-26 17:10  Shimily  阅读(242)  评论(0)    收藏  举报