js日期時間控件------layDate

在做項目時，遇到了時間的選擇，上網搜了一下，發現一款簡單實用的控件，今天在這和大家分享一下

這個是layDate下載地址，有需要的請下載

https://pan.baidu.com/s/1i61DnCD

下載完成后，解壓，得到layDate文件夾，需要注意的是，在引用的時候需要將整個的文件夾放入項目中任意的目錄，不要更改結構，使用的時候只需要引入layDate.js這個文件就可以。

下面是部分的格式，提供參考

//年選擇器
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'year'
});
//年月選擇器
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'month'
});
//時間選擇器
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'time'
});
//時間選擇器
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'datetime'
});
//日期范圍
laydate.render({
  elem: '#自己的選擇器'
  ,range: true
});
//年范圍
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'year'
  ,range: true
});
//年月范圍
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'month'
  ,range: true
});
//時間范圍
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'time'
  ,range: true
});
//日期時間范圍
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'datetime'
  ,range: true
}); 
//自定義格式
laydate.render({
  elem: '#自己的選擇器'
  ,format: 'yyyy年MM月dd日'
});
laydate.render({
  elem: '#test12'
  ,format: 'dd/MM/yyyy'
});
laydate.render({
  elem: '#自己的選擇器'
  ,format: 'yyyyMM'
});
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'time'
  ,format: 'H點M分'
});
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'month'
  ,range: '→'
  ,format: 'yyyy-MM'
});
laydate.render({
  elem: '#自己的選擇器'
  ,type: 'datetime'
  ,range: '到'
  ,format: 'yyyy年M月d日H時m分s秒'
}); 

而在我自己的項目中是這樣用的

<script type="text/javascript">
    //時間選擇器
    laydate.render({
      elem: '#startTime',
      type: 'datetime'
    });
    laydate.render({
      elem: '#endTime',
      type: 'datetime'
    });
</script>

<td width="120" class="text_r"><label>創建時間：</label></td>

<td>
    <input type="text" readonly="readonly" placeholder="開始時間" class="kxht_input cxtj" name="startTime" id="startTime" value="${whiteList.startTime}" />至
    <input type="text" readonly="readonly" placeholder="結束時間" class="kxht_input cxtj" name="endTime" id="endTime" value="${whiteList.endTime}" />
</td>

下面是運行的效果

 

在使用的時候只需要修改相應的js代碼即可，簡單方便有效！有啥問題隨時聯系我，大家相互學習，共同進步！