Laui Zeitsteuerung Zeit auswählen

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代码：
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);
};

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

dynamisch basiert auf die Startzeit Begrenzen Sie die Endzeit Wissenspunkttyp: 'datetime', es ist ein Datum mit Stunden, Minuten und Sekunden, es ist ein Datum ohne Stunden, Minuten und Sekunden

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

Durch den obigen Code wird es Es ist 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, kein String, endDate.config.min="2017-01-01"; eigentlich erhalten Sie hier ein Objekt Anders als bei Min und Max beim Rendern hat die direkte Zuweisung von Zeichenfolgenwerten 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 um 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 Laui-Tutorial-Kolumne der chinesischen PHP-Website

Das obige ist der detaillierte Inhalt vonLaui Zeitsteuerung Zeit auswählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!