[ionic4] datetime组件之ion-picker的详细使用(有完整代码)

前言:

用ionic开发项目有一个月了,遇到了这样一个需求,但是这个需求在官方文档里已经给出,可是没有响应的代码,查了很久官网依然没有找到相对应的代码,让小编非常的气愤,不过好在通过一些手段找到了对应的代码!,想知道是怎么搞得到的代码可以私聊我,接下来看看是不是你们要的需求!看下图:
:

对应的代码:

page.html:

<ion-button (click)="openPicker(2,5,multiColumnOptions)">
  Open single Column Picker
</ion-button>

<ion-button (click)="openPicker(1,5,defaultColumnOptions)">
  Open Multi Column Picker
</ion-button>
</ion-content>

page.ts

import { Component, OnInit } from '@angular/core';
import { PickerController } from '@ionic/angular'

//格式化日期的第三方模块
import sd from 'silly-datetime';

@Component({
  selector: 'app-datatime',
  templateUrl: './datatime.page.html',
  styleUrls: ['./datatime.page.scss'],
})
export class DatatimePage implements OnInit {
  constructor(public pickercontroller: PickerController) {}

  pickerController = document.querySelector('ion-picker-controller');
  defaultColumnOptions = [
    [
      'Dog',
      'Cat',
      'Bird',
      'Lizard',
      'Chinchilla'
    ]
  ]

  multiColumnOptions = [
    [
      'Minified',
      'Responsive',
      'Full Stack',
      'Mobile First',
      'Serverless'
    ],
    [
      'Tomato',
      'Avocado',
      'Onion',
      'Potato',
      'Artichoke'
    ]
  ]

  async  openPicker(numColumns = 1, numOptions = 5, multiColumnOptions) {
    const picker = await this.pickercontroller.create({
      columns: this.getColumns(numColumns, numOptions, multiColumnOptions),
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Confirm',
          handler: (value) => {
            console.log(`Got Value ${value}`);
          }
        }
      ]
    });
    await picker.present();
  }

  getColumns(numColumns, numOptions, columnOptions) {
    let columns = [];
    for (let i = 0; i < numColumns; i++) {
      columns.push({
        name: `col-${i}`,
        options: this.getColumnOptions(i, numOptions, columnOptions)
      });
    }
    return columns;
  }

  getColumnOptions(columnIndex, numOptions, columnOptions) {
    let options = [];
    for (let i = 0; i < numOptions; i++) {
      options.push({
        text: columnOptions[columnIndex][i % numOptions],
        value: i
      })
    }
    return options;
  }

  ngOnInit() {
}

后记:

如果解决了你的需求,请记得点赞!