Heim >Web-Frontend >Layui-Tutorial >Einführung in das Layui-Zeitauswahlfeld

Einführung in das Layui-Zeitauswahlfeld

尚
nach vorne
2020-02-06 16:55:549410Durchsuche

Einführung in das Layui-Zeitauswahlfeld

Eingabefeld des Zeitformats in Layui:

HTML-Code:

<div class="layui-inline" style="width: fit-content;">
     <label class="layui-form-label" style="width: fit-content;">选择日期:</label>
     <div class="layui-input-inline" style="width: 150px">
         <input type="text" name="beginDate" id="beginDate" lay-verify="datetime" class="layui-input">
     </div>
     --
     <div class="layui-form-mid">-</div>
         <div class="layui-input-inline" style="width: 150px">
         <input type="text" name="endDate" id="endDate" lay-verify="datetime" class="layui-input">
     </div>
</div>

js-Code:

layui.use([&#39;layer&#39;, &#39;form&#39;, &#39;table&#39;, &#39;laydate&#39;], function () {
    var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                laydate = layui.laydate,
                table = layui.table;
 
    var beginDate = laydate.render({//渲染开始时间选择
        elem: &#39;#beginDate&#39;, //通过id绑定html中插入的start
        type: &#39;datetime&#39;,
        max: "2099-12-31 23:59:59",//设置一个默认最大值
        done: function (value, dates) {
                endDate.config.min = {
                    year: dates.year,
                    month: dates.month - 1, //关键
                    date: dates.date,
                    hours: dates.hours,
                    minutes: dates.minutes,
                    seconds: dates.seconds
                };
        }
    });
    var endDate = laydate.render({//渲染结束时间选择
        elem: &#39;#endDate&#39;,//通过id绑定html中插入的end
        type: &#39;datetime&#39;,
        min: "1970-1-1 00:00:00",//设置min默认最小值
        done: function (value, dates) {
                beginDate.config.max = {
                    year: dates.year,
                    month: dates.month - 1,//关键
                    date: dates.date,
                    hours: dates.hours,
                    minutes: dates.minutes,
                    seconds: dates.seconds
                }
        }
    });
});

Einführung in das Layui-Zeitauswahlfeld

elem: '#endDate' Bindungselement;

Typ: 'datetime' Auswahltyp:

Einführung in das Layui-Zeitauswahlfeld

max: "2099-12 - 31 23:59:59" Legen Sie den Standard-Maximalwert fest

min: "1970-1-1 00:00:00" Legen Sie den Standard-Minimalwert fest

done: function (value, dates) {
                endDate.config.min = {
                    year: dates.year,
                    month: dates.month - 1, //关键
                    date: dates.date,
                    hours: dates.hours,
                    minutes: dates.minutes,
                    seconds: dates.seconds
                };
            }

Dies dient zur Auswahl des Starts Die Endzeit muss größer oder gleich der Startzeit sein.

Dieser Artikel wurde reproduziert von: https://blog.csdn.net/Third_Week/article/details/96831135

Für mehr Layui-Wissen beachten Sie bitte die Spalte Tutorial zur Layui-Nutzung .

Das obige ist der detaillierte Inhalt vonEinführung in das Layui-Zeitauswahlfeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen