最近做自己的项目时,需要用到年月日时分的日期选择器,找了官网发现没有这种的,于是就只能自己写啦。
使用微信小程序原生packer实现 多列选择器:mode = multiSelector
废话不多,效果看图 文末附上下载链接 后续会不断优化控件 支持更多操作 用到的朋友给个star小星星吧~
2019-01-28更新 添加可以指定默认日期 修复了一些BUG git上已上传最新代码 有问题可以给我留言 谢谢
2019-02-27 添加是否允许点击属性disabled true不允许点击 false允许点击 默认false
2019-04-08 修复不添加data属性 不显示默认日期BUG
添加开始日期startDate 结束日期endDate 如果都没添加 默认显示3年, 如果只添加startDate 则结束时间为2099 如果只添加endData则开始日期为1900 目前只支持限制年份,后续会添加所有限制
2019-04-09 修复年份显示BUG
2019-04-10 添加placeholder属性 提示文字 可以默认不显示日期 添加后初始化onPickerChange 不返回数据
2019-08-07 修改开始日期startDate 结束日期endDate 添加所有限制 之前只能限制年份 现在做到全支持 格式为2019-02-02 15:33(务必遵守)代码写的有点复杂 后期再优化吧 有BUG请尽快联系我修改,防止老年痴呆复发。。。谢谢
2019-11-20 修改页面不渲染BUG
2020-08-28 修改ios异常bug 原因ios转换日期 不识别'2019-01-01 12:37' 只识别'2019/01/01 12:37' 现已做修改 把传入日期'-'改为'/' (之前代码已做'-'改为'/'转换处理 但不知道怎么的 会丢失某一列数据 原因不明 未复现 再出现请联系我)
感谢各位小哥哥 小姐姐的小星星 谢谢大家
实现思路:除了天数会跟随月份改变外,其余都为固定值
代码如下
pickerYMDHM.js文件
// components/pickerYMDHM/pickerYMDHM.js
Component({
/**
* 组件的属性列表
*/
properties: {
date: { // 属性名
type: null, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: null // 属性初始值(可选),如果未指定则会根据类型选择一个
},
startDate: {
type: null, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: null // 属性初始值(可选),如果未指定则会根据类型选择一个
},
endDate: {
type: null, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: null // 属性初始值(可选),如果未指定则会根据类型选择一个
},
disabled: {
type: null, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: false // 属性初始值(可选),如果未指定则会根据类型选择一个
},
placeholder: {
type: null, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: null // 属性初始值(可选),如果未指定则会根据类型选择一个
}
},
/**
* 组件的初始数据
*/
data: {
pickerArray: [],//日期控件数据list
pickerIndex: [],//日期控件选择的index
chooseIndex: [],//日期控件确认选择的index
chooseArray: [],//日期控件确认选择后的list
stDate: '',//开始日期
enDate: ''//结束日期
},
/**
* 组件的方法列表
*/
methods: {
_onInit() {
let date = new Date();
if (this.data.date != null) {
let str = this.data.date;
str = str.replace(/-/g, '/');
date = new Date(str);
}
let pickerArray = this.data.pickerArray;
// console.log(date.getFullYear());
//默认选择3年内
let year = [];
let month = [];
let day = [];
let time = [];
let division = [];
let startDate = '';
let endDate = ''
let tpData = {};
if (this.data.startDate != null && this.data.endDate == null) {
//如果存在开始时间,则默认设置结束时间为2099
startDate = this._getDefaultDate(this.data.startDate);
endDate = this._getDefaultDate("2099-12-31 23:59");
tpData = this._getModify(date, startDate, endDate);
}
if (this.data.endDate != null && this.data.startDate == null) {
//如果存在结束时间,不存在开始时间 则默认设置开始时间为1900
startDate = this._getDefaultDate("1900-01-01 00:00");
endDate = this._getDefaultDate(this.data.endDate);
tpData = this._getModify(date, startDate, endDate);
}
if (this.data.endDate != null && this.data.startDate != null) {
startDate = this._getDefaultDate(this.data.startDate);
endDate = this._getDefaultDate(this.data.endDate);
tpData = this._getModify(date, startDate, endDate);
}
// console.log(year);
if (this.data.startDate == null && this.data.endDate == null) {
startDate = this._getDefaultDate("1901-01-01 00:00");
endDate = this._getDefaultDate("2099-12-31 23:59");
tpData = this._getModify(date, startDate, endDate);
}
if (date > endDate || date < startDate) {
this.setData({
placeholder: "默认日期不在时间范围内"
})
return;
}
// console.log(division);
pickerArray[0] = tpData.year;
pickerArray[1] = tpData.month;
pickerArray[2] = tpData.day;
pickerArray[3] = tpData.time;
pickerArray[4] = tpData.division;
let mdate = {
date: date,
year: date.getFullYear() + '',
month: date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + '',
day: date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '',
time: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + '',
division: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ''
}
mdate.placeholder = mdate.year + '-' + mdate.month + '-' + mdate.day + ' ' + mdate.time + ':' + mdate.division;
this.setData({
pickerArray,
pickerIndex: tpData.index,
chooseIndex: tpData.index,
chooseArray: pickerArray,
placeholder: this.data.placeholder != null ? this.data.placeholder : mdate.placeholder,
stDate: startDate,
enDate: endDate
})
// console.log(date);
//设置placeholder属性后 初始化不返回日期
if (this.data.placeholder == null){
this.triggerEvent('onPickerChange', mdate);
}
// console.log(this.data.pickerArray);
// console.log(this._getNumOfDays(2018, 10));
},
/**
*
*/
_getDefaultDate(date) {
date = date.replace(/-/g, '/');
return new Date(date);
},
/**
*
* 获取开始日期 结束日期 中间日期
* @param {date} newDate 默认日期
* @param {date} startDate 设置开始日期
* @param {date} stopDate 设置结束日期
* @returns data 包含年月日时分数组
*/
_getModify(newDate, startDate, stopDate) {
let data = {
year: [],
month: [],
day: [],
time: [],
division: [],
index:[0,0,0,0,0]
}
let nYear = newDate.getFullYear();
let n