layui前段框架日期控件使用方法詳解
本文實(shí)例為大家分享了layui-日期控件的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <blockquote class="layui-elem-quote">目前Layui中的日期組件還是layDate 1.1的改良版,它后續(xù)將會(huì)進(jìn)行一次重寫。</blockquote> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>順便列舉幾個(gè)常用例子</legend> </fieldset> <div class="layui-form-pane" style="margin-top: 15px;"> <div class="layui-form-item"> <label class="layui-form-label">范圍選擇</label> <div class="layui-input-inline"> <input class="layui-input" placeholder="開始日" id="LAY_demorange_s"> </div> <div class="layui-input-inline"> <input class="layui-input" placeholder="截止日" id="LAY_demorange_e"> </div> </div> </div> <script src="layui/layui.js"></script> <script> layui.use('laydate', function(){ var laydate = layui.laydate; var start = { min: laydate.now() ,max: '2099-06-16 23:59:59' ,istoday: false ,choose: function(datas){ end.min = datas; //開始日選好后,重置結(jié)束日的最小日期 end.start = datas //將結(jié)束日的初始值設(shè)定為開始日 } }; var end = { min: laydate.now() ,max: '2099-06-16 23:59:59' ,istoday: false ,choose: function(datas){ start.max = datas; //結(jié)束日選好后,重置開始日的最大日期 } }; document.getElementById('LAY_demorange_s').onclick = function(){ start.elem = this; laydate(start); } document.getElementById('LAY_demorange_e').onclick = function(){ end.elem = this laydate(end); } }); </script> </body> </html>
效果圖:
官網(wǎng)日期控件
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Jquery幻燈片特效代碼分享 打開頁(yè)面隨機(jī)選擇切換方式(3)
jQuery是一個(gè)非常優(yōu)秀的 JavaScript 框架,使用簡(jiǎn)單靈活,一個(gè)漂亮的幻燈片更能吸引訪客的注意力。本文實(shí)例講述了jQuery實(shí)現(xiàn)時(shí)尚漂亮的幻燈片特效,基本能滿足你在網(wǎng)頁(yè)上使用幻燈片(焦點(diǎn)圖)效果。分享給大家供大家參考。具體如下:2015-08-08jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
這個(gè)demo的效果是實(shí)現(xiàn)用戶輸入時(shí)提供實(shí)時(shí)提醒,并不一定要等到元素失去焦點(diǎn)時(shí)才提醒2011-11-11jQuery EasyUI API 中文文檔 - ValidateBox驗(yàn)證框
jQuery EasyUI API 中文文檔 - ValidateBox驗(yàn)證框,使用jQuery EasyUI的朋友可以參考下。2011-10-10jQuery無(wú)刷新上傳之uploadify簡(jiǎn)單代碼
項(xiàng)目需要實(shí)現(xiàn)一個(gè)無(wú)刷新批量文件上傳功能,仔細(xì)研究了下,發(fā)現(xiàn)JQuery 提供的Uploadify插件十分不錯(cuò),有興趣的可以了解一下。2017-01-01jQuery多媒體插件jQuery Media Plugin使用詳解
這篇文章主要介紹了jQuery多媒體插件jQuery Media Plugin使用詳解,需要的朋友可以參考下2014-12-12使用element-ui的el-menu導(dǎo)航選中后刷新頁(yè)面保持當(dāng)前選中狀態(tài)
這篇文章主要介紹了使用element-ui的el-menu導(dǎo)航選中后刷新頁(yè)面保持當(dāng)前選中狀態(tài),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07