Le problème selon lequel le contrôle du temps layui ne peut pas être utilisé normalement une fois effacé

Résolvez le problème selon lequel le contrôle du temps layui ne peut pas être utilisé normalement après l'avoir effacé et sélectionnez la plage horaire.

Il existe deux solutions :

Méthode 1 (layui 1.x) :

code html :

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

code js :

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

Méthode 2 (layui 2.x) :

code html

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

code js

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

Limitation dynamique de l'heure de fin en fonction de l'heure de début Point de connaissance

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

Avec le code ci-dessus, il est possible de modifier dynamiquement la valeur maximale de l'heure de début et la valeur minimale de l'heure de fin. Parlons des écueils faciles à rencontrer :

Pit 1 : laydate.render ne peut pas être rendu de manière répétée Lorsqu'un élément correspondant à laydate.render a été rendu une fois, on ne peut pas modifier le max en le rendant à nouveau. .valeur et valeur minimale.

Piège 2 : startDate.config.max et endDate.config.min sont un objet, pas une chaîne. J'ai vu quelqu'un dire cela de manière irresponsable sur Internet, endDate.config.min ="2017-01-01. "; Il a dit que cela pouvait être réglé, mais en fait, je l'ai cru et je suis tombé dans le piège pendant longtemps. Ce que nous obtenons ici est un objet différent de min et max lorsque nous effectuons le rendu. L'attribution directe d'une valeur de chaîne n'aura certainement aucun effet.

Piège 3 : Bien que le format des dates soit le même que celui de endDate.config.min, mais si vous définissez directement endDate.config.min=dates, vous constaterez que le résultat n'est pas celui que vous vous le souhaitez, car bien que les données dans les dates soient la date que vous avez sélectionnée, la valeur du mois définie dans endDate.config.min est supérieure d'un mois à la valeur du mois que vous avez entrée. Par conséquent, si la date de début que vous avez sélectionnée est le 13 novembre, la valeur est la même. est directement attribué à endDate.config Après .min, vous constaterez que la date minimale de la date de fin devient le 13 décembre, nous devons donc réduire la valeur du mois dans les dates de un, puis l'attribuer à endDate.config.min.

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!