创建微信小程序日期和时间的组件

效果如下

微信小程序

1.首先创建一个components，接着创建一个文件picker

2.在picker.wxml文件里写入：

<picker

mode="multiSelector"

range="{{rangeList}}"

value="{{rangeValue}}"

bindchange="selectChangeFn"

bindcolumnchange="selectColumnChangeFn">

</picker>

3.在picker.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

}

4.然后在你要用到这个组件的json文件里引入进来（注意你的components是在你的根目录下，不然会找不到的）

{

"usingComponents": {

"Picker":"../../../../components/Picker/Picker"

}

5.在你要用到这个组件的wxml文件里写下：

<view>

<view class="show-date-time-box">开始时间: {{starTime}}</view>

</Picker>

<view class="show-date-time-box">结束时间: {{overTime}}</view>

</Picker>

</view>

6.在js文件里写下：

page({

data:{

starTime: "", //开始时间

overTime: "", //结束时间

//开始时间

hourChange: function (e) {

console.log(e)

this.setData({

starTime: e.detail.value

})

//结束时间

bindoverTimeChange: function (e) {

console.log('picker发送选择改变，携带值为', e.detail.value)

this.setData({

overTime: e.detail.value

})

)}

创建微信小程序日期和时间的组件相关推荐

小程序日期加时间筛选组件
小程序日期加时间筛选组件新建component->date-time-picker .wxml <picker mode="multiSelector" class= ...
微信小程序日期与时间选择器
最近在开发一款微信小程序,需要用到里面的时间选择器(picker),根据它本身的特点以及需要开发的内容,我对时间选择器做了一个简单的demo,大家可以看一下效果图. 效果图: 在微信小程序中,文件按照 ...
微信小程序 - 日期(起止)选择器组件
原文链接传送门 2019-01-03 : 修复了日期day-1,新增了年月日(除去时分秒),删除了不必要的touchmove 新增: column: ""(年月日) 配置: pi ...
微信小程序日期午别排班表
微信小程序日期午别排班表 1.util.js //获取几天后日期 function dateCount(arg,date) {var date1 = arg;var date2 = new Date( ...
微信小程序时间加法_微信小程序获取系统时间、时间戳、时间时间戳加减
微信小程序获取系统时间.时间戳.时间时间戳加减,微信小程序获取明天时间 //获取当前时间戳 var timestamp = Date.parse(new Date()); timestamp = ti ...
微信小程序渲染实时时间
微信小程序渲染实时时间 1.看看在框架目录中是否有util文件夹,它用来存放工具栏的JavaScript函数 2.在要获取时间的.js文件中加载util.js文件 3.在onload方法中,调用uti ...
java创建微信小程序二维码
创建微信小程序二维码有两个接口需要一个是获取tocken的接口一个是生成二维码的接口获取tocken接口 //**********填写你的小程序appid 和 secret public sta ...
微信小程序日期时分组件(年月日时分)--复制即用
微信小程序日期组件(年月日时分)–复制即用如图所示效果第一步新建picker组件文件 1,pickerTime.js组件代码内容 // component/pickerTime/pickerTim ...
微信小程序日期转换时间戳
微信小程序日期转换时间戳安卓正常,IOS需要转换. 微信小程序内,字符串时间转换为时间戳如果字符串格式为 "2020-02-02 15:35:08",此时直接 new Da ...

创建微信小程序日期和时间的组件

创建微信小程序日期和时间的组件相关推荐

最新文章

热门文章