> 웹 프론트엔드 > 레이이 튜토리얼 > 레이유이 시간제어를 클리어 후 정상적으로 사용할 수 없는 문제

레이유이 시간제어를 클리어 후 정상적으로 사용할 수 없는 문제

풀어 주다: 2019-12-17 16:31:16
앞으로
3788명이 탐색했습니다.

레이유이 시간제어를 클리어 후 정상적으로 사용할 수 없는 문제

레이의 시간 제어를 클리어 후 정상적으로 사용할 수 없는 문제와 시간 범위 선택 문제를 해결해 보세요.

두 가지 해결 방법이 있습니다:

방법 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>
로그인 후 복사
로그인 후 복사
#🎜🎜 # Node.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;
}
});
로그인 후 복사
#🎜 🎜 #시작시간을 기준으로 종료시간을 동적으로 제한 지식포인트

type: &#39;datetime&#39;, 是带时分秒的 date 是不带时分秒的

layui.use(&#39;laydate&#39;, function(){
   /* lay(&#39;.layui-input&#39;).each(function(){
  laydate.render({
    elem: this
    ,trigger: &#39;click&#39;
    ,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: &#39;#start_time&#39;,
        type: &#39;datetime&#39;,
        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;
        },
        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: &#39;#end_time&#39;,
        type: &#39;date&#39;,
        done: function(value, date){
        console.log(" ======  "+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;
        }
    });
});
로그인 후 복사

위 코드를 사용하면 시작시간의 최대값과 종료시간의 최소값을 동적으로 변경하는 것이 가능합니다. 직면하기 쉬운 함정에 대해 이야기해 봅시다:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿