日期选择器的实现在很多地方也能用的到,比如填写生日、预约日期等等。通过选择器能够很方便的帮助用户进行选择所需要的日期。
实现该功能有以下几个步骤:
- 引入路径及编写代码
- 实现
一、引入路径及编写代码
这里我们可以不用Vant组件,但是如果你想界面好看一点就用Vant组件。
这里所指的引入路径是指,在设置当前时间的时候,需要用到工具包,这个包一般自己定义:utils:
我们在utils.js文件中写以下代码:
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours() //需要小时、分钟、秒 的话就写,不需要就不用写
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':') //返回年月日小时分钟秒
//格式:1900-01-01 10:10:10
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
在选择器页面的js文件中引入该文件及编写代码:
var utils = require('../utils/util.js') //根据自己的路径进行编写
onLoad(){
var date = utils.formatTime(new Date());
console.log(date)
var time = date.split(' ') //如果只需要年月日,不需要时分秒就写此语句
console.log(time[0]) //年月日
console.log(time[1]) //时分秒
this.setData({
endtime:time[0]
})
},
bindDateChange: function(e) {
console.log(e.detail.value)
this.setData({
date: e.detail.value
})
},
wxml页面:
<view class="section">
<picker mode="date" value="{{date}}" start="1900-01-01" end="{{endtime}}" bindchange="bindDateChange">
<van-cell class="section__title picker" title="日期选择器:{{date}}" is-link />
</picker>
</view>
二、实现
通过以上几个简单的步骤就实现了该功能,如果你有问题,可以下方留言,看到之后会第一时间回复!