Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能
更新時(shí)間：2018年08月12日 11:07:31 作者：俠骨留香
本文通過實(shí)例代碼給大家介紹了Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能,需要的朋友可以參考下
具體代碼如下所述：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)</title>
<!-- import Vue.js -->
<script src="http://vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" rel="external nofollow" >
<!-- import iView -->
<script src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
<template>
<Row>
<Col span="12"> 開始時(shí)間:
<date-picker type="datetime" v-model="startTime" placeholder="請(qǐng)選擇開始時(shí)間" :options="startTimeOption" @on-change="onStartTimeChange"></date-picker>
</Col>
<Col span="12"> 結(jié)束時(shí)間:
<date-picker type="datetime" v-model="endTime" placeholder="請(qǐng)選擇結(jié)束時(shí)間" :options="endTimeOption" @on-change="onEndTimeChange"></date-picker>
</Col>
</Row>
</template>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
startTime: '',
endTime: '2018-08-11 23:59:59',
startTimeOption: {},
endTimeOption: {}
}
},
mounted() {
this.startTime = '2018-08-08 00:00:00'
this.endTime = '2018-08-11 23:59:59'
this.onStartTimeChange(this.startTime)
this.onEndTimeChange(this.endTime)
},
methods: {
/**
* 開始時(shí)間發(fā)生變化時(shí)觸發(fā),設(shè)置結(jié)束時(shí)間不可選擇的日期
* 結(jié)束時(shí)間應(yīng)大于等于開始時(shí)間,且小于等于當(dāng)前時(shí)間
* @param {string} startTime 格式化后的日期
* @param {string} type 當(dāng)前的日期類型
*/
onStartTimeChange(startTime, type) {
this.endTimeOption = {
disabledDate(endTime) {
return endTime < new Date(startTime) || endTime > Date.now()
}
}
},
/**
* 結(jié)束時(shí)間發(fā)生變化時(shí)觸發(fā),設(shè)置開始時(shí)間不可選擇的日期
* 開始時(shí)間小于等于結(jié)束時(shí)間,且小于等于當(dāng)前時(shí)間
* @param {string} date 格式化后的日期
* @param {string} type 當(dāng)前的日期類型
*/
onEndTimeChange(endTime, type) {
this.startTimeOption = {
disabledDate(startTime) {
return startTime > new Date(endTime) || startTime > Date.now()
}
}
}
}
})
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
您可能感興趣的文章:
- iview日期控件,雙向綁定日期格式的方法
- ElementUI 詳細(xì)分析DatePicker 日期選擇器實(shí)戰(zhàn)
- element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分效果(不顯示秒)
- 關(guān)于ELement?UI時(shí)間控件el-date-picker誤差8小時(shí)的問題
- el-date-picker 如何限制選擇六個(gè)月內(nèi)的日期
- element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦)
- iview?date-picker?options只可選當(dāng)前日期之前的(當(dāng)前之后的禁用)
相關(guān)文章
webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問題的修復(fù)方法(總結(jié)篇)
這篇文章主要介紹了解決webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問題的修復(fù)方法,需要的朋友可以參考下2018-01-01
以前我們經(jīng)常在react中使用jsx，現(xiàn)在我們?cè)趘ue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于Vue3使用JSX的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
使用VUE開發(fā)后臺(tái)項(xiàng)目,后臺(tái)項(xiàng)目需要進(jìn)行后臺(tái)根據(jù)瀏覽器窗口進(jìn)行變化,需要使用vue來監(jiān)聽瀏覽器的窗口變化,這篇文章主要給大家介紹了關(guān)于Vue.js如何監(jiān)聽window窗口尺寸變化的相關(guān)資料,需要的朋友可以參考下2023-11-11
Vue項(xiàng)目el-upload?上傳文件及回顯照片和下載文件功能實(shí)現(xiàn)
本次需求是上傳多種固定格式的文件,且回顯的時(shí)候,圖片可以正常顯示,文件可以進(jìn)行下載,主要采用element的el-upload組件實(shí)現(xiàn),對(duì)Vue項(xiàng)目el-upload?上傳文件及回顯照片和下載文件功能實(shí)現(xiàn)感興趣的朋友跟隨小編一起看看吧2023-12-12
這篇文章主要介紹了Vue slot用法(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
vue路由前進(jìn)后退動(dòng)畫效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由前進(jìn)后退動(dòng)畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例
這篇文章主要介紹了動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展甘特圖的方法詳解
Ganttastic是一個(gè)小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個(gè)可配置的、可拖動(dòng)的甘特圖。本文就將用它來實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展的甘特圖，感興趣的可以嘗試一下2022-11-11
Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法
本文主要介紹了Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零)
這篇文章主要介紹了vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04