利用js實現多種網頁日期控件代碼



38 150 51



特效描述:利用js實現 網頁日期控件,利用js實現多種網頁日期控件代碼

代碼結構

1. 引入JS

<script src="laydate/laydate.js"></script>

2. HTML代碼

<div class="box">
<pre>
<strong>【注意事項】</strong>
一、請千萬勿移動laydate中的目錄結構,它們具有完整的依賴體系。使用時,只需引入laydate/laydate.js即可。
二、如果您的網站的js采用合并或模塊加載,您需要打開laydate.js,修改path。
</pre>
<div class="demo1">
<h3>演示二(普通模式)</h3>
<input class="laydate-icon" id="demo" value="2014-6-25更新"> 
</div>
<div class="demo2">
<h3>演示一(日期精確到秒)</h3>
<input placeholder="請輸入日期" class="laydate-icon" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
</div>
<div class="demo3">
	<h3>演示三(日期范圍限制)</h3>
    <ul class="inline">
    開始日:<li class="inline laydate-icon" id="start" style="width:200px; margin-right:10px;"></li>
    結束日:<li class="inline laydate-icon" id="end" style="width:200px;"></li>
    </ul>
</div>
<div class="demo4">
	<h3>演示四(自定義日期格式)</h3>
   <div id="test1" class="inline laydate-icon" style="width:150px;"></div>
</div>
<div class="demo5">
	<h3>演示五(日期范圍限定在昨天到明天)</h3>
   <div class="inline laydate-icon" style="width:150px;" id="hello3"></div>
</div>
<div class="demo6">
	<h3>演示六(按鈕觸發日期)</h3>
   <input readonly class="layinput" id="hello1">
   <div class="laydate-icon " onClick="laydate({elem: '#hello1'});" style="width:10px;display:inline-block;border:none;"></div>
</div>
</div>
<script>
!function(){
laydate.skin('molv');//切換皮膚,請查看skins下面皮膚庫
laydate({elem: '#demo'});//綁定元素
}();
//日期范圍限制
var start = {
    elem: '#start',
    format: 'YYYY-MM-DD',
    min: laydate.now(), //設定最小日期為當前日期
    max: '2099-06-16', //最大日期
    istime: true,
    istoday: false,
    choose: function(datas){
         end.min = datas; //開始日選好后,重置結束日的最小日期
         end.start = datas //將結束日的初始值設定為開始日
    }
};
var end = {
    elem: '#end',
    format: 'YYYY-MM-DD',
    min: laydate.now(),
    max: '2099-06-16',
    istime: true,
    istoday: false,
    choose: function(datas){
        start.max = datas; //結束日選好后,充值開始日的最大日期
    }
};
laydate(start);
laydate(end);
//自定義日期格式
laydate({
    elem: '#test1',
    format: 'YYYY年MM月DD日',
    festival: true, //顯示節日
    choose: function(datas){ //選擇日期完畢的回調
        alert('得到:'+datas);
    }
});
//日期范圍限定在昨天到明天
laydate({
    elem: '#hello3',
    min: laydate.now(-1), //-1代表昨天,-2代表前天,以此類推
    max: laydate.now(+1) //+1代表明天,+2代表后天,以此類推
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 時間日期插件 時間日期 Tooltip工具提示框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子