我要评论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
},
展示效果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论