laydate.js日期時(shí)間選擇插件

更新時(shí)間：2017年01月04日 11:23:46 作者：東成熙就

這篇文章主要為大家詳細(xì)介紹了laydate.js日期時(shí)間選擇插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

日期時(shí)間選擇插件laydate.js：

效果圖：

1. 引入JS。官網(wǎng)：http://laydate.layui.com

2. 根據(jù)需要做相應(yīng)的配置。詳情參看官網(wǎng)。

<script> 
 laydate({ 
  elem: '#seldate', //目標(biāo)元素。由于laydate.js封裝了一個(gè)輕量級(jí)的選擇器引擎，因此elem還允許你傳入class、tag但必須按照這種方式 '#id .class' 
  event: 'focus', //響應(yīng)事件。如果沒有傳入event，則按照默認(rèn)的click 
  format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定義，該例子表示只顯示年月 
  festival: true, //顯示節(jié)日 
  istime: true, //顯示時(shí)間選項(xiàng) 
  choose: function(datas){ //選擇日期完畢的回調(diào) 
   alert('得到：'+datas); 
  } 
 }); 
</script>

實(shí)例源碼：

<!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日期時(shí)間選擇插件</title> 
 <link href="" rel="stylesheet" /> 
 <script type="text/javascript" src="js/laydate.js"></script> 
</head> 
<body> 
 <form method="post" action=""> 
 Way1, 
  請(qǐng)選擇日期:<input type="text" name="date" onclick="laydate()" /> 
  <hr /> 
 Way2, 
  <input type="text" name="date" id='seldate' class="laydate-icon" /><hr /> 
  <script> 
   laydate({ 
    elem: '#seldate', //目標(biāo)元素。由于laydate.js封裝了一個(gè)輕量級(jí)的選擇器引擎，因此elem還允許你傳入class、tag但必須按照這種方式 '#id .class' 
    event: 'focus', //響應(yīng)事件。如果沒有傳入event，則按照默認(rèn)的click 
    format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定義，該例子表示只顯示年月 
    festival: true, //顯示節(jié)日 
    istime: true, //顯示時(shí)間選項(xiàng) 
    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/

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: