Project address https://github.com/iocool/antminDatePicker

Another blog https://www.cnblogs.com/iocool/p/9397816.html

Alipay recently doing small program (hereinafter referred to as the small program) development, found the date of the small program selection components is very bad to use, such as android and IOS device, style is very different, because of the small program to invoke the component is the system call native components, so there will be some differences, in addition, small programs to provide the date on which the component does not satisfy my current business requirements:

  1. This date is the delivery time.

  2. The user can only select the date range of the next 2 days (that is, today and tomorrow), and the time selection is 10 hours from 9 am to 18 PM.

  3. Because the delivery is delivered to the door, the optional time is 2 hours after the current time (for example, the current time is 11 o ‘clock, and the earliest time the user can select is 13 o ‘clock).

  4. If the current time is later than 18pm, the user should be able to see the time points for tomorrow and the next two days.

In view of the above requirements, the picker-view component of the small program is used for secondary encapsulation. The following components are packaged.

The sample

The project structure

. ├ ─ ─ the README. Md ├ ─ ─ app. Acss ├ ─ ─ app. Js ├ ─ ─ app. Json ├ ─ ─ the components / / component │ └ ─ ─ dateTimePicker/date/component │ ├ ─ ─ │ ├─ DateTimePicker.axml │ ├─ dateTimePicker.axml │ ├─ DateTimePicker.axml │ ├─ DateTimePicker.axml │ ├─ ├─ ├─ ├─ ├─ ├─ dateTimePicker.js │ ├─ ├─ dateTimePicker.js │ ├─ ├─ dateTimePicker.js │ ├─ ├─ dateTimePicker.js │ ├─ ├─ dateTimePicker.js │ ├─ exercises │ ├─ index │ ├─ index.acss │ ├─ index.axml │ ├─ index.axml │ ├─ index.axml │ ├─ index Index. Js └ ─ ─ index. JsonCopy the code

Directions for use

For the component reference method and usage instructions of Alipay applet, please refer to Alipay’s Use of custom components, or refer to the usage method under Pages/Index in this example.

Pages /index/index.json You need to configure usingComponents and fill in the component path

{
    "defaultTitle": "Date selection picker demo"."usingComponents": {
        "picker": ".. /.. /components/dateTimePicker/dateTimePicker"}}Copy the code

Pages /index/index.js Imports the basic file. For details about configuration and usage, see the contents of the JS file


// Introduce base initialization
import datePicker from '.. /.. /components/dateTimePicker/datePickerBase'

Copy the code

Pages /index/index.axml uses the picker component

<picker
        title="{{datePicker.title}}"
        class="{{datePicker.class}}"
        visible="{{datePicker.visible}}"
        onHidePicker="hidePicker"
        onConfirm="onConfirm"
        pickerValue="{{datePicker.defaultValue}}"
/>
Copy the code

Among them

Visible // component show/hide onHidePicker // Hide the event of this component onConfirm // Click onConfirm(STR), where STR is the final callback argument to picker's value. PickerValue // the default argument, used for initial use, is the picker's index value, default (0,0), i.e The first item of the two-column picker is selected by defaultCopy the code

Some other notes

  1. Component of the packaging process, due to the use of Alipaypicker-viewSo I didn’t spend too much time on the interface, mainly probably the generation of the date and time array needs to be dealt with, with the help ofmoment.jsLibrary, for time processing is still very convenient, the following is to deal with the date arrayhandleDateArr.jsCode description.

// Rely on moment.js
const Moment = require('./moment.min')

@param timeSection @param timeSection @param timeSection @param timeSection @param timeSection @param timeSection @param timeSection @param timeSection @param timeSection Can place an order range from 9 am to 6 PM, can place an order time in 2 hours after the current hour */
function getDaysArr(dayLength, timeSection){
  let _daysArr = [[],[]]
  let _dayLength = dayLength || 1
  const _timeSection = timeSection || 10
  const _nowHour = Moment().format('HH')  // The current time is hour
  const _expressHour = parseInt(_nowHour) + 2 // Can order time, current time +2
  const _earlyHour = 9  // The earliest time
  const _endHour = 19 // Deadline

  for(let i = 0; i < _dayLength; i++){

    // Day time processing
    if( i === 0) {if(_expressHour <= _earlyHour ){

        // Earlier than 9 a.m
        _daysArr[1].push(getHoursArr(_earlyHour, _timeSection))

        // Processing date
        _daysArr[0].push(Moment().add(i, 'days').format('YYYY-MM-DD'))}else if( _expressHour > _earlyHour && _expressHour < _endHour){

        // Later than 9am and earlier than 18pm
        _daysArr[1].push(getHoursArr(_expressHour, (_endHour - _expressHour)))
        // Processing date
        _daysArr[0].push(Moment().add(i, 'days').format('YYYY-MM-DD'))}else if ( _expressHour >= _endHour && _expressHour < 24) {After 19pm, the number of days is increased by one day
        _dayLength++

      }

    } else {
      // Other date and time processing

      // Earlier than 9 a.m
      _daysArr[1].push(getHoursArr(_earlyHour, _timeSection))
      // Processing date
      _daysArr[0].push(Moment().add(i, 'days').format('YYYY-MM-DD'))}}@param nowHour // Current hour * @param hoursLength // Hour interval length */
  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
}

Copy the code
  1. indateTimePicker.jsUse in fileshandleDateArr.jsThe method of
. const { getDaysArr } =require('./js/handleDateArr');   // Introduce a handler

Component({
  data: {... },methods: {

    // Get date data
    doGetDaysArr() {
      this.setData({
        dateTimeData: getDaysArr(2)     // Pass the parameter, the number of days to return,2 days}); }}}); .Copy the code

The above is the basic description of the component, the code is relatively simple, I think it can give the current alipay small program and relevant needs of children’s shoes reference.