contrôle du temps layui sélectionner l'heure

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

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

basé dynamiquement sur l'heure de début Limiter l'heure de fin Type de point de connaissance : 'datetime', c'est une date avec heures, minutes et secondes, c'est une date sans heures, minutes et secondes

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

Grâce au code ci-dessus, il il est possible de modifier dynamiquement la valeur maximale de l'heure de début et la valeur minimale de l'heure de fin modifiée. Parlons des pièges faciles à rencontrer :

Pit 1 : laydate.render ne peut pas être rendu de manière répétée Lorsqu'un elem 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, endDate.config.min="2017-01-01" ; en fait, ce que vous obtenez ici est un objet ; , différent de min et max lors du rendu, l'attribution directe de valeurs de chaîne n'aura aucun effet.

Piège 3 : Bien que le format des dates soit le même que celui de endDate.config.min, si vous définissez directement endDate.config.min=dates, vous constaterez que le résultat n'est pas celui que vous 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 directement attribuée à 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 en dates de un, puis l'attribuer à endDate.config.min. .

Pour plus de connaissances layui, veuillez faire attention à la colonne du didacticiel layui du site Web PHP chinois

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!