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

Einführung in das Layui-Zeitauswahlfeld

Freigeben: 2020-02-06 16:55:54
nach vorne
9413 Leute haben es durchsucht

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>
Nach dem Login kopieren

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
                }
        }
    });
});
Nach dem Login kopieren

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
                };
            }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage