Vue怎么自定義驗證日期時間選擇器

這篇文章主要介紹了Vue怎么自定義驗證日期時間選擇器的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue怎么自定義驗證日期時間選擇器文章都會有所收獲，下面我們一起來看看吧。

Vue自定義驗證之日期時間選擇器

自定義驗證 今日需求期望效果干貨value-format 效果推薦

今日需求

查詢條件中 當開始時間 和 結(jié)束時間 一致時 提示結(jié)束時間大于開始時間

期望效果

干貨

    <el-form :inline="true" :rules="rules">
          <el-form-item label="創(chuàng)建時間" prop="createTime" class="create-time-item">
            <el-date-picker
              v-model="createTime"
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="開始日期"
              end-placeholder="結(jié)束日期">
            </el-date-picker>
          </el-form-item>
    </el-form>    
	  
	  export default {
	    data () {
	    // 自定義驗證規(guī)則 
	      var createTimeCheck = (rule, value, callback) => {
	        if (value === '') {
	          callback()    // 回調(diào)函數(shù)
	        } else {
	          let createTimeStart = this.createTime ? this.createTime[0] : ''    // 從數(shù)組中取出開始時間   取出結(jié)果：'2020-10-28 16:01:15'
	          let createTimeEnd = this.createTime ? this.createTime[1] : ''      // 取出結(jié)束時間
	          let sTime = (((createTimeStart.split(' '))[1]).split(':')).join('')    // 從 '2020-10-28 16:01:15' 取出時間 結(jié)果：‘160115'
	          let sDate = (((createTimeStart.split(' '))[0]).split('-')).join('')    // 取出開始日期 結(jié)果：‘20201028'
	          let endTime = (((createTimeEnd.split(' '))[1]).split(':')).join('')    // 取出結(jié)束時間
	          let endDate = (((createTimeEnd.split(' '))[0]).split('-')).join('')    // 取出結(jié)束日期
	          if (parseInt(endDate) > parseInt(sDate)) {    // 如果結(jié)束日期大于開始日期  不用判斷時間
	            callback()
	          } else {
	            if (parseInt(endTime) <= parseInt(sTime)) {    // 如果結(jié)束日期不大于開始日期  判斷結(jié)束時間是否大于開始時間
	              callback(new Error('結(jié)束日期必須大于開始日期'))
	            } else {
	              callback()
	            }
	          }
	        }
	      }
	      
	      return {
		    createTime: '',     // 表單 時間 雙向綁定值
		    rules: {            // 調(diào)用createTimeCheck 驗證
               createTime: [
                  { validator: createTimeCheck, trigger: 'blur' }
               ]
             }
		  }
	   }

value-format

效果

注意看 當結(jié)束日期比開始日期小時 開始日期自動 與 結(jié)束日期同步, 所以結(jié)束日期永遠大于等于開始日期

vue項目時間選擇器

vue項目時間選擇器 設(shè)置結(jié)束時間不能早于開始時間,開始時間不能晚于結(jié)束時間html里面：js里面

設(shè)置結(jié)束時間不能早于開始時間,開始時間不能晚于結(jié)束時間

html里面

<el-form-item label="發(fā)布時間:">
        <div class="form_item form_content">
          <div>
            <el-date-picker  v-model="timerStart" :picker-options="pickerOptionsStart" type="date" placeholder="開始日期"></el-date-picker>
          </div>
          <div >-</div>
          <div>
            <el-date-picker  v-model="timerEnd" :picker-options="pickerOptionsEnd" type="date" placeholder="結(jié)束日期"></el-date-picker>
          </div>
        </div>
</el-form-item>

js里面

<script>
	export default {
	  data() {
	    return {
	      timerStart: "", //開始日期選擇
	      timerEnd: "", //結(jié)束日期選擇
	      // 設(shè)置結(jié)束時間不能早于開始時間
	      pickerOptionsStart: {
	        disabledDate: time => {
	          const endDateVal = new Date(this.timerEnd).getTime();
	          if (endDateVal) {
	            return time.getTime() > endDateVal + 1;
	          }
	        }
	      },
	      pickerOptionsEnd: {
	        disabledDate: time => {
	          const beginDateVal = new Date(this.timerStart).getTime();
	          if (beginDateVal) {
	            return time.getTime() < beginDateVal + 1;
	          }
	        }
	       }
	     };
	  }
	}
 }, 
</script>

關(guān)于“Vue怎么自定義驗證日期時間選擇器”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue怎么自定義驗證日期時間選擇器”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。