支付宝小程序日期选择组件的日期选择器包

最近在支付宝小程序(以下简称小程序)的开发过程中，发现小程序的日期选择组件不太好用。比如在安卓和IOS设备上，风格明显不同。因为小程序调用的这个组件是系统的原生组件，会有一些区别。另外，applet提供的日期组件不符合我目前的业务需求3360。

这个日期是交货时间。

用户只能选择日期范围，即当天(今天，明天)后两天得日期，时间为上午9: 00到下午18:00 10小时.

因为是快递送达，所以可选时间点为当前时间点后2小时(例如当前时间为11点，用户可以选择的最早时间为13点)。

如果当前时间晚于下午18: 00，用户应该可以看到明天和后天的时间点。

根据上述要求，借助小程序的picker-view组件，进行二次打包，并对以下组件进行打包。

示例

项目结构

.-readme.md -app.acss -app.js -app.json -components//component目录-datetime pick有必要在用户文件中引入 dateTimePicker.acss //组件默认样式，除非有特殊需要，一般情况下，不需要修改datetimepicker.axml//component的默认结构 dateTimePicker.js //组件js dateTimePicker.json //组件配置信息 要生成所需的日期数组 moment.min.js //时间生成使用moment.js pages//示例目录索引索引. acss 索引. axml 索引. js 索引. json复制代码

使用说明

支付宝小程序组件引用方法及说明，请参考支付宝自定义组件查看。

Pages/index/index.json需要配置usingComponents并填写组件路径。

{'defaultTitle': '日期选取器演示'，'使用组件' : { '选取器' : '././Components/Datetime Picker/Datetime Picker ' } }将代码页/index/index.js复制到基本文件中，详细配置和说明请参考js。

//介绍基本的初始导入日期选择器././components/datetime picker/date picker base ' copy code page/index/index . axml使用选取器组件。

Picker title=' {{ datepicker。title}}' class=' {{{ datepicker。class }}' visible=' {{ datepicker。visible } } ' on hide picker=' hide picker ' on confirm=' on confirm ' picker值=' {{ datepicker。缺省值

Title //组件标题类//组件样式，可以自定义可见的//组件来显示/隐藏onHidePicker。

// 隐藏该组件的事件onConfirm // 点击组件弹窗确定后的事件,onConfirm(str),其中 str 为最终回调的参数,可取到 picker 的值pickerValue // 默认参数,用来初始的时候用,传入数据是 picker 的索引值,默认(0,0),即 默认选中两列 picker 的第一项复制代码

一些其他的说明

1. 组件的封装过程中,由于采用的是支付宝的picker-view所以在界面上没有花过多的时间,主要可能还是日期时间数组的生成需要处理一下,借助了moment.js库,对于时间处理上还是很方便的,以下是对处理日期数组handleDateArr.js的代码说明.

// 依赖于 moment.jsconst Moment = require('./moment.min')/** * 生成日期时间数组 * @param dayLength // 要生成的天数时长,不传的话,默认生成 1 天 * @param timeSection // 时间区间,默认 10 , 可下单区间早上9点到下午6点,可下单时间在当前小时后2小时 */function getDaysArr(dayLength, timeSection){  let _daysArr = [[],[]]  let _dayLength = dayLength || 1  const _timeSection = timeSection || 10  const _nowHour = Moment().format('HH')  // 当前时间 小时  const _expressHour = parseInt(_nowHour) + 2 // 可下单时间,当前时间 +2  const _earlyHour = 9  // 最早时间  const _endHour = 19 // 截止时间  for(let i = 0; i < _dayLength; i++){    // 当天时间处理    if( i === 0){      if(_expressHour <= _earlyHour ){        // 早于早上 9点时        _daysArr[1].push(getHoursArr(_earlyHour, _timeSection))        // 处理日期        _daysArr[0].push(Moment().add(i, 'days').format('YYYY-MM-DD'))      } else if( _expressHour > _earlyHour && _expressHour < _endHour){        // 晚于早上 9 点, 早于下午 18 点之前        _daysArr[1].push(getHoursArr(_expressHour, (_endHour - _expressHour)))        // 处理日期        _daysArr[0].push(Moment().add(i, 'days').format('YYYY-MM-DD'))      } else if ( _expressHour >= _endHour && _expressHour < 24){        // 超过晚上 19 点之后,日期天数增加一天        _dayLength++      }    } else {      // 其他日期时间处理      // 早于早上 9点时      _daysArr[1].push(getHoursArr(_earlyHour, _timeSection))      // 处理日期      _daysArr[0].push(Moment().add(i, 'days').format('YYYY-MM-DD'))    }  }  /**   * 获取小时时间数组   * @param nowHour // 当前小时   * @param hoursLength // 小时区间长度   */  function getHoursArr(nowHour, hoursLength) {    let _hoursArr = []    for(let j = 0 ; j < hoursLength; j++){      _hoursArr.push(`${nowHour + j}:00:00`)    }    return _hoursArr  }  return _daysArr}module.exports = {  getDaysArr}复制代码

2. 在dateTimePicker.js文件中使用handleDateArr.js的方法

...const { getDaysArr } = require('./js/handleDateArr');   // 引入处理函数Component({  data: {    ...  },  methods: {    // 获取日期数据    doGetDaysArr() {      this.setData({        dateTimeData: getDaysArr(2)     // 传入参数,需返回的日期天数,2天      });    }  }});...