TP5.1 + Layui 시간 범위 설정 방법

최근 프로젝트를 만들 때 문제가 발생했습니다. 즉, 시작 시간과 종료 시간이 관련되어 있다는 것입니다. 종료 시간의 선택 범위는 시작 시간 이후 최대 90일입니다. 여기에서 플러그인으로 얻은 날짜에는 날짜 범위를 각각 설정할 수 있는 min과 max라는 두 개의 매개변수가 있습니다.

코드는 다음과 같습니다.

layui.use('laydate', function(){
  var laydate = layui.laydate;
  //限定可选日期
  var ins22 = laydate.render({
    elem: '#test-limit1'
    ,min: '2016-10-14'
    ,max: '2080-10-14'
  });
});

그러나 최대 값을 얻는 경우; 그리고 min, 나는 어려움을 겪었고, 공식 Layui 문서를 연구하고 반복적인 시도 끝에 마침내 이 문제를 해결하고 여러분과 공유합니다:

a 변수 현재 시간, 최소 시간 및 최대 시간 정의

var now = new Date();
       var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);
       var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);

b. 현재 선택된 시간 최대 및 최소 할당을 기준으로 다시 설정하세요

max 및 min 값을 얻으려면 다음을 수행해야 합니다. 먼저 시간 변환 단위를 이해하세요. 일반적인 개념은 기본 변환 단위가 시간이고, 1시간은 3600초라는 것입니다. laui의 타임스탬프는 밀리초 단위로 계산되므로 3600을 기준으로 1000을 곱해야 합니다. 하루는 24시간이고 총 90일은 90*24*3600*1000입니다.max和min的值，首先要了解时间换算单位，大概思路为基本换算单位以小时为准，1小时为3600秒，因为laui中的时间戳是以毫秒为计算单位，所以需要再3600的基础上再乘以1000，一天为24小时，总共90天所以是90*24*3600*1000.

在选择了开始时间后done: function (value, date) 中value的值为当前选择的时间，将该值转化为时间戳为：var date1 = new Date(value).getTime();

90天后的时间戳为：var date2 = date1 + 90 * 24 * 3600 * 1000;

시작 시간을 선택한 후 done의 값 값: 함수(값, 날짜) )는 현재 선택된 시간입니다. 이 값을 타임스탬프로 변환하세요: var date1 = new Date(value).getTime();

90일 후의 타임스탬프: var date2 = date1 + 90 * 24 * 3600 * 1000;

그런 다음 연도, 월, 일로 변환 시간을 가져옵니다.

var date5 = {
                   'date': date3.getDate(),
                   'month': date3.getMonth() + 1,
                   'year': date3.getFullYear()
               };

얻은 값을 최소 및 최대 값에 할당합니다. 종료 시간:

end.config.max = date5;
               end.config.max.month = date5.month - 1;
               end.config.min = date;
               end.config.min.month = date.month - 1;

따라서 전체 코드는

var start = laydate.render({
           elem: '#bx_start',
           type: 'date',
           max: max,
           min: min,
           showBottom: false,
           btns: ['clear', 'confirm'],
           done: function (value, date) {
               var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳
               var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的时间
               var date3 = new Date(date2);
               var date5 = {
                   'date': date3.getDate(),
                   'month': date3.getMonth() + 1,
                   'year': date3.getFullYear()
               };
               end.config.max = date5;
               end.config.max.month = date5.month - 1;
               end.config.min = date;
               end.config.min.month = date.month - 1;
           }
       });

c입니다. 얻은 최소값과 최대값을 종료 시간

var end = laydate.render({
           elem: '#bx_end',
           type: 'date',
           max: max,
           min: min,
           showBottom: false,
           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;
           }
       });

다음은 전체 코드입니다

<script>
   layui.use([&#39;form&#39;,&#39;layedit&#39;, &#39;laydate&#39;,&#39;layer&#39;,&#39;element&#39;], function() {
       $ = layui.jquery;
       layer = layui.layer;
       var form = layui.form;
       layedit = layui.layedit;
       laydate = layui.laydate;
//定义变量当前时间、最小时间、最大时间
       var now = new Date();
       var min = now.getFullYear() + &quot;-&quot; + (now.getMonth() + 1) + &quot;-&quot; + (now.getDate() + 1);
       var max = now.getFullYear() + &quot;-&quot; + (now.getMonth() + 2) + &quot;-&quot; + (now.getDate() + 2);
       var start = laydate.render({
           elem: &#39;#bx_start&#39;,
           type: &#39;date&#39;,
           max: max,
           min: min,
           showBottom: false,
           btns: [&#39;clear&#39;, &#39;confirm&#39;],
           done: function (value, date) {
               var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳
               var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的
               var date3 = new Date(date2);

               var date5 = {
                   &amp;#39;date&amp;#39;: date3.getDate(),
                   &amp;#39;month&amp;#39;: date3.getMonth() + 1,
                   &amp;#39;year&amp;#39;: date3.getFullYear()
               };
               end.config.max = date5;
               end.config.max.month = date5.month - 1;
               end.config.min = date;
               end.config.min.month = date.month - 1;
           }
       });
       var end = laydate.render({
           elem: &amp;#39;#bx_end&amp;#39;,
           type: &amp;#39;date&amp;#39;,
           max: max,
           min: min,
           showBottom: false,
           done: function (value, date) {
               if ($.trim(value) == &amp;#39;&amp;#39;) {
                   var curDate = new Date();
                   date = {
                       &amp;#39;date&amp;#39;: curDate.getDate(),
                       &amp;#39;month&amp;#39;: curDate.getMonth() + 1,
                       &amp;#39;year&amp;#39;: curDate.getFullYear()
                   };
               }
               start.config.max = date;
               start.config.max.month = date.month - 1;
           }
       });
   });
</script>

권장 관련 기사: " TP5.1 사진에 워터마크 기능 추가" "TP5.1+layui로 열 수 호출 실현" "최신 10 thinkphp 비디오 튜토리얼🎜》🎜🎜

위 내용은 TP5.1 + Layui 시간 범위 설정 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!