日期和時(shí)間組件文檔 - layui.laydate

如你所見(jiàn)，layDate 在 layui 2.0 的版本中迎來(lái)一次重生。無(wú)論曾經(jīng)它給你帶來(lái)過(guò)多么糟糕的體驗，從今往后，所有的舊坑都將彌合。全面重寫(xiě)的 layDate 包含了大量的更新，其中主要以：年選擇器、年月選擇器、日期選擇器、時(shí)間選擇器、日期時(shí)間選擇器 五種類(lèi)型的選擇方式為基本核心，并且均支持范圍選擇（即雙控件）。內置強勁的自定義日期格式解析和合法校正機制，含中文版和國際版，主題簡(jiǎn)約卻又不失靈活多樣。由于內部采用的是零依賴(lài)的原生 JavaScript 編寫(xiě)，因此又可作為獨立組件使用。毫無(wú)疑問(wèn)，這是 layui 的虔心之作。

模塊加載名稱(chēng)：laydate，獨立版本：http://www.layui.com/laydate/

快速使用

和 layer 一樣，你可以在 layui 中使用 layDate，也可直接使用 layDate 獨立版，請按照你的實(shí)際需求來(lái)選擇。

場(chǎng)景	用前準備	調用方式
1. 在 layui 模塊中使用	下載 layui 后，引入layui.css和layui.js即可	通過(guò)layui.use('laydate', callback)加載模塊后，再調用方法
2. 作為獨立組件使用	去 layDate 獨立版本官網(wǎng)下載組件包，引入 laydate.js 即可	直接調用方法使用

這是一個(gè)最簡(jiǎn)單的示例：

對應的代碼如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div class="layui-inline"> <!-- 注意：這一層元素并不是必須的 -->
  <input type="text" class="layui-input" id="test1">
</div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //執行一個(gè)laydate實(shí)例
  laydate.render({
    elem: '#test1' //指定元素
  });
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 layDate 獨立版</title>
</head>
<body>
 
<input type="text" id="test1">
 
<script src="laydate.js"></script>
<script>
//執行一個(gè)laydate實(shí)例
laydate.render({
  elem: '#test1' //指定元素
});
</script>
</body>
</html>

除了在組件加載方式有一些小小的不同，其它都完全類(lèi)似

基礎參數選項

通過(guò)核心方法：laydate.render(options) 來(lái)設置基礎參數，也可以通過(guò)方法：laydate.set(options) 來(lái)設定全局基礎參數.

elem - 綁定元素

類(lèi)型：String/DOM，默認值：無(wú)

必填項，用于綁定執行日期渲染的元素，值一般為選擇器，或DOM對象

laydate.render({ 
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});

type - 控件選擇類(lèi)型

類(lèi)型：String，默認值：date

用于單獨提供不同的選擇器類(lèi)型，可選值如下表：

type可選值	名稱(chēng)	用途
year	年選擇器	只提供年列表選擇
month	年月選擇器	只提供年、月選擇
date	日期選擇器	可選擇：年、月、日。type默認值，一般可不填
time	時(shí)間選擇器	只提供時(shí)、分、秒選擇
datetime	日期時(shí)間選擇器	可選擇：年、月、日、時(shí)、分、秒

//年選擇器
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});
 
//年月選擇器
laydate.render({ 
  elem: '#test'
  ,type: 'month'
});
 
//日期選擇器
laydate.render({ 
  elem: '#test'
  //,type: 'date' //默認，可不填
});
 
//時(shí)間選擇器
laydate.render({ 
  elem: '#test'
  ,type: 'time'
});
 
//日期時(shí)間選擇器
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
});

range - 開(kāi)啟左右面板范圍選擇

類(lèi)型：Boolean/String/Array，默認值：false

如果設置 true，將默認采用 “ - ” 分割。你也可以直接設置 分割字符。五種選擇器類(lèi)型均支持左右面板的范圍選擇。

//日期范圍選擇
laydate.render({ 
  elem: '#test'
  ,range: true //或 range: '~' 來(lái)自定義分割字符
});
 
//日期時(shí)間范圍選擇
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,range: true
});
 
//時(shí)間范圍選擇
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,range: true
});
 
//年范圍選擇
laydate.render({ 
  elem: '#test'
  ,type: 'year'
  ,range: true
});
 
//年月范圍選擇
laydate.render({ 
  elem: '#test'
  ,type: 'month'
  ,range: true
});

如果您要將開(kāi)始時(shí)間和結束時(shí)間分開(kāi)，那么還可以將 range 參數設置為數組，如：

<div class="layui-form-item">
  <div class="layui-inline">
    <label class="layui-form-label">日期范圍</label>
    <div class="layui-inline" id="test-range">
      <div class="layui-input-inline">
        <input type="text" id="startDate" class="layui-input" placeholder="開(kāi)始日期">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline">
        <input type="text" id="endDate" class="layui-input" placeholder="結束日期">
      </div>
    </div>
  </div>
</div>
<script> 
laydate.render({ 
  elem: '#test-range' //開(kāi)始時(shí)間和結束時(shí)間所在 input 框的父選擇器
  //設置開(kāi)始日期、日期日期的 input 選擇器
  ,range: ['#startDate', '#endDate'] //數組格式為 layui 2.6.6 開(kāi)始新增
});
</script>

format - 自定義格式

類(lèi)型：String，默認值：yyyy-MM-dd

通過(guò)日期時(shí)間各自的格式符和長(cháng)度，來(lái)設定一個(gè)你所需要的日期格式。layDate 支持的格式如下：

格式符	說(shuō)明
yyyy	年份，至少四位數。如果不足四位，則前面補零
y	年份，不限制位數，即不管年份多少位，前面均不補零
MM	月份，至少兩位數。如果不足兩位，則前面補零。
M	月份，允許一位數。
dd	日期，至少兩位數。如果不足兩位，則前面補零。
d	日期，允許一位數。
HH	小時(shí)，至少兩位數。如果不足兩位，則前面補零。
H	小時(shí)，允許一位數。
mm	分鐘，至少兩位數。如果不足兩位，則前面補零。
m	分鐘，允許一位數。
ss	秒數，至少兩位數。如果不足兩位，則前面補零。
s	秒數，允許一位數。

通過(guò)上述不同的格式符組合成一段日期時(shí)間字符串，可任意排版，如下所示：

格式	示例值
yyyy-MM-dd HH:mm:ss	2017-08-18 20:08:08
yyyy年MM月dd日 HH時(shí)mm分ss秒	2017年08月18日 20時(shí)08分08秒
yyyyMMdd	20170818
dd/MM/yyyy	18/08/2017
yyyy年M月	2017年8月
M月d日	8月18日
北京時(shí)間：HH點(diǎn)mm分	北京時(shí)間：20點(diǎn)08分
yyyy年的M月某天晚上，大概H點(diǎn)	2017年的8月某天晚上，大概20點(diǎn)

//自定義日期格式
laydate.render({ 
  elem: '#test'
  ,format: 'yyyy年MM月dd日' //可任意組合
});

value - 初始值

類(lèi)型：String，默認值：new Date()

支持傳入符合format參數設定的日期格式字符，或者 new Date()

//傳入符合format格式的字符給初始值
laydate.render({ 
  elem: '#test'
  ,value: '2018-08-18' //必須遵循format參數設定的格式
});
 
//傳入Date對象給初始值
laydate.render({ 
  elem: '#test'
  ,value: new Date(1534766888000) //參數即為：2018-08-20 20:08:08 的時(shí)間戳
});

isInitValue - 初始值填充

類(lèi)型：Boolean，默認值：true

用于控制是否自動(dòng)向元素填充初始值（需配合 value 參數使用）

laydate.render({
  elem: '#test'
  ,value: '2017-09-10'
  ,isInitValue: false //是否允許填充初始值，默認為 true
});

注意：該參數為 layui 2.3.0 新增。

isPreview - 是否開(kāi)啟選擇值預覽

類(lèi)型：Boolean，默認值：true

用于控制是否顯示當前結果的預覽（type 為 datetime 時(shí)不開(kāi)啟）

laydate.render({
  elem: '#test'
  ,isPreview: false //禁用面板左下角選擇值的預覽，默認 true
});

注意：該參數為 layui 2.6.6 新增。

min/max - 最小/大范圍內的日期時(shí)間值

類(lèi)型：string，默認值：min: '1900-1-1'、max: '2099-12-31'

設定有限范圍內的日期或時(shí)間值，不在范圍內的將不可選中。這兩個(gè)參數的賦值非常靈活，主要有以下幾種情況：

1.	如果值為字符類(lèi)型，則：年月日必須用 -（中劃線(xiàn)）分割、時(shí)分秒必須用 :（半角冒號）號分割。這里并非遵循 format 設定的格式
2.	如果值為整數類(lèi)型，且數字＜86400000，則數字代表天數，如：min: -7，即代表最小日期在7天前，正數代表若干天后
3.	如果值為整數類(lèi)型，且數字 ≥ 86400000，則數字代表時(shí)間戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日

//日期有效范圍只限定在：2017年
laydate.render({ 
  elem: '#test'
  ,min: '2017-1-1'
  ,max: '2017-12-31'
});
 
//日期有效范圍限定在：過(guò)去一周到未來(lái)一周
laydate.render({ 
  elem: '#test'
  ,min: -7 //7天前
  ,max: 7 //7天后
});
 
//日期時(shí)間有效范圍的設定: 
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,min: '2017-8-11 12:30:00'
  ,max: '2017-8-18 12:30:00'
});
 
//時(shí)間有效范圍設定在: 上午九點(diǎn)半到下午五點(diǎn)半
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,min: '09:30:00'
  ,max: '17:30:00'
});

毫不保留地說(shuō)，min和max參數是兩個(gè)非常強大的存在，合理運用，可幫助用戶(hù)在日期與時(shí)間的選擇上帶來(lái)更為友好的約束與體驗。

trigger - 自定義彈出控件的事件

類(lèi)型：String，默認值：focus，如果綁定的元素非輸入框，則默認事件為：click

//自定義事件
laydate.render({ 
  elem: '#test'
  ,trigger: 'click' //采用click彈出
});

show - 默認顯示

類(lèi)型：Boolean，默認值：false

如果設置: true，則控件默認顯示在綁定元素的區域。通常用于外部事件調用控件，如：

//默認顯示
laydate.render({
  elem: '#test'
  ,show: true //直接顯示
});
      
//外部事件調用
lay('#test1').on('click', function(e){ //假設 test1 是一個(gè)按鈕
  laydate.render({
    elem: '#test'
    ,show: true //直接顯示
    ,closeStop: '#test1' //這里代表的意思是：點(diǎn)擊 test1 所在元素阻止關(guān)閉事件冒泡。如果不設定，則無(wú)法彈出控件
  });
});

position - 定位方式

類(lèi)型：String，默認值：absolute

用于設定控件的定位方式，有以下三種可選值：

position 可選值	說(shuō)明
abolute	絕對定位，始終吸附在綁定元素周?chē)?。默認值
fixed	固定定位，初始吸附在綁定元素周?chē)?，不隨瀏覽器滾動(dòng)條所左右。一般用于在固定定位的彈層中使用。
static	靜態(tài)定位，控件將直接嵌套在指定容器中。注意：請勿與 show 參數的概念搞混淆。show為 true 時(shí)，控件仍然是采用絕對或固定定位。而這里是直接嵌套顯示

下面是一個(gè)直接嵌套顯示的例子：

【HTML】
<span id="testView"></span>
<div id="test2"></div>
 
【JS】:      
//嵌套在指定容器中
laydate.render({
  elem: '#test2'
  ,position: 'static'
  ,change: function(value, date){ //監聽(tīng)日期被切換
    lay('#testView').html(value);
  }
});

zIndex - 層疊順序

類(lèi)型：Number，默認值：66666666

一般用于解決與其它元素的互相被遮掩的問(wèn)題。如果 position 參數設為 static 時(shí)，該參數無(wú)效。

//設定控件的層疊順序
laydate.render({
  elem: '#test'
  ,zIndex: 99999999
});

showBottom - 是否顯示底部欄

類(lèi)型：Boolean，默認值：true

如果設置 false，將不會(huì )顯示控件的底部欄區域

//不顯示底部欄
laydate.render({
  elem: '#test'
  ,showBottom: false
});

btns - 工具按鈕

類(lèi)型：Array，默認值：['clear', 'now', 'confirm']

右下角顯示的按鈕，會(huì )按照數組順序排列，內置可識別的值有：clear、now、confirm

//只顯示清空和確認
laydate.render({
  elem: '#test'
  ,btns: ['clear', 'confirm']
});

lang - 語(yǔ)言

類(lèi)型：String，默認值：cn

我們內置了兩種語(yǔ)言版本：cn（中文版）、en（國際版，即英文版）。這里并沒(méi)有開(kāi)放自定義文字，是為了避免繁瑣的配置。

//國際版
laydate.render({
  elem: '#test'
  ,lang: 'en'
});

theme - 主題

類(lèi)型：String，默認值：default

我們內置了多種主題，theme的可選值有：default（默認簡(jiǎn)約）、molv（墨綠背景）、#顏色值（自定義顏色背景）、grid（格子主題）

//墨綠背景主題
laydate.render({
  elem: '#test'
  ,theme: 'molv'
});
 
//自定義背景色主題 - 非常實(shí)用
laydate.render({
  elem: '#test'
  ,theme: '#393D49'
});
 
//格子主題
laydate.render({
  elem: '#test'
  ,theme: 'grid'
});

另外，你還可以傳入其它字符，如：theme: 'xxx'，那么控件將會(huì )多出一個(gè) class="laydate-theme-xxx" 的CSS類(lèi)，以便于你單獨定制主題。

calendar - 是否顯示公歷節日

類(lèi)型：Boolean，默認值：false

我們內置了一些我國通用的公歷重要節日，通過(guò)設置 true 來(lái)開(kāi)啟。國際版不會(huì )顯示。

//允許顯示公歷節日
laydate.render({
  elem: '#test'
  ,calendar: true
});

mark - 標注重要日子

類(lèi)型：Object，默認值：無(wú)

calendar 參數所代表的公歷節日更多情況下是一個(gè)擺設。因此，我們還需要自定義標注重要日子，比如結婚紀念日？日程等？它分為以下兩種：

標注	格式	說(shuō)明
每年的日期	{'0-9-18': '國恥'}	0 即代表每一年
每月的日期	{'0-0-15': '中旬'}	0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
特定的日期	{'2017-8-21': '發(fā)布')	-

可同時(shí)設定多個(gè)，如：

//標注重要日子
var ins1 = laydate.render({
  elem: '#test'
  ,mark: {
    '0-10-14': '生日'
    ,'0-12-31': '跨年' //每年12月31日
    ,'0-0-10': '工資' //每個(gè)月10號
    ,'2017-8-15': '' //具體日期
    ,'2017-8-20': '預發(fā)' //如果為空字符，則默認顯示數字+徽章
    ,'2017-8-21': '發(fā)布'
  }
  ,done: function(value, date){
    if(date.year === 2017 && date.month === 8 && date.date === 15){ //點(diǎn)擊2017年8月15日，彈出提示語(yǔ)
      ins1.hint('中國人民抗日戰爭勝利72周年');
    }
  }
});

非常實(shí)用的存在，是時(shí)候利用它制作你的日程表了。

控件初始打開(kāi)的回調

控件在打開(kāi)時(shí)觸發(fā)，回調返回一個(gè)參數：初始的日期時(shí)間對象

laydate.render({
  elem: '#test'
  ,ready: function(date){
    console.log(date); //得到初始的日期時(shí)間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  }
});

日期時(shí)間被切換后的回調

年月日時(shí)間被切換時(shí)都會(huì )觸發(fā)?；卣{返回三個(gè)參數，分別代表：生成的值、日期時(shí)間對象、結束的日期時(shí)間對象

laydate.render({
  elem: '#test'
  ,change: function(value, date, endDate){
    console.log(value); //得到日期生成的值，如：2017-08-18
    console.log(date); //得到日期時(shí)間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得結束的日期時(shí)間對象，開(kāi)啟范圍選擇（range: true）才會(huì )返回。對象成員同上。
  }
});

控件選擇完畢后的回調

點(diǎn)擊日期、清空、現在、確定均會(huì )觸發(fā)?；卣{返回三個(gè)參數，分別代表：生成的值、日期時(shí)間對象、結束的日期時(shí)間對象

laydate.render({
  elem: '#test'
  ,done: function(value, date, endDate){
    console.log(value); //得到日期生成的值，如：2017-08-18
    console.log(date); //得到日期時(shí)間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得結束的日期時(shí)間對象，開(kāi)啟范圍選擇（range: true）才會(huì )返回。對象成員同上。
  }
});

彈出控件提示

事實(shí)上，執行核心方法 laydate.render(options) 會(huì )返回一個(gè)當前實(shí)例對象。其中包含一些成員屬性和方法，比如：hint方法

var ins1 = laydate.render({
  elem: '#test'
  ,change: function(value, date, endDate){
    ins1.hint(value); //在控件上彈出value值
  }
});

配置基礎路徑

如果你不是采用 layui 或者普通 script 標簽方式加載的 laydate.js，而是采用 requirejs 等其它方式引用 laydate，那么你需要設置基礎路徑，以便 laydate.css 完成加載。

laydate.path = '/static/xxx/'; //laydate.js 所在目錄
 
//配置好路徑后，再調用
laydate.render(options);

除上述之外，如果您采用的是獨立的 laydate，那么你還可以在動(dòng)態(tài)加載 laydate之前預先定義一個(gè)我們約定好的全局對象：

<script>  
var LAYUI_GLOBAL = {
  laydate_dir: '/res/laydate/' //laydate 所在目錄（laydate 5.3.0 開(kāi)始新增）
};
</script>

提示 1：上述只針對獨立版 laydate，其 LAYUI_GLOBAL 設定的 laydate_dir 優(yōu)先級高于 laydate.path；
提示 2：如果是 layui 加載的 laydate，可以無(wú)視上述所有的目錄設定。前置工作都會(huì )在 layui 內部完成。

其它方法

方法名	備注
laydate.getEndDate(month, year)	獲取指定年月的最后一天，month默認為當前月，year默認為當前年。如： var endDate1 = laydate.getEndDate(10); //得到31 var endDate2 = laydate.getEndDate(2, 2080); //得到29

結語(yǔ)

layDate最早發(fā)布于2014年6月，但當時(shí)只迭代了一個(gè)版本，就再也沒(méi)有更新。而時(shí)至今日，作為 layui 2.0 的核心組成之一，layDate 再度強勢復活，不禁讓人感慨萬(wàn)千！layDate曾被我定義為：“最失敗的一個(gè)組件”，被我無(wú)情擱置了整整三年?，F在，是時(shí)候卸下這個(gè)標簽了。

layui - 在每一個(gè)細節中，用心與你溝通

欧美AV无码一区二区,麻豆+无码+国产在线+观看,欧美狂躁少妇XXXX高潮无码,美女扒开屁股让男人桶免费观看,极品粉嫩国产18尤物在线播放

 日期和時(shí)間組件文檔 - layui.laydate

日期和時(shí)間組件文檔 - layui.laydate