首页 > 代码库 > 日期时间插件--日期时间组件文档 - layui.laydate

日期时间插件--日期时间组件文档 - layui.laydate

官方文档:http://www.layui.com/doc/modules/laydate.html

样式:技术分享

 

<body>

  <div>
    <input placeholder="开始时间" id="LAY_start_time" name="startTime"type="text"readonly/>
    <input placeholder="截止时间" id="LAY_end_time" name="endTime" type="text" readonly/>
  </div>

</body>


<script src="http://www.mamicode.com/laydate.js"></script>   /*这里我引的是我本地的js*/
<script> /*时间插件*/
layui.use(‘laydate‘, function () {
  var laydate = layui.laydate;
  var start =
  {
    /* elem: ‘#id‘, //需显示日期的元素选择器*/
    event: ‘click‘, //触发事件
    format: ‘YYYY-MM-DD hh:mm:ss‘, //日期格式
    istime: true, //是否开启时间选择(时分秒)
    isclear: true, //是否显示清空
    istoday: true, //是否显示今天
    issure: true,// 是否显示确认
    festival: true, //是否显示节日
    min: laydate.now(), //最小日期
    max: ‘2099-12-31 23:59:59‘, //最大日期
    start: laydate.now(), //开始日期
    fixed: false, //是否固定在可视区域
    zIndex: 99999999, //css z-index
    choose: function (dates) { //选择好日期的回调
    end.min = dates; //开始日选好后,重置结束日的最小日期
    end.start = dates //将结束日的初始值设定为开始日
  }
}
var end = {
    event: ‘click‘, //触发事件
    format: ‘YYYY-MM-DD hh:mm:ss‘, //日期格式
    istime: true, //是否开启时间选择
    isclear: true, //是否显示清空
    issure: true,// 是否显示确认
    festival: true, //是否显示节日
    max: ‘2099-12-31 23:59:59‘, //最大日期
    fixed: false, //是否固定在可视区域
    zIndex: 99999999, //css z-index
  choose: function (dates) { //选择好日期的回调 结束日选好后,重置开始日的最大日期
    start.max = dates;
  }
}

$("#LAY_start_time").click(function () {
  start.elem = this;
  laydate(start)
});

$("#LAY_end_time").click(function () {
    end.elem = this;
    laydate(end)
  });
})
</script>

 

日期时间插件--日期时间组件文档 - layui.laydate