laydate.js日期時間選擇插件
日期時間選擇插件laydate.js:
效果圖:

1. 引入JS。 官網(wǎng):http://laydate.layui.com
<script type="text/javascript" src="js/laydate.js"></script>
2. 根據(jù)需要做相應(yīng)的配置。詳情參看官網(wǎng)。
<script>
laydate({
elem: '#seldate', //目標元素。由于laydate.js封裝了一個輕量級的選擇器引擎,因此elem還允許你傳入class、tag但必須按照這種方式 '#id .class'
event: 'focus', //響應(yīng)事件。如果沒有傳入event,則按照默認的click
format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定義,該例子表示只顯示年月
festival: true, //顯示節(jié)日
istime: true, //顯示時間選項
choose: function(datas){ //選擇日期完畢的回調(diào)
alert('得到:'+datas);
}
});
</script>
實例源碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
-->
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>layDate日期時間選擇插件</title>
<link href="" rel="stylesheet" />
<script type="text/javascript" src="js/laydate.js"></script>
</head>
<body>
<form method="post" action="">
Way1,
請選擇日期:<input type="text" name="date" onclick="laydate()" />
<hr />
Way2,
<input type="text" name="date" id='seldate' class="laydate-icon" /><hr />
<script>
laydate({
elem: '#seldate', //目標元素。由于laydate.js封裝了一個輕量級的選擇器引擎,因此elem還允許你傳入class、tag但必須按照這種方式 '#id .class'
event: 'focus', //響應(yīng)事件。如果沒有傳入event,則按照默認的click
format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定義,該例子表示只顯示年月
festival: true, //顯示節(jié)日
istime: true, //顯示時間選項
choose: function(datas){ //選擇日期完畢的回調(diào)
alert('得到:'+datas);
}
});
</script>
Way3,
<input id="seldate1">
<span class="laydate-icon" onclick="laydate({elem:'#seldate1'});"></span>
</form>
</body>
</html>
Find more here:http://laydate.layui.com/
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
MutationObserver監(jiān)視對DOM?樹所做更改的功能妙用
這篇文章主要為大家介紹了MutationObserver監(jiān)視對DOM?樹所做更改的功能妙用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03
JavaScript?異步函數(shù)?Promisification?處理詳情
這篇文章主要介紹了JavaScript異步函數(shù)Promisification處理詳情,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-08-08
下面給大家匯總的幾個javascript實現(xiàn)的分頁代碼,當然必須要結(jié)合后臺代碼實現(xiàn)。大家可以自行分析一下代碼,希望能夠給大家?guī)硪欢ǖ膸椭?/div> 2015-08-08
微信小程序完美解決scroll-view高度自適應(yīng)問題的方法
這篇文章主要介紹了微信小程序完美解決scroll-view高度自適應(yīng)問題的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-08-08最新評論

