微信小程序----日期时间选择器(年月日时分秒)

蔚落 2022-04-02 11:42 1258阅读 0赞

<view class="tui-picker-content">
      <view class="tui-picker-name">日期时间选择器（精确到秒）</view>
      <picker mode="multiSelector" value="{
       {dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{
       {dateTimeArray}}">
        <view class="tui-picker-detail">
          选择日期时间: {
       {dateTimeArray[0][dateTime[0]]}}-{
       {dateTimeArray[1][dateTime[1]]}}-{
       {dateTimeArray[2][dateTime[2]]}} {
       {dateTimeArray[3][dateTime[3]]}}:{
       {dateTimeArray[4][dateTime[4]]}}:{
       {dateTimeArray[5][dateTime[5]]}}
        </view>
      </picker>
    </view>

var dateTimePicker = require('../../dateTimePicker.js');
    
    Page({
      data: {
        date: '2018-10-01',
        time: '12:00',
        dateTimeArray: null,
        dateTime: null,
        dateTimeArray1: null,
        dateTime1: null,
        startYear: 2000,
        endYear: 2050
      },
      onLoad() {
        // 获取完整的年月日 时分秒，以及默认显示的数组
        var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
        var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
        // 精确到分的处理，将数组的秒去掉
        var lastArray = obj1.dateTimeArray.pop();
        var lastTime = obj1.dateTime.pop();
    
        this.setData({
          dateTime: obj.dateTime,
          dateTimeArray: obj.dateTimeArray,
          dateTimeArray1: obj1.dateTimeArray,
          dateTime1: obj1.dateTime
        });
      },
      changeDate(e) {
        this.setData({ date: e.detail.value });
      },
      changeTime(e) {
        this.setData({ time: e.detail.value });
      },
      changeDateTime(e) {
       const that=this;
        console.log("打印时间~~~~~~~~~~~~~~~~~~~~~", this.data.dateTimeArray);
        
        this.setData({ dateTime: e.detail.value });
    
        console.log("打印时间", this.data.dateTime);
    
        var aaa1 = that.data.dateTime[0];
        var aaa2 = that.data.dateTime[1];
        var aaa3 = that.data.dateTime[2];
        var aaa4 = that.data.dateTime[3];
        var aaa5 = that.data.dateTime[4];
        var aaa6 = that.data.dateTime[5];
    
    
        var time1 = that.data.dateTimeArray[0][aaa1];
        var time2 = that.data.dateTimeArray[1][aaa2];
        var time3 = that.data.dateTimeArray[2][aaa3];
        var time4 = that.data.dateTimeArray[3][aaa4];
        var time5 = that.data.dateTimeArray[4][aaa5];
        var time6 = that.data.dateTimeArray[5][aaa6];
        var time = time1 + '-' + time2 + '-' + time3 + ' ' + time4 + ':' + time5 + ':' + time6;
        console.log("时间88888888888888888888888888888:", time);
    
      },
      changeDateTime1(e) {
        this.setData({ dateTime1: e.detail.value });
      },
      changeDateTimeColumn(e) {
        var arr = this.data.dateTime, dateArr = this.data.dateTimeArray;
    
        arr[e.detail.column] = e.detail.value;
        dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
    
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr
        });
      },
      changeDateTimeColumn1(e) {
        var arr = this.data.dateTime1, dateArr = this.data.dateTimeArray1;
    
        arr[e.detail.column] = e.detail.value;
        dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
    
        this.setData({
          dateTimeArray1: dateArr,
          dateTime1: arr
        });
      }
    })

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
    }

项目好需要这个效果，大佬写的很牛逼。

转载地址：[https://blog.csdn.net/m0\_38082783/article/details/78921283][https_blog.csdn.net_m0_38082783_article_details_78921283]

[https_blog.csdn.net_m0_38082783_article_details_78921283]: https://blog.csdn.net/m0_38082783/article/details/78921283

发表评论取消回复

表情：

评论列表（有 0 条评论，1258人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Java的日期时间API：年月日时分秒

在Java中，处理日期和时间的API已经从`java.util.Date`和`java.util.Calendar`发展到了`java.time`包，后者提供了更加强大和灵活的

向右看齐/ 2024年11月07日 03:21/ 0 赞/ 54 阅读

相关微信小程序- 选择器合并时间和日期

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 从底部弹起的滚动选择器。...

àì夳堔傛蜴生んèń/ 2024年04月17日 16:58/ 0 赞/ 117 阅读

相关 picker年月日时分秒时间选择器组件(新增插槽初始化,年月日时分秒与时分秒可配置)

1.组件页面wepy的 <style lang="scss"> .text{ font-size: 14px; } </style

ゞ浴缸里的玫瑰/ 2023年07月24日 03:09/ 0 赞/ 20 阅读

相关微信小程序日期选择器显示当前系统年月日时分

小程序vant-weapp的日期选择器的使用（年月日时分）话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Git

朴灿烈づ我的快乐病毒、/ 2022年10月12日 01:25/ 0 赞/ 420 阅读

相关微信小程序－vant-weapp日期选择器的使用（年月日时分）

小程序vant-weapp的日期选择器的使用（年月日时分）话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Git

约定不等于承诺〃/ 2022年10月11日 01:00/ 0 赞/ 71 阅读

相关微信小程序日期选择器显示当前系统年月日时分

小程序vant-weapp的日期选择器的使用(年月日时分) 话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Git

﹏ヽ暗。殇╰゛Y/ 2022年10月09日 15:30/ 0 赞/ 971 阅读

相关微信小程序－vant-weapp日期选择器的使用（年月日时分）

小程序vant-weapp的日期选择器的使用(年月日时分) 话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Git

怼烎@/ 2022年10月08日 11:18/ 0 赞/ 1307 阅读

相关 EasyUI时间插件----年月日，年月日时分秒

input标签使用easyUI时间插件还是挺方便的，下面是我自己的一点点总结，感觉没什么，但还是写出来吧。 <……………………………………………………………………………………

﹏ヽ暗。殇╰゛Y/ 2022年06月07日 08:44/ 0 赞/ 608 阅读

相关微信小程序----日期时间选择器(年月日时分秒)

<view class="tui-picker-content"> <view class="tui-picker-name">日期时间选择器（精确到秒）<

蔚落/ 2022年04月02日 11:42/ 0 赞/ 1259 阅读

相关微信小程序--截取时间年月日

主要是： let dataList = res.data.result.data; //获取到的数据 dataList.forEach((item)

客官°小女子只卖身不卖艺/ 2022年03月16日 18:05/ 1 赞/ 657 阅读