1. 首页
  2. 文章中心
  3. 小程序

小程序自定义picker实现年月日时分和年月日时分秒时间选择器

492 阅读 0 评论
我是靠谱客的博主 鲤鱼御姐，最近开发中收集的这篇文章主要介绍小程序自定义picker实现年月日时分和年月日时分秒时间选择器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

小程序自定义picker实现年月日时分和年月日时分秒时间选择器

最近在做公司的一个小程序项目中需要用到选择年月日时分秒的地方，然后我去小程序开发文档上看了看好像没有直接可以选择年月日时分秒的选择器组件，所以周末我就花了些时间封装了一个可以选择年月日时分秒和年月日时分的时间选择器组件。希望能够帮助到有需要的人！

代码我已经提交到码云上面了，可以通过这个链接下载我的代码：
https://gitee.com/yuanyifei666/wxDateTimePicker.git

下载后在components目录下的date-time-picker就是我封装的时间选择器组件了
在这里插入图片描述
直接把我的这date-time-picker目录复制到你的项目里，然后在要使用到该组件的页面的json文件中引入该组件，注意路径要正确！(我这里以index页面为例子)

{
  "usingComponents": {
    "date-time-picker": "/components/date-time-picker/index"
  },
  "navigationBarTitleText": "封装时间选择器组件"
}

然后在index.wxml文件中使用该组件

<!--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>

属性说明：
1、mode：选择器类型
mode 的合法值：
dateminute： 年月日时分选择器(2019-11-30 11:03)
datetime: 时间选择器(2019-11-30 11:03:17)
2、value：选择器的值
3、bindchange：value 改变时触发 change 事件，可以获得选择的值

index.js文件里的代码如下：

//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
    })
  }
})

以上就是组件简单的使用，下面就是该组件具体的实现代码了
js代码：

// 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}sd{2}:d{2}:d{2}$/
      const munithReg = /^d{4}-d{2}-d{2}sd{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
}

json文件中的代码:

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

wxml文件中的代码:

<!--components/date-time-picker/index.wxml-->
<picker mode="multiSelector" range="{{rangeList}}" value="{{rangeValue}}"
  bindchange="selectChangeFn" bindcolumnchange="selectColumnChangeFn">
  <slot></slot>
</picker>

wxss文件中就没有样式了，代码就这么多，也很简单，如果哪位大佬觉得我写的代码有问题的话还望多多指正，谢谢！

最后

以上就是鲤鱼御姐为你收集整理的小程序自定义picker实现年月日时分和年月日时分秒时间选择器的全部内容，希望文章能够帮你解决小程序自定义picker实现年月日时分和年月日时分秒时间选择器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(325)

相关文章

linux 服务器时间校正
linux 服务器时间校正
纯 CSS 实现 time-picker 效果
纯 CSS 实现 time-picker 效果
element-ui 组件DateTimePicker使用（选择今天及以后的范围+开始和结束时间分开传给后台+回显+编辑页面改变回显问题）
element-ui 组件DateTimePicker使用（选择今天及以后的范围+开始和结束时间分开传给后台+回显+编辑页面改变回显问题）
用a-time-picker写一个时间范围选择器
用a-time-picker写一个时间范围选择器
小程序自定义picker实现年月日时分和年月日时分秒时间选择器
小程序自定义picker实现年月日时分和年月日时分秒时间选择器
ElementUI TimePicker固定时间范围，开始时间小于结束时间一、概述二、代码实现
ElementUI TimePicker固定时间范围，开始时间小于结束时间一、概述二、代码实现
Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。
Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。
关于Ant-design for vue中的date-picker和time-picker组件的总结
关于Ant-design for vue中的date-picker和time-picker组件的总结

评论列表共有 0 条评论

立即
投稿
返回
顶部