1 简介
vant虽然提供了日期时间选择器，但是非常不方便，需要写很多东西才能实现一个正常的日期时间选择，所以在这个基础上做一个封装
2 组件代码my-datepicker
1）wxml
<!--components/my-datepicker.wxml-->
<view>
<view class="search-kk" bindtap='openPicker'>{{value}}</view>
</view>
<van-popup
show="{{ show }}"
position="bottom"
custom-style="height: 60%;"
bind:close="onCancel">
<van-datetime-picker
type="{{datetype}}"
value="{{currentDate}}"
min-date="{{minDate}}"
max-date="{{maxDate}}"
bind:confirm="onConfirm"
bind:cancel="onCancel"
/>
</van-popup>
2）js
// components/my-datepicker.js
const dateutils = require('../../utils/dateUtil');
Component({
/**
* 组件的属性列表
*/
properties: {
datetype:{
type:String,
value:'datetime'
},
minDate:{
type:Date,
value:new Date((new Date().getFullYear() - 2), 10, 1).getTime()
},
maxDate:{
type:Date,
value:new Date((new Date().getFullYear() + 2), 10, 1).getTime()
},
currentDate:{
type:Date,
value:new Date().getTime()
},
formatLength:{
type:Number,
value:6
}
},
// 监听传入的变量,当传入的值发生变化时,触发方法,对传入的list加上下标赋值给listAct
observers: {
'currentDate': function (val) {
var da = dateutils.formatTimeStampToStByLength(val,this.properties.formatLength)
this.setData({
value:da
})
},
'formatLength': function (val) {
var da = dateutils.formatTimeStampToStByLength(this.properties.currentDate,val)
this.setData({
value:da
})
}
},
/**
* 组件的初始数据
*/
data: {
show:false,
value:dateutils.formatTimeStampToStByLength(new Date().getTime(),6) // 默认格式化长度6，和formatLength一致
},
/**
* 组件的方法列表
*/
lifetimes: {
attached: function() {
},
detached: function() {
},
},
methods: {
openPicker(){
this.setData({
show:true
})
},
onCancel(){
this.setData({
show:false
})
},
onConfirm(event){
var value = dateutils.formatTimeStamp(event.detail)
if(this.properties.datetype == 'datetime'){
value = dateutils.formatTimeStampToSt(event.detail)
}
var formatdate = dateutils.formatTimeStampToStByLength(event.detail,this.properties.formatLength)
this.setData({
show: false,
'value': value,
})
var datevalue = {
'timestamp':event.detail,
'formatdate':formatdate
}
this.triggerEvent('getdatevalue',{value:datevalue})
}
}
})
3）json
{
"component": true,
"usingComponents": {
"van-picker": "@vant/weapp/picker/index",
"van-datetime-picker": "@vant/weapp/datetime-picker/index",
"van-field": "@vant/weapp/field/index",
"van-popup": "@vant/weapp/popup/index"
}
}
日期工具类
function formatTimeStampToSt(timestamp) {
var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
return Y+M+D+h+m+s;
}
function formatTimeStampToStByLength(timestamp,i) {
var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear();
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) ;
var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate());
var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours());
var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes());
var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
var st = Y
if(i > 1){
st = st + "-" + M
}
if(i > 2){
st = st + '-' + D
}
if(i > 3){
st = st + ' ' + h
}
if(i > 4){
st = st + ':' + m
}
if(i > 5){
st = st + ':' + s
}
return st;
}
function formatTimeStamp(timestamp) {
var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
// var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
// var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
// var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
return Y+M+D;
}
4）css
.search-kk {
width: calc(100%);
height: 80rpx;
box-sizing: border-box;
padding: 0 20rpx;
line-height: 70rpx;
font-size: 28rpx;
color: #333;
overflow-x: hidden;
border-radius: 10rpx;
}
3 组件配置说明
datetype 日期类型，默认datetime
minDate 可选的最小值，默认new Date((new Date().getFullYear() - 2), 10, 1).getTime()
maxDate 可选最大值，默认new Date((new Date().getFullYear() + 2), 10, 1).getTime()
currentDate 当前日期，默认new Date().getTime()
formatLength：日期选择后返回的格式化后的值的长度
1 YYYY
2 YYYY-MM
3 YYYY-MM-DD
4 YYYY-MM-DD hh
5 YYYY-MM-DD hh:mm
6 YYYY-MM-DD hh:mm:ss
4 使用
1）json文件中引入组件
"my-datepicker": "/components/my-datepicker/my-datepicker"
2）wxml
<my-datepicker datetype="datetime" formatLength="5" bindgetdatevalue="getdatevalue"></my-datepicker>
3）js
getdatevalue(e){
console.log('-----------',e)
}
5 实例效果
1）wxml
<view class="search-tt2 ,require-label:before">日期: </view>
<view class="search-kk st">
<my-datepicker datetype="datetime" formatLength="5" bindgetdatevalue="getdatevalue"></my-datepicker>
</view>
2）wxss
.search-tt2 {
float: left;
width: 180rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 32rpx;
color: #333;
margin-left: 70rpx;
margin-top: 10px;
}
.search-kk {
width: calc(80% - 150rpx);
height: 80rpx;
border: 1px solid rgb(169, 167, 167);
box-sizing: border-box;
padding: 0 20rpx;
line-height: 70rpx;
font-size: 28rpx;
color: #333;
overflow-x: hidden;
border-radius: 10rpx;
}
.st {
margin-top: 20rpx;
}
3）效果
