关于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 select 获取value和lable操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue 将后台传过来的带html字段的字符串转换为 HTML
这篇文章主要介绍了Vue 将后台传过来的带html字段的字符串转换为 HTML ,需要的朋友可以参考下2018-03-03
这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了vue print.js打印支持Echarts图表操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。这篇文章主要介绍了策略模式实现 Vue 动态表单验证,需要的朋友可以参考下2019-09-09
这篇文章主要为大家介绍了vue tailwindcss安装配置教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
第一次写Vue项目，要用到router.js,看了一下官方文档，还是很懵逼，不知道怎么配置，又去看视频查资料，最后终于搞定了。话不多说，先上代码，我再讲一些要注意的细节2022-12-12
今天小编就为大家分享一篇Vue 路由切换时页面内容没有重新加载的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要以vue3+vite+ts举例,为大家详细介绍了vue3中pinia的安装与使用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-09-09
这篇文章主要给大家介绍了关于vue自定义权限标签的相关资料,在Vue中你可以通过创建自定义组件来实现自定义标签组件,文中给出了详细的代码示例,需要的朋友可以参考下2023-09-09
最新评论