レイウイ時間制御選択時間

レイウイ時間コントロールがクリアされた後に正常に使用できなくなる問題を解決し、時間範囲を選択します。

解決策は 2 つあります:

方法 1 (layui 1.x):

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

方法 2 (layui 2.x):

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

開始時刻に基づいて動的 終了時刻を制限する ナレッジ ポイント タイプ: 'datetime'、時、分、秒を含む日付、時、分、秒を含まない日付

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

上記のコードにより、開始時刻の最大値と終了時刻の最小値を動的に変更することが可能です。遭遇しやすい落とし穴について話しましょう:

落とし穴 1:laydate.render を繰り返しレンダリングすることはできませんlaydate.render に対応する要素が一度レンダリングされると、再度レンダリングして最大値を変更することはできません.値と最小値。

ピット 2: startDate.config.max と endDate.config.min は文字列ではなくオブジェクトです、endDate.config.min="2017-01-01"; 実際にここで得られるものはオブジェクトですレンダリング時の min や max とは異なり、文字列値を直接割り当てても効果はありません。

ピット 3: 日付の形式は endDate.config.min の形式と同じですが、endDate.config.min=dates を直接設定すると、結果が意図したものと異なることがわかります。日付のデータは選択した日付ですが、endDate.config.min に設定されている月の値は、入力した月の値より 1 か月大きいため、選択した開始日が 11 月 13 日である場合、値は endDate.config に直接割り当てられます。.min の後では、終了日の最小日付が 12 月 13 日になることがわかります。そのため、dates の月の値を 1 つ減らして、それを endDate.config に割り当てる必要があります。分。

layui の詳細については、PHP 中国語 Web サイトのlayui チュートリアルのコラムをご覧ください。

以上がレイウイ時間制御選択時間の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。