vant的时间选择器使用
vant的时间选择器:<van-popup:show="showPop"position="bottom"label="有效日期"custom-style="height: 50%;"@close="onCancel"><view v-if="showTwoTime"><van-datetime-pickertype="date"
·
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
},
展示效果
更多推荐
已为社区贡献2条内容
所有评论(0)