vant日期选择组件(格式yyyy-mm-dd 默认当天)
Html
<van-field readonly clickable name="datetimePicker" :value="lostDate" label="时间" placeholder="点击选择时间" @click="showPicker = true" /> <van-popup v-model="showPicker" position="bottom"> <van-datetime-picker type="date" :maxDate="maxDate" v-model="currentDate" @confirm="onConfirm" @cancel="showPicker = false" /> </van-popup>
js
data() { return { showPicker: false, maxDate: new Date(), lostDate: this.formatter(), currentDate: new Date() }; }, methods: { formatter(time) { let nowdata =time == null ? new Date() : new Date(time); let year = nowdata.getFullYear(); let month = nowdata.getMonth() + 1; let date = nowdata.getDate(); let nowtime = year + "-"; if (month < 10) { nowtime += "0"; } nowtime += month + "-"; if (date < 10) { nowtime += "0"; } nowtime += date; return nowtime; }, onConfirm(time) { this.LossDate = this.formatter(time); this.showPicker = false; }, }
展示