关于vant的时间选择器使用方式
作者：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
},
展示效果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。