小程序日期加时间筛选组件

新建component->date-time-picker
.wxml

<picker mode="multiSelector" class="{{className}}" name="{{name}}" value="{{multiSelectdArray}}" range="{{multiDateTime}}" bindcolumnchange="handleColumnChange" bindchange="handleValueChange" bindcancel="handleCancel"><slot></slot>
</picker>

.json

{"component": true,"usingComponents": {}
}

.js

//date-time-picker.js
// component/date-time-picker/date-time-picker.js
Component({options: {styleIsolation: 'apply-shared' //调用页面控制组件样式},properties: {name: String,className: String,startYear: String,endYear: String,value: String},/*** 组件的初始数据*/data: {multiArray:[],multiSelectdArray: [0, 0, 0, 0, 0],},observers: {},ready: function(e) {this._formDateTime();},/*** 组件的方法列表*/methods: {//格式化日期_formDateTime(){// 默认开始显示数据var nowDateTime = this.properties.value ? [...this.properties.value.split(' ')[0].split('-'), ...this.properties.value.split(' ')[1].split(':')] : this._getNewDateArry();var multiDateTime = [[],[],[],[],[]];var startYear = this.properties.startYear || nowDateTime[0];var endYear = this.data.properties || parseInt(nowDateTime[0]) + 5;// 处理联动列表数据/* 年月日 时分秒 */ multiDateTime[0] = this._getLoopArray(startYear, endYear, '年');multiDateTime[1] = this._getLoopArray(1, 12, '月');multiDateTime[2] = this._getMonthDay(nowDateTime[0], nowDateTime[1], '日');multiDateTime[3] = this._getLoopArray(0, 23, '时');multiDateTime[4] = this._getLoopArray(0, 59, '分');// multiDateTime[5] = this._getLoopArray(0, 59, '秒');var multiSelectdArray = this._getMultiSelectdArray(multiDateTime, nowDateTime);this.setData({multiDateTime: multiDateTime,multiSelectdArray: multiSelectdArray,});},/* 查询选中状态数组 */_getMultiSelectdArray(multiDateTime, nowDateTime){let multiSelectdArray = this.data.multiSelectdArray;for (let i in multiDateTime) {for (let k in multiDateTime[i]) {var a = multiDateTime[i][k];if(a.replace(/[\u4e00-\u9fa5]/g, '') == nowDateTime[i]){multiSelectdArray[i] = k;}}}return multiSelectdArray;},/* 获取起始数组 */_getLoopArray(start, end, name){var name = name || '';var start = start || 0;var end = end || 1;var array = [];for (var i = start; i <= end; i++) {array.push(this._withData(i) + name);}return array;},/* 获取每月天数 */_getMonthDay(year, month, name){var name = name || 0;var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;switch (month) {case '01':case '03':case '05':case '07':case '08':case '10':case '12':array = this._getLoopArray(1, 31, name)break;case '04':case '06':case '09':case '11':array = this._getLoopArray(1, 30, name)break;case '02':array = flag ? this._getLoopArray(1, 29, name) : this._getLoopArray(1, 28, name)break;default:array = '月份格式不正确，请重新输入！'}return array;},/* 获取当前时间 */_getNewDateArry(){// 当前时间的处理var newDate = new Date();var year = this._withData(newDate.getFullYear()),mont = this._withData(newDate.getMonth() + 1),date = this._withData(newDate.getDate()),hour = this._withData(newDate.getHours()),minu = this._withData(newDate.getMinutes());// seco = this._withData(newDate.getSeconds());return [year, mont, date, hour, minu];},_stringToDate(str) {str = str.replace(/-/g, "/");return new Date(str);},/* 数据左边加0 */_withData(param){return param < 10 ? '0' + param : '' + param;},/* 切换时间 */handleColumnChange(e) {var multiSelectdArray = this.data.multiSelectdArray;if(e.detail.column <= 1){var multiDateTime = this.data.multiDateTime;var year = this.data.multiArray[multiSelectdArray[0]];var month = this._withData(e.detail.value + 1);multiDateTime[2] = this._getMonthDay(year, month, '日');this.setData({multiDateTime: multiDateTime});}multiSelectdArray[e.detail.column] = e.detail.value;this.setData({multiSelectdArray: multiSelectdArray});},/* 改变picker值 */handleValueChange(e){var _this = this;let dateArr = [], multiSelectdArray = [];for (let i in e.detail.value) {let v = _this.data.multiDateTime[i][e.detail.value[i]];v = v.replace(/[\u4e00-\u9fa5]/g, '');multiSelectdArray.push(e.detail.value[i]);dateArr.push(v.toString());}_this.setData({multiSelectdArray: multiSelectdArray //设置下拉选中状态});let defaultDateTime = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2] + " " + dateArr[3] + ":" + dateArr[4];_this.triggerEvent('change', {date: defaultDateTime})},/* 取消 */handleCancel(e){var _this = this;_this.triggerEvent('cancel', {})}}
})

页面引用时
.wxml

<date-time-picker value="{{value}}" startYear="2019" endYear="2030" bind:change="handleChange">{{value}}</date-time-picker>

.js


Page({/*** 页面的初始数据*/data: {value: ""},handleChange(e) {this.setData({value: e.detail.date})},
}),
getDate(){var now = new Date();var month = now.getMonth() + 1;var day = now.getDate();var hour = now.getHours();var min = now.getMinutes();if (month < 10) {month = "0" + month;}if (day < 10) {day = "0" + day;}if (hour < 10) {hour = "0" + hour;}if (min < 10) {min = "0" + min;}return now.getFullYear() + "-" + month + "-" + day + " " + hour + ":" + min},

小程序日期加时间筛选组件相关推荐

创建微信小程序日期和时间的组件
效果如下微信小程序 1.首先创建一个components,接着创建一个文件picker 2.在picker.wxml文件里写入: <picker mode="multiSelecto ...
微信小程序日期与时间选择器
最近在开发一款微信小程序,需要用到里面的时间选择器(picker),根据它本身的特点以及需要开发的内容,我对时间选择器做了一个简单的demo,大家可以看一下效果图. 效果图: 在微信小程序中,文件按照 ...
微信小程序 - 日期(起止)选择器组件
原文链接传送门 2019-01-03 : 修复了日期day-1,新增了年月日(除去时分秒),删除了不必要的touchmove 新增: column: ""(年月日) 配置: pi ...
小程序日期（日历）时间选择器组件
封装一个小程序日期(日历)时间选择器组件简要说明: 一共两个版本 ,date-time-picker 和 date-time-picker-plus. date-time-picker 弹窗层是 ...
微信小程序日期时分组件(年月日时分)--复制即用
微信小程序日期组件(年月日时分)–复制即用如图所示效果第一步新建picker组件文件 1,pickerTime.js组件代码内容 // component/pickerTime/pickerTim ...
微信小程序时间加法_微信小程序获取系统时间、时间戳、时间时间戳加减
微信小程序获取系统时间.时间戳.时间时间戳加减,微信小程序获取明天时间 //获取当前时间戳 var timestamp = Date.parse(new Date()); timestamp = ti ...
微信小程序日期午别排班表
微信小程序日期午别排班表 1.util.js //获取几天后日期 function dateCount(arg,date) {var date1 = arg;var date2 = new Date( ...
初级前端小程序项目加载速度优化
这份文字是根据近期团队做来问丁香医生 SPA 和丁香医生小程序加载速度优化的经历整理而成. 效果古人有一句话叫做:治感冒看疗效.既然是关于速度优化的,我们就先来看一下优化的效果. 来问丁香医生 ...
微信小程序渲染实时时间
微信小程序渲染实时时间 1.看看在框架目录中是否有util文件夹,它用来存放工具栏的JavaScript函数 2.在要获取时间的.js文件中加载util.js文件 3.在onload方法中,调用uti ...

小程序日期加时间筛选组件

小程序日期加时间筛选组件

小程序日期加时间筛选组件相关推荐

最新文章

热门文章