ionic3 時間選擇器

一、安裝

npm install ion-multi-picker --save

二、導入模塊

import { MultiPickerModule } from 'ion-multi-picker';

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp),
    **MultiPickerModule**
  ]

三、html文件中引入

<ion-multi-picker item-content [multiPickerColumns]="heightChoose" [(ngModel)]="defaultHeight" (ionChange)="historyPickerChange($event)" [cancelText]="'cancel'" [doneText]="'done'" [resetText]="'reset'" [showReset]="false"></ion-multi-picker>

四、數據

constructor() {
    this.heightChoose = [
      {
        options: [
          {text: "0", value: "0"},
          {text: "1", value: "1"},
          {text: "2", value: "2"},
          {text: "3", value: "3"},
          {text: "4", value: "4"},
          {text: "5", value: "5"},
          {text: "6", value: "6"},
          {text: "7", value: "7"},
          {text: "8", value: "8"},
          {text: "9", value: "9"},
          {text: "10", value: "10"},
        ]
      },
      {
        options: [
          {text: "00", value: "0"},
          {text: "01", value: "1"},
          {text: "02", value: "2"},
          {text: "03", value: "3"},
          {text: "04", value: "4"},
          {text: "05", value: "5"},
          {text: "06", value: "6"},
          {text: "07", value: "7"},
          {text: "08", value: "8"},
          {text: "09", value: "9"},
          {text: "10", value: "10"},
          // {text: "1-1", value: "1-1", parentVal: "1"}, 指定父級
          // {text: "1-2", value: "1-2", parentVal: "2"},
        ]
      }, {
        options: [
          {text: "am", value: "0"},
          {text: "pm", value: "1"},
        ]
      }
    ];
  }