Das Problem besteht darin, dass die Laui-Zeitsteuerung nach dem Löschen nicht mehr normal verwendet werden kann

Lösen Sie das Problem, dass die Laui-Zeitsteuerung nach dem Löschen nicht normal verwendet werden kann, und wählen Sie den Zeitbereich aus.

Es gibt zwei Lösungen:

Methode 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-Code:

var start = {
istime: true,
format: 'YYYY-MM-DD hh:mm:ss',
max: '2099-06-16 23:59:59',
istoday: true,
choose: function (datas) {
end.min = datas; //开始日选好后，重置结束日的最小日期
}
};
var end = {
istime: true,
format: 'YYYY-MM-DD hh:mm:ss',
max: '2099-06-16 23:59:59',
istoday: true,
choose: function (datas) {
start.max = datas; //结束日选好后，重置开始日的最大日期
}
};
document.getElementById('start_time').onclick = function () {
start.elem = this;
laydate(start);
};
document.getElementById('end_time').onclick = function () {
end.elem = this;
laydate(end);
};

Methode 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-Code

layui.use([ 'laydate'], function(){
var $ = layui.$;
var laydate = layui.laydate;
var nowTime = new Date().valueOf();
var max = null;
var start = laydate.render({
elem: '#start_time',
type: 'datetime',
max: nowTime,
btns: ['clear', 'confirm'],
done: function(value, date){
endMax = end.config.max;
end.config.min = date;
end.config.min.month = date.month -1;
}
});
var end = laydate.render({
elem: '#end_time',
type: 'datetime',
max: nowTime,
done: function(value, 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;
}
});

Dynamische Begrenzung der Endzeit basierend auf dem Startzeit-Wissenspunkt

type: 'datetime', 是带时分秒的 date 是不带时分秒的

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;
        }
    });
});

Mit dem obigen Code ist es möglich, den Maximalwert der Startzeit und den Minimalwert der Endzeit dynamisch zu ändern. Lassen Sie uns über die Fallstricke sprechen, denen man leicht begegnen kann:

Pit 1: „laydate.render“ kann nicht wiederholt gerendert werden. Wenn ein Element, das „laydate.render“ entspricht, einmal gerendert wurde, können wir das Maximum nicht durch erneutes Rendern ändern .Wert und Mindestwert.

Fallstrick 2: startDate.config.max und endDate.config.min sind ein Objekt, keine Zeichenfolge. Ich habe jemanden gesehen, der dies unverantwortlich im Internet gesagt hat: endDate.config.min „2017-01-01“ ; Er sagte, es könnte eingestellt werden, aber ich glaubte ihm tatsächlich und tappte lange Zeit in die Falle. Was wir hier tatsächlich erhalten, ist ein Objekt, das sich beim Rendern von min und max unterscheidet. Die direkte Zuweisung eines Zeichenfolgenwerts hat definitiv keine Auswirkung.

Fallstrick 3: Das Datumsformat ist zwar dasselbe wie das Format von endDate.config.min, aber wenn Sie endDate.config.min=dates direkt festlegen, werden Sie feststellen, dass das Ergebnis nicht Ihren Vorstellungen entspricht wollen, denn obwohl die Daten in Datumsangaben das von Ihnen ausgewählte Datum sind, ist der in endDate.config.min festgelegte Monatswert einen Monat größer als der von Ihnen eingegebene Monatswert. Wenn das von Ihnen ausgewählte Startdatum daher der 13. November ist, ist der Wert wird direkt endDate.config zugewiesen. Nach .min werden Sie feststellen, dass das Mindestdatum des Enddatums der 13. Dezember ist. Daher müssen wir den Monatswert in Datumsangaben um eins reduzieren und ihn dann endDate.config.min zuweisen.

Weitere Laui-Kenntnisse finden Sie in der Spalte Tutorial zur Verwendung von Lauii.

Das obige ist der detaillierte Inhalt vonDas Problem besteht darin, dass die Laui-Zeitsteuerung nach dem Löschen nicht mehr normal verwendet werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!