레이의 시간 제어를 클리어 후 정상적으로 사용할 수 없는 문제와 시간 범위 선택 문제를 해결해 보세요.
두 가지 해결 방법이 있습니다:
방법 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>
var start = { istime: true, format: 'YYYY-MM-DD hh:mm:ss', max: '2099-06-16 23:59:59', istoday: true, choose: function (datas) { end.min = datas; //开始日选好后,重置结束日的最小日期 } }; var end = { istime: true, format: 'YYYY-MM-DD hh:mm:ss', max: '2099-06-16 23:59:59', istoday: true, choose: function (datas) { start.max = datas; //结束日选好后,重置开始日的最大日期 } }; document.getElementById('start_time').onclick = function () { start.elem = this; laydate(start); }; document.getElementById('end_time').onclick = function () { end.elem = this; laydate(end); };
<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>
layui.use([ 'laydate'], function(){ var $ = layui.$; var laydate = layui.laydate; var nowTime = new Date().valueOf(); var max = null; var start = laydate.render({ elem: '#start_time', type: 'datetime', max: nowTime, btns: ['clear', 'confirm'], done: function(value, date){ endMax = end.config.max; end.config.min = date; end.config.min.month = date.month -1; } }); var end = laydate.render({ elem: '#end_time', type: 'datetime', max: nowTime, done: function(value, 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; } });
type: 'datetime', 是带时分秒的 date 是不带时分秒的 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; } }); });
위 코드를 사용하면 시작시간의 최대값과 종료시간의 최소값을 동적으로 변경하는 것이 가능합니다. 직면하기 쉬운 함정에 대해 이야기해 봅시다:
Pit one:laydate.render가 요소에 해당하고 한 번 렌더링된 경우에는 이를 수정할 수 없습니다. 다시 렌더링합니다.
함정 2: startDate.config.max 및 endDate.config.min은 문자열이 아니라 객체입니다. 인터넷에서 누군가 endDate.config .min="2017이라는 문장을 무책임하게 말하는 것을 봤습니다. -01-01"; 정해질 수 있다고 했지만 사실 나는 그 말을 믿고 오랫동안 함정에 빠졌다. 여기서 실제로 얻는 것은 렌더링할 때 min 및 max와 다른 객체입니다. 문자열 값을 직접 할당하면 아무런 효과가 없습니다.
Pit 3: 날짜 형식은 endDate.config.min 형식과 동일하지만 endDate.config.min=dates를 직접 설정해 보면 날짜 형식이 아니라는 것을 알 수 있습니다. 날짜 형식은 사용자가 선택한 날짜이지만 endDate.config.min에 설정된 월 값은 입력한 월 값보다 1개월 더 크기 때문에 원하는 결과를 얻을 수 있습니다. .config.min 이후에는 종료일의 최소 날짜가 12월 13일이 되는 것을 알 수 있으므로 날짜의 월 값을 1씩 감소시킨 후 할당해야 합니다. endDate.config.min.
layui에 대한 더 많은 지식은
layui 사용법 튜토리얼위 내용은 레이유이 시간제어를 클리어 후 정상적으로 사용할 수 없는 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!