小程序时间选择，精确到秒（年-月-日时：分：秒），限制所选时间不能小于当前时间

最新推荐文章于 2024-05-16 17:01:56 发布

leo_jk

最新推荐文章于 2024-05-16 17:01:56 发布

阅读量4.5k

点赞数 2

分类专栏：小程序文章标签：小程序picker时间选择

本文链接：https://blog.csdn.net/leo_jk/article/details/89599267

版权

小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

小程序直接提供的时间选择实例没有精确到秒的，需要我们自己去扩展使用多行选择器，如下是精确到秒的时间选择效果图：

一、首先我需要用到 picker表单组件多列选择器

多列选择器中5个属性设置对于我们用多列选择非常重要：

1.mode="multiSelector" //选择器类型mode 多列选择 multiSelector

2.range="{{dateTimeArray}}" //是一个保存有可供选择年月日时分秒的二维数组，具体表达如下：

[
 ['2019'"2020", "2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029"],
 ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
 ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
 ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
 ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"],
 ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"],
]

3.value="{{dateTime}}" //dateTime 是一个一维数组，表达的是dateTimeArray 每列中选择的位置，比如[0,0,0,0,0,0],则是表达为选择了 dateTimeArray 数组中的 2019-01- 01 00 ：00： 00

4.bindchange="changeDateTime" //这是一个绑定事件 changeDateTime 方法名，这个方法是用于监听每列更改了哪些选择位置的函数，这个函数在js中定义，主要是能获取到选择后的一维数组 [1,3,5,3,2,20], 也就是可以把 dateTime设置为这个数组了

5.bindcolumnchange="changeDateTimeColumn" //绑定事件，这个方法是用于监听当每一列有翻动的话就会触发这个函数，里面的参数，函数定义到js文件里形参为e，e.detail.column - 翻动了哪一列， e.detail.value - 翻动的那一列到了哪个位置，即下标位置

xml代码如下：

    
    <view class="item">
      <text class="t1">时间：</text>
            <picker 
            class='alarm_picker' 
            mode="multiSelector" 
            value="{{dateTime}}" 
            bindchange="changeDateTime" 
            bindcolumnchange="changeDateTimeColumn" 
            range="{{dateTimeArray}}">

          <view class="picker">
        {{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>

二、需要同时引入js文件到util下，这个文件名为dateTimePicker.js 网上可以下载，这个文件可以初始化正确的年月日时分秒数组，即提供 dateTime 和 dateTimeArray 两个数组的初始数据，代码不多，可复制代码放到util文件夹下

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
}

三、在页面js里引入文件，并初始化数据，以及翻动操作对应触发函数逻辑，具体代码如下，代码后面解释逻辑

var dateTimePicker = require('../../../utils/dateTimePicker.js'); //引入dateTimePicker 
var dateObj = new Date();  //获取当前时间对象
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
    date: '2018-10-01',
    time: '12:00',
    dateTimeArray: null, //二维数组，保存年月日时分秒各列能选择的数据
    dateTime: null,   //用户保存翻动后时间的位置 
    defaultTime:null, //用户保存当前默认时间的位置
    startYear: 1970, //初始化开始年份
    endYear: 2050,   //初始化结束年份
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取完整的年月日 时分秒，以及默认显示的数组
    var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
    // 精确到分的处理，将数组的秒去掉
    var lastArray = obj1.dateTimeArray.pop();
    var lastTime = obj1.dateTime.pop();

    this.setData({
      defaultTime: obj.dateTime,
      dateTime: obj.dateTime,
      dateTimeArray: obj.dateTimeArray,
    });
    
  },


  editTime() {
    let editTime = `${that.data.dateTimeArray[0][that.data.dateTime[0]]}-${that.data.dateTimeArray[1][that.data.dateTime[1]]}-${that.data.dateTimeArray[2][that.data.dateTime[2]]} ${that.data.dateTimeArray[3][that.data.dateTime[3]]}:${that.data.dateTimeArray[4][that.data.dateTime[4]]}:${that.data.dateTimeArray[5][that.data.dateTime[5]]}`
    console.log(editTime)//时间拼接 （格式：2018-09-19 17:30:55）
  },

  //选择时间方法
  changeDate(e) {
    this.setData({
      date: e.detail.value
    });
  },
  changeTime(e) {
    this.setData({
      time: e.detail.value
    });
  },

  changeDateTime(e) {
    console.log(e);
    this.setData({
      dateTime: e.detail.value
    });
  },

  //翻动弹窗时
  changeDateTimeColumn(e) {
    var arr   = this.data.dateTime,
      dateArr = this.data.dateTimeArray;
    console.log(arr);
    console.log(dateArr);
    var year  = dateArr[0][arr[0]];
    var month = dateArr[1][arr[1]];
    var date  = dateArr[2][arr[2]];
    var hour  = dateArr[3][arr[3]];
    var min   = dateArr[4][arr[4]];
    var sec   = dateArr[5][arr[5]];
    
    //如果当前翻动的列 小于默认时间则跳转回默认更改
    //翻动了年
    var default_times = dateObj.getTime();
    if(e.detail.column == 0) {
      year = dateArr[0][e.detail.value];
      var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
  
      //选择的年份 小于当前年份，则将年份拉回当前年份
      if (current_times < default_times ) {
        arr = this.data.defaultTime;
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr
        });
        return false;
      }
    } 
    //翻动了月份
    if (e.detail.column == 1) {
      month = dateArr[1][e.detail.value];
      var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
      //选择的月份 小于当前月份，则将年份拉回当前月份
      if (current_times < default_times) {
    
        arr[1] = this.data.defaultTime[1];
        arr[2] = this.data.defaultTime[2];
        arr[3] = this.data.defaultTime[3];
        arr[4] = this.data.defaultTime[4];
        arr[5] = this.data.defaultTime[5];
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr
        });
        return false;
      }
    }
    //翻动了日
    if (e.detail.column == 2) {
      date = dateArr[2][e.detail.value];
      var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
      if (current_times < default_times) {

        arr[2] = this.data.defaultTime[2];
        arr[3] = this.data.defaultTime[3];
        arr[4] = this.data.defaultTime[4];
        arr[5] = this.data.defaultTime[5];
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr
        });
        return false;
      }
    }
    //翻动了时
    if (e.detail.column == 3) {
      hour = dateArr[3][e.detail.value];
      var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
      if (current_times < default_times) {

        arr[3] = this.data.defaultTime[3];
        arr[4] = this.data.defaultTime[4];
        arr[5] = this.data.defaultTime[5];
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr
        });
        return false;
      }
    }
    //翻动了分
    if (e.detail.column == 4) {
      min = dateArr[4][e.detail.value];
      var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
      if (current_times < default_times) {
        arr[4] = this.data.defaultTime[4];
        arr[5] = this.data.defaultTime[5];
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr
        });
        return false;
      }
    }
    //翻动了秒
    if (e.detail.column == 5) {
      sec = dateArr[5][e.detail.value];
      var current_times = new Date((year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec).replace(/-/g, '/')).getTime();
      if (current_times < default_times) {
        arr[5] = this.data.defaultTime[5];
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr
        });
        return false;
      }
    }

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

说明一下：changeDateTimeColumn 这个函数里，就是在翻动各列时，检查所选择的时间是不是当大于当前时间，如果小于当前时间则将各滚动条重置回默认的当前时间放到数组中，如果是大于当前时间则进行后续处理，将选定的时间放到数组中

leo_jk

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
小程序时间选择，精确到秒（年-月-日时：分：秒），限制所选时间不能小于当前时间

小程序直接提供的时间选择实例没有精确到秒的，需要我们自己去扩展使用多行选择器，如下是精确到秒的时间选择效果图：一、首先我需要用到 picker表单组件多列选择器多列选择器中5个属性设置对于我们用多列选择非常重要：1.mode="multiSelector" //选择器类型mode 多列选择multiSelector2.range="{{dateTimeAr...
复制链接

扫一扫