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;
    }

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

  • 相关阅读:
    PyQt作品 – PingTester – 多点Ping测试工具
    关于和技术人员交流的一二三
    Pyjamas Python Javascript Compiler, Desktop Widget Set and RIA Web Framework
    Hybrid Qt applications with PySide and Django
    pyjamas build AJAX apps in Python (like Google did for Java)
    PyQt 维基百科,自由的百科全书
    InfoQ:请问为什么仍要选择Java来处理后端的工作?
    Eric+PyQt打造完美的Python集成开发环境
    python select module select method introduce
    GUI Programming with Python: QT Edition
  • 原文地址:https://www.cnblogs.com/combat/p/12365569.html
Copyright © 2011-2022 走看看