The applet custom picker implements year, month, day, hour, minute and year, month, day, hour, minute, second time selectors
Recently, in a small program project of the company, I need to use the place to select the year, month, day, hour, minute, and second. Then I went to the applet development document to see that there is no selector component that can directly select the year, month, day, hour, minute, and second, so on weekends I spent some time encapsulating a time selector component that can select year, month, day, hour, minute, and year, month, day, hour, and minute. Hope to help those in need!
I have submitted the code to Code Cloud, you can download my code through this link:
https://gitee.com/yuanyifei666/wxDateTimePicker.git
After downloading, the date-time-picker in the components directory is the time picker component I encapsulated.
Just copy my date-time-picker directory to your project, and then add it to the json of the page where the component is to be used Introduce this component in the file, pay attention to the correct path! (I take the index page as an example here)
{
"usingComponents": {
"date-time-picker": "/components/date-time-picker/index"
},
"navigationBarTitleText": "封装时间选择器组件"
}
Then use the component in the index.wxml file
<!--pages/index/index.wxml-->
<date-time-picker
mode="dateminute"
value="{
{dateMinute}}"
bindchange="selectDateMinuteChange">
<view class="show-date-time-box">年月日时分: {
{
dateMinute}}</view>
</date-time-picker>
<date-time-picker
mode="datetime"
value="{
{dateSecond}}"
bindchange="selectDateSecondChange">
<view class="show-date-time-box">年月日时分秒: {
{
dateSecond}}</view>
</date-time-picker>
Attribute description: 1. mode: legal value of
selector type mode: dateminute: year, month, day, hour and minute selector (2019-11-30 11:03) datetime: time selector (2019-11-30 11:03:17) 2. value: the value of the selector 3. bindchange: the change event is triggered when the value changes, and the selected value can be obtained
The code in the index.js file is as follows:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
dateMinute: '',
dateSecond: ''
},
/**
* 年月日时分选择类型的回调函数，可以在该函数得到选择的时间
*/
selectDateMinuteChange(ev) {
this.setData({
dateMinute: ev.detail.value
})
},
/**
* 年月日时分秒选择类型的回调函数，可以在该函数得到选择的时间
*/
selectDateSecondChange(ev) {
this.setData({
dateSecond: ev.detail.value
})
}
})
The above is the simple use of the component, and the following is the specific implementation code of the component
js code:
// components/date-time-picker/index.js
Component({
/**
* 定义组件生命周期函数
*/
lifetimes: {
attached() {
// =====初始化时间选择器====
this._initDateTimePickerFn()
},
detached() {
}
},
/**
* 对 <2.2.3 版本基础库的兼容
*/
attached() {
// =====初始化时间选择器====
this._initDateTimePickerFn()
},
detached() {
},
/**
* 组件相关配置项
*/
options: {
multipleSlots: true // 开启使用多个插槽
},
/**
* 组件的属性列表
*/
properties: {
mode: {
// 选择器类型
type: String,
require: true
},
value: {
// 回显的时间
type: String,
value: ''
}
},
/**
* 组件的初始数据
*/
data: {
rangeList: [],
rangeValue: [],
dateDetails: ['年','月', '时', '分', '秒']
},
/**
* 组件的方法列表
*/
methods: {
/**
* 初始化时间选择器
*/
_initDateTimePickerFn() {
try {
const {
value, mode} = this.data
if (mode != 'dateminute' && mode != 'datetime') {
throw new CommonException('请输入合法的时间选择器类型！', -1)
}
//====获取到当前时间===
let showTimeValue = this._validateShowTime(value, mode)
// ====获取年份====
const currentYear = showTimeValue.substring(0, showTimeValue.indexOf('-'))
const currentMouth = showTimeValue.split(" ")[0].split('-')[1]
const yearList = this._gotDateTimeList({
_start: Number(currentYear) - 100,
_end: Number(currentYear) + 100, _type: 0
})
// ====获取月份===
const monthList = this._gotDateTimeList({
_start: 1, _end: 12, _type: 1 })
//====获取天数===
const dayList = this._gotDayList(currentYear, currentMouth)
// ====获取小时===
const hourList = this._gotDateTimeList({
_start: 0, _end: 23, _type: 2 })
// ====获取分钟===
const munithList = this._gotDateTimeList({
_start: 0, _end: 59, _type: 3 })
// ====获取秒===
const secondList = this._gotDateTimeList({
_start: 0, _end: 59, _type: 4 })
let rangeList = new Array()
rangeList.push(yearList)
rangeList.push(monthList)
rangeList.push(dayList)
rangeList.push(hourList)
rangeList.push(munithList)
mode === "datetime" && rangeList.push(secondList)
this.setData({
rangeList
}, () => {
this._echoDateTime(showTimeValue) // 初始化时间显示
})
} catch(err) {
console.log(err)
}
},
/**
* 验证显示的时间是否合法
* @param {Number} _value 要验证的时间
* @param {Number} _mode 选择器类型
*/
_validateShowTime(_value, _mode){
let currentTime = formatTime(new Date()).replace(/\//g, "-")
let showTimeValue = _value.trim() || currentTime
const secondReg = /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/
const munithReg = /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}$/
if (_mode === 'dateminute') {
// yyyy-MM-dd HH:mm
// 验证是否合法
secondReg.test(showTimeValue) && (showTimeValue = showTimeValue.substring(0, showTimeValue.lastIndexOf(':')))
munithReg.test(showTimeValue) || (showTimeValue = currentTime.substring(0, currentTime.lastIndexOf(':')))
} else {
// yyyy-MM-dd HH:mm:ss
munithReg.test(showTimeValue) && (showTimeValue += ':00')
secondReg.test(showTimeValue) || (showTimeValue = currentTime)
}
return showTimeValue
},
/**
* 获取年份、月份、小时、分钟、秒
* @param {Number} _start 开始值
* @param {Number} _end 结束值
* @param {Number} _type 类型
*/
_gotDateTimeList({
_start, _end, _type}) {
let resultDataList = new Array()
for (let i = _start; i <= _end; i ++) {
resultDataList.push(this._addZore(i) + this.data.dateDetails[_type])
}
return resultDataList
},
/**
* 获取天数
* @param {Number} _year 年份
* @param {Number} _mouth 月份
*/
_gotDayList(_year, _mouth) {
let now = new Date(_year, _mouth, 0)
const dayLength = now.getDate()
let dayList = new Array()
for(let i = 1; i <= dayLength; i++) {
dayList.push(this._addZore(i) + '日')
}
return dayList
},
/**
* 补零
* @param {Number} _num 数值
*/
_addZore(_num) {
return _num < 10 ? '0' + _num : _num.toString()
},
/**
* 回显时间
* @param {Number} _showTimeValue 初始化时要显示的时间
*/
_echoDateTime(_showTimeValue) {
const rangeList = this.data.rangeList
let rangeValue = new Array()
const list = _showTimeValue.split(/[\-|\:|\s]/)
list.map((el, index) => {
rangeList[index].map((item, itemIndex) => {
item.indexOf(el) !== -1 && rangeValue.push(itemIndex)
})
})
this.setData({
rangeValue
})
},
/**
* 点击确定时触发的回调函数
* @param {Number} ev
*/
selectChangeFn(ev) {
const selectValues = ev.detail.value
const rangeList = this.data.rangeList
let dateTime = ''
selectValues.map((el, index) => {
dateTime += rangeList[index][el].substring(0, rangeList[index][el].length - 1)
if(index == 0 || index == 1) {
dateTime += '-'
} else if (index == 3 || (index == 4 && index != selectValues.length - 1)) {
dateTime += ':'
} else if(index == 2 && index != selectValues.length -1){
dateTime += ' '
}
})
// ====触发父组件把值传递给父组件====
this.triggerEvent('change', {
value: dateTime})
},
/**
* 当具体的一项的值发生改变时触发
* @param {Number} ev
*/
selectColumnChangeFn(ev) {
const {
column, value } = ev.detail
let {
rangeList, rangeValue } = this.data
let selectValue = Number(rangeList[column][value]
.substring(0, rangeList[column][value].length - 1))
if (column === 1) {
// 改变月份
const currentYear = Number(rangeList[0][rangeValue[0]]
.substring(0, rangeList[0][rangeValue[0]].length - 1))
const dayList = this._gotDayList(currentYear, selectValue)
rangeList[column + 1] = dayList
}
this.setData({
rangeList
})
}
}
})
// 自定义异常
function CommonException(errMsg, code){
this.errMsg = errMsg
this.code = code
}
// =====格式化日期===
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
}
Code in json file:
{
"component": true,
"usingComponents": {
}
}
Code in wxml file:
<!--components/date-time-picker/index.wxml-->
<picker mode="multiSelector" range="{
{rangeList}}" value="{
{rangeValue}}"
bindchange="selectChangeFn" bindcolumnchange="selectColumnChangeFn">
<slot></slot>
</picker>
There is no style in the wxss file, there are only so many codes, and it is very simple. If anyone thinks there is something wrong with the code I wrote, please correct me, thank you!