如何在ionic 3中添加datepicker

Question

作为离子的初学者，我想在我的输入字段中添加一个日期选择器我已经尝试了几种方法，但没有人可以支持所以请任何人帮我添加日期选择器插件到离子3输入字段< / p>

Answer 1

你可以使用native ionic datepicker（它使用cordova datepicker）：https://ionicframework.com/docs/native/date-picker/

或者您可以使用评论中建议的离子日期时间：https://ionicframework.com/docs/api/components/datetime/DateTime/

Answer 2

检查this本机 Ionic 4 插件DatePicker插件

日期选择器

时间选择器

Answer 3

首先，您需要安装Cordova日期选择器。

ionic cordova plugin add cordova-plugin-datepicker
npm install @ionic-native/date-picker

然后将日期选择器导入您的组件中并使用它...

  import { DatePicker } from '@ionic-native/date-picker/ngx';

    constructor(private datePicker: DatePicker) { }


    ...


    this.datePicker.show({
      date: new Date(),
      mode: 'date',
      androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK
    }).then(
      date => console.log('Got date: ', date),
      err => console.log('Error occurred while getting date: ', err)
    );

Answer 4

ionic cordova plugin add cordova-plugin-datepicker
npm install @ionic-native/date-picker

app.module.ts
import { DatePicker } from '@ionic-native/date-picker/ngx';
providers: [
  DatePicker
]

import { DatePicker } from '@ionic-native/date-picker/ngx';

constructor(private datePicker: DatePicker) { }

this.datePicker.show({
 date: new Date(),
 mode: 'date',
 androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK
}).then(
 date => console.log('date: ', date),
 err => console.log('error ', err)
);

THEME_HOLO_DARK：

THEME_HOLO_DARK：

THEME_HOLO_LIGHT：

THEME_DEVICE_DEFAULT_LIGHT：

用于深色主题 THEME_DEVICE_DEFAULT_DARK

Answer 5

ionic v4 不需要任何本地插件，只需使用html模板即可。

 <ion-item>
   <ion-label>Date</ion-label>
   <ion-datetime displayFormat="DD MMMM YY, HH:mm a" min="1999" max="2025">
   </ion-datetime>
 </ion-item>