zoukankan      html  css  js  c++  java
  • 小程序时间选择器(精确到秒)

    本文章只作为个人的一个笔记和收藏!!

     效果:

    wxml:

    <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" range="{{dateTimeArray}}">
      <view class="tui-picker-detail" id="eventTime">
        日期: {{showDate}}
      </view>
    </picker>

    js:

    const app = getApp();
    const fn = app.global;
    import dateTimePicker from '../../../../utils/js/dateTimePicker.js';
    Page({
    
      /**
       * formatDateTime 封装格式化日期的方法
       * showDate 当前时间
       * dateTime 存储当前选择时间
       * dateTimeArray 存储时间数组
       * endYear 默认为2100,这里我是当前时间往后推10年
       */
      data: {
        showDate: fn.formatDateTime('yyyy-MM-dd hh:mm:ss', new Date()),
        dateTime: null,
        dateTimeArray: null,
        endYear: new Date().getFullYear() + 20
      },
      onLoad: function (options) {
        // 获取完整的年月日 时分秒,以及默认显示的数组
        // 1、开始年份使用默认 1978年
        // 2、结束年份
        // 3、当前显示时间
        var obj = dateTimePicker.dateTimePicker('', this.data.endYear, this.data.showDate);
        this.setData({
          dateTime: obj.dateTime,
          dateTimeArray: obj.dateTimeArray
        });
      },
      changeDateTime(e) {
        // arr此处使用新数据,否则数据不刷新
        var arr = e.detail.value, dateArr = this.data.dateTimeArray;
        dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
        let showDate = `${dateArr[0][arr[0]]}-${dateArr[1][arr[1]]}-${dateArr[2][arr[2]]} ${dateArr[3][arr[3]]}:${dateArr[4][arr[4]]}:${dateArr[5][arr[5]]}`;
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr,
          showDate: showDate
        });
      }
    })

    导入的dateTimePicker.js

    function withData(param) {
      return param < 10 ? '0' + param : '' + param;
    }
    function getLoopArray(start, end) {
      var start = start || 0;
      var end = end || 1;
      var array = [];
      for (var i = start; i <= end; i++) {
        array.push(withData(i));
      }
      return array;
    }
    function getMonthDay(year, month) {
      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 = getLoopArray(1, 31)
          break;
        case '04':
        case '06':
        case '09':
        case '11':
          array = getLoopArray(1, 30)
          break;
        case '02':
          array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
          break;
        default:
          array = '月份格式不正确,请重新输入!'
      }
      return array;
    }
    function getNewDateArry() {
      // 当前时间的处理
      var newDate = new Date();
      var year = withData(newDate.getFullYear()),
        mont = withData(newDate.getMonth() + 1),
        date = withData(newDate.getDate()),
        hour = withData(newDate.getHours()),
        minu = withData(newDate.getMinutes()),
        seco = withData(newDate.getSeconds());
    
      return [year, mont, date, hour, minu, seco];
    }
    function dateTimePicker(startYear, endYear, date) {
      // 返回默认显示的数组和联动数组的声明
      var dateTime = [], dateTimeArray = [[], [], [], [], [], []];
      var start = startYear || 1978;
      var end = endYear || 2100;
      // 默认开始显示数据
      var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
      // 处理联动列表数据
      /*年月日 时分秒*/
      dateTimeArray[0] = getLoopArray(start, end);
      dateTimeArray[1] = getLoopArray(1, 12);
      dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
      dateTimeArray[3] = getLoopArray(0, 23);
      dateTimeArray[4] = getLoopArray(0, 59);
      dateTimeArray[5] = getLoopArray(0, 59);
    
      dateTimeArray.forEach((current, index) => {
        dateTime.push(current.indexOf(defaultDate[index]));
      });
    
      return {
        dateTimeArray: dateTimeArray,
        dateTime: dateTime
      }
    }
    module.exports = {
      dateTimePicker: dateTimePicker,
      getMonthDay: getMonthDay
    }

    格式化日期 formatDateTime 

    fmt传入格式 yyyy-MM-dd hh:mm:ss 可根据自己需求更改

    /*
     * 格式化时间
     */
    function formatDateTime(fmt, date) { 
      var o = {
        "M+": date.getMonth() + 1, //月份   
        "d+": date.getDate(), //
        "h+": date.getHours(), //小时   
        "m+": date.getMinutes(), //
        "s+": date.getSeconds(), //
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度   
        "S": date.getMilliseconds() //毫秒   
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    }

    本文章到此结束,自己做个笔记,因为看了其他人的博客都很乱的感觉

  • 相关阅读:
    vim配置
    git rebase
    mongodb的docker-compose.yml
    Nginx配置BrowserRouter跟随react-router
    Flux Architecture & Redux Data Flow & redux & react-redux PPT
    from acwing 从算法数量推算算法复杂度
    evalRPN 逆波兰算术
    二分区间
    Flex布局
    Treap 模板
  • 原文地址:https://www.cnblogs.com/combat/p/12365569.html
Copyright © 2011-2022 走看看