具體代碼如下所述：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)</title> <!-- import Vue.js --> <script src="https://vuejs.org/js/vue.min.js"></script> <!-- import stylesheet --> <link rel="stylesheet" rel="external nofollow" > <!-- import iView --> <script src="https://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ù)大家的！
新聞熱點(diǎn)
疑難解答
圖片精選
