H+后台主題UI框架---整理（三）

本文轉載自查看原文 2017-04-18 10:56 3721 H+后台框架

這里面介紹下H+后台主題UI框架里面插件的應用，不過都是最最簡單最初級的功能。主要有日歷插件，input單選多選（icheck）插件，input下拉搜索（chosen）插件。

一、日歷插件

　　有如下幾種應用的形式：

　　（一）

　　1、首先，需要引入laydate.js,而且，只需要引入js即可。

　　2、在script里面粘貼如下代碼：

【外部js調用】
<input id="hello" class="laydate-icon">  //是在html里面的內容，也就是目標元素。

<script>
laydate({
  elem: '#hello', //目標元素。由於laydate.js封裝了一個輕量級的選擇器引擎，因此elem還允許你傳入class、tag但必須按照這種方式 '#id .class'
  event: 'focus' //響應事件。如果沒有傳入event，則按照默認的click
});
</script>

　　3、【圖標觸發日期】

【圖標觸發日期】
<input id="hello1">
<span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>

　　（二）

　　1、首先，需要引入laydate.js,而且，只需要引入js即可。

　　2、在script里面粘貼如下代碼：

//用哪個粘哪個。
【自定義日期格式】
<div id="test1" class="laydate-icon"></div>  //我是HTML里面的。
<script>
laydate({
  elem: '#test1',
  format: 'YYYY/MM', // 分隔符可以任意定義，該例子表示只顯示年月
  festival: true, //顯示節日
  choose: function(datas){ //選擇日期完畢的回調
    alert('得到：'+datas);
  }
});
</script>

【日期范圍限定在昨天到明天】
<div id="hello3" class="laydate-icon"></div>
<script>
laydate({
  elem: '#hello3',
  min: laydate.now(-1), //-1代表昨天，-2代表前天，以此類推
  max: laydate.now(+1) //+1代表明天，+2代表后天，以此類推
});
</script>

　　(三)

　　下述代碼復制粘貼即可

開始日：<li class="laydate-icon" id="start" style="width:200px; margin-right:10px;"></li>  //我是HTML里面的。
結束日：<li class="laydate-icon" id="end" style="width:200px;"></li> //我是HTML里面的。
<script>
var start = {
  elem: '#start',
  format: 'YYYY/MM/DD hh:mm:ss',
  min: laydate.now(), //設定最小日期為當前日期
  max: '2099-06-16 23:59:59', //最大日期
  istime: true,
  istoday: false,
  choose: function(datas){
     end.min = datas; //開始日選好后，重置結束日的最小日期
     end.start = datas //將結束日的初始值設定為開始日
  }
};
var end = {
  elem: '#end',
  format: 'YYYY/MM/DD hh:mm:ss',
  min: laydate.now(),
  max: '2099-06-16 23:59:59',
  istime: true,
  istoday: false,
  choose: function(datas){
    start.max = datas; //結束日選好后，重置開始日的最大日期
  }
};
laydate(start);
laydate(end);
</script>