溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

layui時間控件選擇時間范圍的實現(xiàn)方法

發(fā)布時間：2020-09-09 05:22:19 來源：腳本之家 閱讀：939 作者：鍵盤俠007 欄目：web開發(fā)

解決layui時間控件清空之后無法正常使用的問題，以及時間范圍的選擇

共有兩種解決方式：

方式一(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="結(jié)束時間(修改時間)">
   </div>
 </div>

js代碼：

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; //開始日選好后，重置結(jié)束日的最小日期
   }
 };
 
 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; //結(jié)束日選好后，重置開始日的最大日期
   }
 };
 
 document.getElementById('start_time').onclick = function () {
   start.elem = this;
   laydate(start);
 };
 document.getElementById('end_time').onclick = function () {
   end.elem = this;
   laydate(end);
 };

方式二(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="結(jié)束時間(修改時間)">
    </div>
  </div>

js代碼

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;
    }
});

根據(jù)開始時間 動態(tài)限制結(jié)束時間 知識點

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); //得結(jié)束的日期時間對象，開啟范圍選擇（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;
     }
   });
 });

通過以上代碼，就已經(jīng)可以實現(xiàn)動態(tài)改變開始時間最大值與結(jié)束時間最小值的改變了。

下面來說一下容易遇到的坑：

坑一 ：laydate.render無法重復(fù)渲染，當(dāng)laydate.render對應(yīng)一個elem已經(jīng)渲染過一次之后，我們是無法通過再次渲染來修改其中的max值與min值的。

坑二 ：startDate.config.max與endDate.config.min是一個對象，不是一個字符串，在網(wǎng)上看到一個人不負(fù)責(zé)任的給了這么一句話，endDate.config.min="2017-01-01"；說可以設(shè)置，我居然信了他的邪掉進(jìn)坑里半天。實際這里得到的是一個對象，不同于在我們渲染時的min與max了，直接將字符串賦值必然沒有效果。

坑三：dates的格式雖然與endDate.config.min格式相同但是直接讓endDate.config.min=dates你會發(fā)現(xiàn)并不是你想要的結(jié)果，是因為雖然dates中的數(shù)據(jù)是你選擇的日期，可是endDate.config.min中設(shè)置的month的值卻比你輸入的month的值大了一個月，因此假如你選的開始日期是11月13日，直接賦值給了endDate.config.min之后你會發(fā)現(xiàn)結(jié)束日期的最小日期變成了12月13日，因此我們需要將dates中的月份值減一后再賦值給endDate.config.min

以上這篇layui時間控件選擇時間范圍的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手