微信小程序日期时分组件(年月日时分)
程序员文章站
2022-06-24 09:46:21
本文实例为大家分享了微信小程序日期时分组件的具体代码,供大家参考,具体内容如下如图所示效果第一步新建picker组件文件1,pickertime.js组件代码内容// component/picker...
本文实例为大家分享了微信小程序日期时分组件的具体代码,供大家参考,具体内容如下
如图所示效果
第一步新建picker组件文件
1,pickertime.js组件代码内容
// component/pickertime/pickertime.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 nmonth = newdate.getmonth() + 1; let nday = newdate.getdate(); let nhours = newdate.gethours(); let nminutes = newdate.getminutes(); let tyear = startdate.getfullyear(); let tmonth = startdate.getmonth() + 1; let tday = startdate.getdate(); let thours = startdate.gethours(); let tminutes = startdate.getminutes(); let pyear = stopdate.getfullyear(); let pmonth = stopdate.getmonth() + 1; let pday = stopdate.getdate(); let phours = stopdate.gethours(); let pminutes = stopdate.getminutes(); for (let i = tyear; i <= pyear; i++) { data.year.push({ id: i, name: i + "年" }); } data.index[0] = nyear - tyear; //判断年份是否相同 相同则继续 if (nyear == tyear){ //判断结束年份 赋值月份 如果结束年份相同则把结束月份 一并赋值 if (nyear == pyear){ for (let i = tmonth; i <= pmonth; i++) { data.month.push({ id: i, name: i + "月" }); } data.index[1] = nmonth - tmonth < 0 ? 0 : nmonth - tmonth; if (nmonth == tmonth){ if (nmonth == pmonth){ for (let i = tday; i <= pday; i++) { data.day.push({ id: i, name: i + "日" }); } data.index[2] = nday - tday < 0 ? 0 : nday - tday; if (nday == tday){ if (nday == pday){ for (let i = thours; i <= phours; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours - thours < 0 ? 0 : nhours - thours; if (nhours == thours){ if (nhours == phours){ for (let i = tminutes; i <= pminutes; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes - tminutes < 0 ? 0 : nminutes - tminutes; } else { for (let i = tminutes; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes - tminutes < 0 ? 0 : nminutes - tminutes; } } else { if (nhours == phours){ for (let i = 0; i <= pminutes; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } else { for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } } else { for (let i = thours; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours - thours < 0 ? 0 : nhours - thours; if (nhours == thours) { for (let i = tminutes; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes - tminutes < 0 ? 0 : nminutes - tminutes; } else { for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } } else { if (nday == pday){ for (let i = 0; i <= phours; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; if (nhours == phours){ for (let i = 0; i <= pminutes; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } else { for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } else { for (let i = 0; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; // console.log(time); for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } } else { let daynum = this._getnumofdays(nyear, nmonth); for (let i = tday; i <= daynum; i++) { data.day.push({ id: i, name: i + "日" }); } data.index[2] = nday - tday < 0 ? 0 : nday - tday; if (nday == tday) { for (let i = thours; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours - thours < 0 ? 0 : nhours - thours; if (nhours == thours) { for (let i = tminutes; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes - tminutes < 0 ? 0 : nminutes - tminutes; } else { for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } else { for (let i = 0; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; // console.log(time); for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } } else { if (nmonth == pmonth){ for (let i = 1; i <= pday; i++) { data.day.push({ id: i, name: i + "日" }); } data.index[2] = nday - 1; if (nday == pday){ for (let i = 0; i <= phours; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; if (nhours == phours){ for (let i = 0; i <= pminutes; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } else { for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } else { for (let i = 0; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; // console.log(time); for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } else { let daynum = this._getnumofdays(nyear, nmonth); for (let i = 1; i <= daynum; i++) { data.day.push({ id: i, name: i + "日" }); } data.index[2] = nday - 1; for (let i = 0; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; // console.log(time); for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } } else {//只需要开始日期 因为结束年份不同 所以不会用到结束日期 for (let i = tmonth; i <= 12; i++) { data.month.push({ id: i, name: i + "月" }); } data.index[1] = nmonth - tmonth < 0 ? 0 : nmonth - tmonth; if (nmonth == tmonth){ let daynum = this._getnumofdays(nyear, nmonth); for (let i = tday; i <= daynum; i++) { data.day.push({ id: i, name: i + "日" }); } data.index[2] = nday - tday < 0 ? 0 : nday - tday; if (nday == tday){ for (let i = thours; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours - thours < 0 ? 0 : nhours - thours; if (nhours == thours){ for (let i = tminutes; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes - tminutes < 0 ? 0 : nminutes - tminutes; } else { for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } else { for (let i = 0; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; // console.log(time); for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } else { let daynum = this._getnumofdays(nyear, nmonth); for (let i = 1; i <= daynum; i++) { data.day.push({ id: i, name: i + "日" }); } data.index[2] = nday - 1; for (let i = 0; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; // console.log(time); for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } } else { if (nyear == pyear) { for (let i = 1; i <= pmonth; i++) { data.month.push({ id: i, name: i + "月" }); } data.index[1] = nmonth - 1; if (nmonth == pmonth){ for (let i = 1; i <= pday; i++) { data.day.push({ id: i, name: i + "日" }); } data.index[2] = nday - 1; if (nday == pday){ for (let i = 0; i <= phours; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; if (nhours == phours){ for (let i = 0; i <= pminutes; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } else { for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } else { for (let i = 0; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; // console.log(time); for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } else { let daynum = this._getnumofdays(nyear, nmonth); for (let i = 1; i <= daynum; i++) { data.day.push({ id: i, name: i + "日" }); } data.index[2] = nday - 1; for (let i = 0; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; // console.log(time); for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } else { for (let i = 1; i <= 12; i++) { data.month.push({ id: i, name: i + "月" }); } data.index[1] = nmonth - 1; let daynum = this._getnumofdays(nyear, nmonth); for (let i = 1; i <= daynum; i++) { data.day.push({ id: i, name: i + "日" }); } data.index[2] = nday - 1; for (let i = 0; i <= 23; i++) { if (i < 10) { data.time.push({ id: i, name: "0" + i + "时" }); } else { data.time.push({ id: i, name: i + "时" }); } } data.index[3] = nhours; // console.log(time); for (let i = 0; i <= 59; i++) { if (i < 10) { data.division.push({ id: i, name: "0" + i + "分" }); } else { data.division.push({ id: i, name: i + "分" }); } } data.index[4] = nminutes; } } return data }, /** * * 获取本月天数 * @param {number} year * @param {number} month * @param {number} [day=0] 0为本月0最后一天的 * @returns number 1-31 */ _getnumofdays(year, month, day = 0) { return new date(year, month, day).getdate() }, pickerchange: function (e) { // console.log('picker发送选择改变,携带值为', e.detail.value) let indexarr = e.detail.value; const year = this.data.pickerarray[0][indexarr[0]].id; const month = this.data.pickerarray[1][indexarr[1]].id; const day = this.data.pickerarray[2][indexarr[2]].id; const time = this.data.pickerarray[3][indexarr[3]].id; const division = this.data.pickerarray[4][indexarr[4]].id; let date = { date: new date(year + '-' + month + '-' + day + ' ' + time + ':' + division), year: year + '', month: month < 10 ? '0' + month : month + '', day: day < 10 ? '0' + day : day + '', time: time < 10 ? '0' + time : time + '', division: division < 10 ? '0' + division : division + '' } date.datestring = date.year + '-' + date.month + '-' + date.day + ' ' + date.time + ':' + date.division; // console.log(date); this.setdata({ chooseindex: e.detail.value, choosearray: this.data.pickerarray, placeholder: date.datestring }) this.triggerevent('onpickerchange', date); }, pickercolumnchange: function (e) { // console.log('修改的列为', e.detail.column, ',值为', e.detail.value); let data = { pickerarray: this.data.pickerarray, pickerindex: this.data.pickerindex }; //首先获取 修改后的日期 然后重新赋值列表数据 data.pickerindex[e.detail.column] = e.detail.value; let cyear = data.pickerarray[0][data.pickerindex[0]].id; let cmonth = data.pickerarray[1][data.pickerindex[1]].id; let cday = data.pickerarray[2][data.pickerindex[2]].id; let ctime = data.pickerarray[3][data.pickerindex[3]].id; let cdivision = data.pickerarray[4][data.pickerindex[4]].id; //需要先判断修改后的日期是否是正确的天数 不正确会导致日期错乱等未知情况 let daysn = this._getnumofdays(cyear, cmonth); //不正确 重新赋值 if (cday > daysn){ cday = daysn; } // console.log(cyear + '-' + cmonth + '-' + cday + ' ' + ctime + ':' + cdivision); let newdate = this._getdefaultdate(cyear + '-' + cmonth + '-' + cday + ' ' + ctime + ':' + cdivision); //判断修改后的日期是否在限制范围内 不在则重新赋值 if (newdate > this.data.endate) { newdate = this.data.endate; } if (newdate < this.data.stdate){ newdate = this.data.stdate; } let tpdata = this._getmodify(newdate, this.data.stdate, this.data.endate); data.pickerarray[0] = tpdata.year; data.pickerarray[1] = tpdata.month; data.pickerarray[2] = tpdata.day; data.pickerarray[3] = tpdata.time; data.pickerarray[4] = tpdata.division; data.pickerindex = tpdata.index; for (let i = 0; i <=4; i++) { if (data.pickerarray[i].length - 1 < data.pickerindex[i]) { data.pickerindex[i] = data.pickerarray[i].length - 1; } } this.setdata(data); }, pickercancel: function (e) { // console.log("取消"); this.setdata({ pickerindex: this.data.chooseindex, pickerarray: this.data.choosearray }) }, }, // 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容 attached() { // 在组件实例进入页面节点树时执行 // 在组件实例进入页面节点树时执行 // this._oninit(); }, ready() { // console.log('进入ready外层节点=', this.data.date); this._oninit(); }, // 以下为新方法 >=2.2.3 lifetimes: { attached() { // 在组件实例进入页面节点树时执行 // this._oninit(); }, detached() { // 在组件实例被从页面节点树移除时执行 }, ready() { // console.log('进入ready节点=', this.data.date); this._oninit(); } } })
2.pickertime.wxml内容
<!--component/pickertime/pickertime.wxml--> <view> <picker disabled="{{disabled}}" mode="multiselector" bindchange="pickerchange" bindcolumnchange="pickercolumnchange" bindcancel ="pickercancel" value="{{pickerindex}}" range="{{pickerarray}}" range-key="{{'name'}}"> <view> {{placeholder}} </view> </picker> </view>
在页面中使用
1,demo.json中引入组件
{ "navigationbartitletext": "demo", "usingcomponents": { "pickertime": "/components/pickertime/pickertime" } }
2,页面中使用 wxml
<pickertime placeholder="{{placeholder}}" date="{{date}}" bind:onpickerchange="onpickerchange" startdate="{{startdate}}" enddate="{{enddate}}"> </pickertime>
3.demo.js
data:{ date: '2019-01-01 13:37', startdate: '2019-01-01 12:37', enddate: '2029-03-12 12:38', placeholder: '请选择时间' }, onpickerchange: function (e) { this.setdata({ date: e.detail.datestring //选中的数据 }) }, todouble: function (num) { if (num >= 10) {//大于10 return num; } else {//0-9 return '0' + num } }, gettoday: function () { let date = new date(); let year = date.getfullyear(); let month = date.getmonth() + 1; let day = date.getdate(); return year + '-' + this.todouble(month) + '-' + this.todouble(day) }, //监听页面加载 onload: function (options) { let daytime= this.gettoday(); let dayhour = "18:00"; let endedtime1 = daytime + " " + dayhour; this.setdata({ date: endedtime1 }) },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: ES6中 对字符串增强