目录
1.引入vant组件库
2.wxml页面
3.js页面
1.引入vant组件库
1.安装vant
# 通过 npm 安装
npm i @vant/weapp -S --production# 通过 yarn 安装
yarn add @vant/weapp --production# 安装 0.x 版本
npm i vant-weapp -S --production2.将 app.json 中的
"style": "v2"
去除3.在 project.config.json 里面的 "setting":{ } 里面添加下面的代码
"packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ],
4.构建 npm 包
5.引入时间选择器组件
在
app.json
或index.json
中引入组件,"usingComponents": { "van-datetime-picker": "@vant/weapp/datetime-picker/index" }
2.wxml页面
showtime是控制时间选择器显示隐藏的,通过事件改变
<van-popup show="{{ showtime }}" position="bottom" custom-style="height: 60%" bind:close="hidetime" >
<van-datetime-picker wx:if="{{times}}" type="date" title="开始时间" confirm-button-text="下一步" value="{{ currentDate }}" bind:confirm="startconfirm" bind:cancel="startcancel" />
<van-datetime-picker wx:else type="date" title="结束时间" value="{{ currentDate }}" bind:confirm="endconfirm" min-date="{{mindate}}" bind:cancel="endtcancel" />
</van-popup>
3.js页面
引入时间转换方法
const util = require('../../utils/util.js')
时间转换方法 在utils里面写的
// 这里的date是传入的中国标准时间格式进行转换
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
module.exports = {
formatTime
}
js页面
// 初始值
data: {
// 今天日期
currentDate: new Date().getTime(),
结束日期的开始时间
mindate: "",
//自定义时间开始/结束切换
times: true,
// 打开自定义时间
showtime: false,
// 开始时间
start_time: "",
// 结束时间
end_time: "",
}
// 方法
// 关闭自定义时间
hidetime(e) {
this.setData({
showtime: false
})
},
// 选择自定义开始时间
// 确认
startconfirm(e) {
// console.log(util.formatTime(new Date(e.detail)).split(" ")[0]);
this.setData({
start_time: util.formatTime(new Date(e.detail)).split(" ")[0],
currentDate: e.detail,
mindate: e.detail,
times: false,
})
},
// 取消
startcancel() {
this.setData({
currentDate: new Date().getTime(),
showcustomtime: false
})
},
// 选择自定义结束时间
// 确认
endconfirm(e) {
// console.log(util.formatTime(new Date(e.detail)).split(" ")[0]);
this.setData({
currentDate: new Date().getTime(),
end_time: util.formatTime(new Date(e.detail)).split(" ")[0],
showcustomtime: false,
times: true
})
this.getindexList(this.data.branchid, this.data.staffid, this.data.start_time, this.data.end_time)
},
// 取消
endtcancel() {
this.setData({
times: true
})
},
效果
文章来源:https://www.toymoban.com/news/detail-583375.html
文章来源地址https://www.toymoban.com/news/detail-583375.html
到了这里,关于微信小程序使用vant时间选择器二次封装成自定义区间时间选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!