layui time control select time

Solve the problem that the layui time control cannot be used normally after it is cleared, and select the time range

There are two solutions:

Method 1 ( layui 1.x):

html code:

<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="start_time" class="layui-input" id="start_time"
placeholder="开始时间(修改时间)">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="end_time" class="layui-input" id="end_time"
placeholder="结束时间(修改时间)">
</div>
</div>
js代码：
var start = {
istime: true,
format: &#39;YYYY-MM-DD hh:mm:ss&#39;,
max: &#39;2099-06-16 23:59:59&#39;,
istoday: true,
choose: function (datas) {
end.min = datas; //开始日选好后，重置结束日的最小日期
}
};

var end = {
istime: true,
format: &#39;YYYY-MM-DD hh:mm:ss&#39;,
max: &#39;2099-06-16 23:59:59&#39;,
istoday: true,
choose: function (datas) {
start.max = datas; //结束日选好后，重置开始日的最大日期
}
};

document.getElementById(&#39;start_time&#39;).onclick = function () {
start.elem = this;
laydate(start);
};
document.getElementById(&#39;end_time&#39;).onclick = function () {
end.elem = this;
laydate(end);
};

Method 2 (layui 2.x):

html code

<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="start_time" class="layui-input" id="start_time"
placeholder="开始时间(修改时间)">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="end_time" class="layui-input" id="end_time"
placeholder="结束时间(修改时间)">
</div>
</div>
js代码
layui.use([ &#39;laydate&#39;], function(){
var $ = layui.$;
var laydate = layui.laydate;
var nowTime = new Date().valueOf();
var max = null;

var start = laydate.render({
elem: &#39;#start_time&#39;,
type: &#39;datetime&#39;,
max: nowTime,
btns: [&#39;clear&#39;, &#39;confirm&#39;],
done: function(value, date){
endMax = end.config.max;
end.config.min = date;
end.config.min.month = date.month -1;
}
});
var end = laydate.render({
elem: &#39;#end_time&#39;,
type: &#39;datetime&#39;,
max: nowTime,
done: function(value, date){
if($.trim(value) == &#39;&#39;){
var curDate = new Date();
date = {&#39;date&#39;: curDate.getDate(), &#39;month&#39;: curDate.getMonth()+1, &#39;year&#39;: curDate.getFullYear()};
}
start.config.max = date;
start.config.max.month = date.month -1;
}
});

Dynamic based on the start time Limit the end time Knowledge point type: 'datetime', is a date with hours, minutes and seconds, is a date without hours, minutes and seconds

layui.use('laydate', function(){
   /* lay('.layui-input').each(function(){
  laydate.render({
    elem: this
    ,trigger: 'click'
    ,change: function(value, date, endDate){
    console.log(value); //得到日期生成的值，如：2017-08-18
    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
    }
  });
});  */
var $ = layui.$;
    var laydate = layui.laydate;
   var nowTime = new Date().valueOf();
    var max = null;
       var start = laydate.render({
        elem: '#start_time',
        type: 'datetime',
        btns: ['clear', 'confirm'],
        done: function(value, date){
            endMax = end.config.max;
            end.config.min = date;
            end.config.min.month = date.month -1;
        },
        change: function(value, date, endDate){
        var timestamp2 = Date.parse(new Date(value));
timestamp2 = timestamp2 / 1000;
            end.config.min = timestamp2;
            end.config.min.month = date.month -1;
    }
    });
    var end = laydate.render({
        elem: '#end_time',
        type: 'date',
        done: function(value, date){
        console.log(" ======  "+date);
            if($.trim(value) == ''){
                var curDate = new Date();
                date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
            }
            start.config.max = date;
            start.config.max.month = date.month -1;
        }
    });
});

Through the above code, it is possible to dynamically change the maximum value of the start time and the minimum value of the end time changed. Let’s talk about the pitfalls that are easy to encounter:

Pit 1: laydate.render cannot be rendered repeatedly. When an elem corresponding to laydate.render has been rendered once, we cannot modify the max by rendering it again. value and min value.

Pit 2: startDate.config.max and endDate.config.min are an object, not a string, endDate.config.min="2017-01-01"; actually what you get here is an object , different from min and max when we render, directly assigning string values ​​will have no effect.

Pit 3: Although the format of dates is the same as the format of endDate.config.min, but if you directly set endDate.config.min=dates, you will find that the result is not what you want, because although the data in dates is The date you selected, but the value of month set in endDate.config.min is one month greater than the value of month you entered. Therefore, if the start date you selected is November 13th, the value is directly assigned to endDate.config. After .min, you will find that the minimum date of the end date becomes December 13, so we need to reduce the month value in dates by one and then assign it to endDate.config.min.

For more layui knowledge, please pay attention to the PHP Chinese website layui tutorial column

The above is the detailed content of layui time control select time. For more information, please follow other related articles on the PHP Chinese website!