Chinaunix首页 | 论坛 | 博客
  • 博客访问: 569026
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: 其他平台

2019-05-24 12:04:35


点击(此处)折叠或打开

  1. <view>
  2.   <picker mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange" bindcancel ="pickerCancel" value="{{pickerIndex}}" range="{{pickerArray}}" range-key="{{'name'}}">
  3.     <view>
  4.       {{dateString}}
  5.     </view>
  6.   </picker>
  7. </view>


点击(此处)折叠或打开

  1. // pages/time/time.js
  2. Page({

  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     pickerArray: [],//日期控件数据list
  8.     pickerIndex: [],//日期控件选择的index
  9.     chooseIndex: [],//日期控件确认选择的index
  10.     chooseArray: [],//日期控件确认选择后的list
  11.     dateString: '',//页面显示日期
  12.   },

  13.   /**
  14.    * 生命周期函数--监听页面加载
  15.    */
  16.   onLoad: function (options) {
  17.     var _this =this;
  18.     _this._onInit();
  19.   },
  20.   _onInit() {
  21.     let date = new Date();
  22.     if (this.data.date != null) {
  23.       let str = this.data.date;
  24.       str = str.replace(/-/g, "/");
  25.       date = new Date(str);
  26.     }
  27.     let pickerArray = this.data.pickerArray;
  28.     // console.log(date.getFullYear());
  29.     //默认选择3年内
  30.     let year = [];
  31.     let startDate = date.getFullYear() - 1;
  32.     let endDate = date.getFullYear() + 1;
  33.     if (this.data.startDate != null) {
  34.       //如果存在开始时间,则默认设置结束时间为2099
  35.       startDate = this.data.startDate;
  36.       endDate = 2099;
  37.     }
  38.     if (this.data.endDate != null && this.data.startDate == null) {
  39.       //如果存在结束时间,不存在开始时间 则默认设置开始时间为1900
  40.       endDate = this.data.endDate;
  41.       startDate = 1900;
  42.     }
  43.     if (this.data.endDate != null && this.data.startDate != null) {
  44.       endDate = this.data.endDate;
  45.     }
  46.     if (startDate > date.getFullYear() || endDate < date.getFullYear()) {
  47.       this.setData({
  48.         dateString: "默认日期不在时间范围内"
  49.       })
  50.       return;
  51.     }
  52.     for (let i = startDate; i <= endDate; i++) {
  53.       year.push({ id: i, name: i + "年" });
  54.     }
  55.     // console.log(year);
  56.     let month = [];
  57.     for (let i = 1; i <= 12; i++) {
  58.       month.push({ id: i, name: i + "月" });
  59.     }
  60.     // console.log(month);
  61.     let dayNum = this._getNumOfDays(date.getFullYear(), date.getMonth() + 1);
  62.     let day = [];
  63.     for (let i = 1; i <= dayNum; i++) {
  64.       day.push({ id: i, name: i + "日" });
  65.     }
  66.     // console.log(day);
  67.     let time = [];
  68.     for (let i = 0; i <= 23; i++) {
  69.       if (i < 10) {
  70.         time.push({ id: i, name: "0" + i + "时" });
  71.       } else {
  72.         time.push({ id: i, name: i + "时" });
  73.       }
  74.     }
  75.     // console.log(time);
  76.     let division = [];
  77.     for (let i = 0; i <= 59; i++) {
  78.       if (i < 10) {
  79.         division.push({ id: i, name: "0" + i + "分" });
  80.       } else {
  81.         division.push({ id: i, name: i + "分" });
  82.       }
  83.     }
  84.     // console.log(division);
  85.     pickerArray[0] = year;
  86.     pickerArray[1] = month;
  87.     pickerArray[2] = day;
  88.     pickerArray[3] = time;
  89.     pickerArray[4] = division;
  90.     let mdate = {
  91.       date: date,
  92.       year: date.getFullYear() + '',
  93.       month: date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + '',
  94.       day: date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '',
  95.       time: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + '',
  96.       division: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ''
  97.     }
  98.     mdate.dateString = mdate.year + '-' + mdate.month + '-' + mdate.day + ' ' + mdate.time + ':' + mdate.division;
  99.     this.setData({
  100.       pickerArray,
  101.       pickerIndex: [date.getFullYear() - startDate, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()],
  102.       chooseIndex: [date.getFullYear() - startDate, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()],
  103.       chooseArray: pickerArray,
  104.       dateString: this.data.placeholder != null ? this.data.placeholder : mdate.dateString
  105.     })
  106.     // console.log(date);
  107.     //设置placeholder属性后 初始化不返回日期
  108.     if (this.data.placeholder == null) {
  109.       this.triggerEvent('onPickerChange', mdate);
  110.     }
  111.     // console.log(this.data.pickerArray);
  112.     // console.log(this._getNumOfDays(2018, 10));
  113.   },
  114.    /**
  115.      *
  116.      * 获取本月天数
  117.      * @param {number} year
  118.      * @param {number} month
  119.      * @param {number} [day=0] 0为本月0最后一天的
  120.      * @returns number 1-31
  121.      */
  122.     _getNumOfDays(year, month, day = 0) {
  123.       return new Date(year, month, day).getDate()
  124.     },
  125.     pickerChange: function (e) {
  126.       // console.log('picker发送选择改变,携带值为', e.detail.value)
  127.       let indexArr = e.detail.value;
  128.       // console.log(this.data.pickerArray[0][indexArr[0]].id + "\n" + this.data.pickerArray[1][indexArr[1]].id + "\n" + this.data.pickerArray[2][indexArr[2]].id);
  129.       const year = this.data.pickerArray[0][indexArr[0]].id;
  130.       const month = this.data.pickerArray[1][indexArr[1]].id;
  131.       const day = this.data.pickerArray[2][indexArr[2]].id;
  132.       const time = this.data.pickerArray[3][indexArr[3]].id;
  133.       const division = this.data.pickerArray[4][indexArr[4]].id;
  134.       let date = {
  135.         date: new Date(year + '-' + month + '-' + day + ' ' + time + ':' + division),
  136.         year: year + '',
  137.         month: month < 10 ? '0' + month : month + '',
  138.         day: day < 10 ? '0' + day : day + '',
  139.         time: time < 10 ? '0' + time : time + '',
  140.         division: division < 10 ? '0' + division : division + ''
  141.       }
  142.       date.dateString = date.year + '-' + date.month + '-' + date.day + ' ' + date.time + ':' + date.division;
  143.       // console.log(date);
  144.       this.setData({
  145.         chooseIndex: e.detail.value,
  146.         chooseArray: this.data.pickerArray,
  147.         dateString: date.dateString
  148.       })
  149.       this.triggerEvent('onPickerChange', date);
  150.     },
  151.     pickerColumnChange: function (e) {
  152.       // console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
  153.       var data = {
  154.         pickerArray: this.data.pickerArray,
  155.         pickerIndex: this.data.pickerIndex
  156.       };
  157.       data.pickerIndex[e.detail.column] = e.detail.value;
  158.       if (e.detail.column == 1) {
  159.         let dayNum = this._getNumOfDays(data.pickerArray[0][data.pickerIndex[0]].id, e.detail.value + 1);
  160.         let day = [];
  161.         for (let i = 1; i <= dayNum; i++) {
  162.           day.push({ id: i, name: i + "日" });
  163.         }
  164.         if (dayNum < data.pickerIndex[2] + 1) {
  165.           data.pickerIndex[2] = dayNum - 1;
  166.         }
  167.         data.pickerArray[2] = day;
  168.       }
  169.       this.setData(data);
  170.     },
  171.     pickerCancel: function (e) {
  172.       // console.log("取消");
  173.       this.setData({
  174.         pickerIndex: this.data.chooseIndex,
  175.         pickerArray: this.data.chooseArray
  176.       })
  177.     },
  178.   
  179. })


阅读(762) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册