vue 判斷兩個(gè)時(shí)間插件結(jié)束時(shí)間必選大于開始時(shí)間的代碼
效果展示:
代碼展示:
<template> <div id="date_time_picker"> <van-button plain type="primary" @click="showPopFn()">點(diǎn)擊選擇日期</van-button> <van-field v-model="timeValue" placeholder="選擇的日期結(jié)果" readonly /> <van-popup v-model="show" position="bottom" :style="{ height: '40%' }"> <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()" /> </van-popup> </div> </template> <script> export default { data() { return { msg: '', currentDate: new Date(), changeDate: new Date(), show: false, // 用來顯示彈出層 timeValue: '' } }, methods: { showPopFn() { this.show = true; }, showPopup() { this.show = true; }, changeFn() { // 值變化是觸發(fā) this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) }, confirmFn() { // 確定按鈕 this.timeValue = this.timeFormat(this.currentDate); this.show = false; }, cancelFn(){ this.show = true; }, timeFormat(time) { // 時(shí)間格式化 2019-09-08 let year = time.getFullYear(); let month = time.getMonth() + 1; let day = time.getDate(); return year + '年' + month + '月' + day + '日' } }, mounted() { this.timeFormat(new Date()); } } </script> <style> </style>
注意:如果是按需引入的話,記得在main.js里面引入相應(yīng)的文件奧。
// main.js文件里面的部分代碼 import {Button} from 'vant' import { DatetimePicker } from 'vant'; import { Popup } from 'vant'; import { Field } from 'vant'; Vue.use(Button) Vue.use(DatetimePicker) Vue.use(Popup) Vue.use(Field);
---------完。
補(bǔ)充知識:Vue + Vant DatetimePicker 日期選擇 常見的日期限制(只允許選擇當(dāng)前月,整月選擇)
安裝Moment.js(Moment.js JavaScript 日期處理類庫 http://momentjs.cn/)
npm install moment --save # npm
yarn add moment # Yarn
<van-datetime-picker class="datePick" v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" readonly="readonly" @confirm="confirmDate" @cancel="cancelDate"/> mounted() { let dateLimit = new Date(); let year = date.getFullYear(); let month = date.getMonth()+1; let d = new Date(year, month, 0); //最大允許選擇當(dāng)前日期 this.maxDate = new Date(this.$moment(dateLimit).format('YYYY/MM/DD')); //最大允許選擇當(dāng)前日期+3個(gè)月 this.maxDate = new Date(this.$moment(dateLimit).add('3','M').format('YYYY/MM/DD')); //最小允許選擇當(dāng)前日期 this.minDate = new Date(this.$moment(dateLimit).format('YYYY/MM/DD')); //最小允許選擇當(dāng)前日期-3個(gè)月 this.minDate = new Date(this.$moment(dateLimit).subtract('3','M').format('YYYY/MM/DD'); //最小允許選擇當(dāng)前日期-3個(gè)月(當(dāng)前月不算,減去三個(gè)整月2020/06/01----2020/09/22) this.minDate = new Date(this.$moment(dateLimit).subtract('3','M').format('YYYY/MM')+'/01'); //只允許選擇當(dāng)前月 let year = dateLimit.getFullYear(); let month = dateLimit.getMonth()+1; let d = new Date(year, month, 0); let enddate = d.getDate(); this.minDate = new Date(this.$moment(dateLimit).format('YYYY/MM/')+'01'); this.maxDate = new Date(this.$moment(dateLimit).format('YYYY/MM/')+ enddate); }
其中minData 和maxData 兩兩組合即可日期限制。
以上這篇vue 判斷兩個(gè)時(shí)間插件結(jié)束時(shí)間必選大于開始時(shí)間的代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本
這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02vue 的點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素方法
今天小編就為大家分享一篇vue 的點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue中父子組件相互傳值的實(shí)現(xiàn)方法詳解
父子組件通信是Vue中常見的場景,這篇文章主要為大家詳細(xì)介紹了vue中父子組件相互傳值的實(shí)現(xiàn)方法,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2023-12-12簡單實(shí)現(xiàn)一個(gè)vue公式編輯器組件demo
這篇文章主要介紹了輕松實(shí)現(xiàn)一個(gè)簡單的vue公式編輯器組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01vue3中<script?setup>?和?setup函數(shù)的區(qū)別對比
這篇文章主要介紹了vue3中<script?setup>?和?setup函數(shù)的區(qū)別,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04ant-design-vue 實(shí)現(xiàn)表格內(nèi)部字段驗(yàn)證功能
這篇文章主要介紹了ant-design-vue 實(shí)現(xiàn)表格內(nèi)部字段驗(yàn)證功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12