码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-05-26 18:39:13      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/shimily/p/4531078.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!