关于vant的时间选择器使用方式
更新时间:2024年03月22日 09:30:55 作者:Emotion#
这篇文章主要介绍了关于vant的时间选择器使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vant的时间选择器
<van-popup :show="showPop" position="bottom" label="有效日期" custom-style="height: 50%;" @close="onCancel" > <view v-if="showTwoTime"> <van-datetime-picker type="date" :value="currentDate" @confirm="confirm1" @cancel="onCancel" :min-date="minDate" :formatter="formatter" /> </view> <view v-if="!showTwoTime"> <van-datetime-picker type="date" :value="currentDate" @confirm="confirm2" @cancel="onCancel" :min-date="minDate" :formatter="formatter" /> </view ></van-popup>
这里需要开始时间和结束时间:
- 提示:因此增加了showTwoTime的判定:
解决方案
- 提示:这里是时间转换的方法:
confirm1(value) { this.plan.start_time = this.formatTime(value.detail, 'Y/M/D') this.showTwoTime = false }, confirm2(value) { this.showPop = false this.plan.end_time = this.formatTime(value.detail, 'Y/M/D') this.showTwoTime = true }, formatTime(date) { date = new Date(date) console.log(date) var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() return [year, month, day].map(this.formatNumber).join('/') }, formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n },
解决方案
- 提示:全部方法:
<van-popup :show="showPop" position="bottom" label="有效日期" custom-style="height: 50%;" @close="onCancel" > <view v-if="showTwoTime"> <van-datetime-picker type="date" :value="currentDate" @confirm="confirm1" @cancel="onCancel" :min-date="minDate" :formatter="formatter" /> </view> <view v-if="!showTwoTime"> <van-datetime-picker type="date" :value="currentDate" @confirm="confirm2" @cancel="onCancel" :min-date="minDate" :formatter="formatter" /> </view ></van-popup>
//data的定义 showPop: false, currentDate: new Date().getTime(), minDate: new Date().getTime(), showTwoTime: true,
//方法的定义 changeFn() { this.changeDate = this.currentDate }, confirm1(value) { this.plan.start_time = this.formatTime(value.detail, 'Y/M/D') ///'Y/M/D'为了提示自己时间格式 this.showTwoTime = false }, confirm2(value) { this.showPop = false this.plan.end_time = this.formatTime(value.detail, 'Y/M/D') this.showTwoTime = true }, formatTime(date) { date = new Date(date) //从时间选择器中得到的时间格式为时间搓,因此需要转换为标准制式时间单位 console.log(date) var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() //这里只表现到日,时,分,秒自习行添加方法! return [year, month, day].map(this.formatNumber).join('/') //转换为产品经理想要的展示形式 }, formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n //加0操作! }, formatter(type, value) { //展示的格式处理 if (type === 'year') { return `${value}年` } if (type === 'month') { return `${value}月` } if (type === 'day') { return `${value}日` } return value },
展示效果
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
详解为什么Vue中不要用index作为key(diff算法)
这篇文章主要介绍了详解为什么Vue中不要用index作为key(diff算法),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论