Maison >interface Web >Tutoriel Layui >Introduction à la boîte de sélection de l'heure Layui
Boîte de saisie du format de l'heure dans Layui :
code html :
<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>
code js :
layui.use(['layer', 'form', 'table', 'laydate'], function () { var layer = layui.layer, $ = layui.jquery, form = layui.form, laydate = layui.laydate, table = layui.table; var beginDate = laydate.render({//渲染开始时间选择 elem: '#beginDate', //通过id绑定html中插入的start type: 'datetime', 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: '#endDate',//通过id绑定html中插入的end type: 'datetime', 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 } } }); });
elem : élément de liaison '#endDate' ;
type : type de sélection 'datetime' :
max : "2099-12 - 31 23:59:59" Définissez la valeur maximale par défaut
min : "1970-1-1 00:00:00" Définissez la valeur minimale par défaut
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 }; }
C'est pour sélectionner le début time , l'heure de fin doit être supérieure ou égale à l'heure de début
Cet article est reproduit à partir de : https://blog.csdn.net/Third_Week/article/details/96831135
Pour plus de connaissances sur Layui, veuillez faire attentionTutoriel d'utilisation de Layui colonne.
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!