CODEWITHSUNDEEP
angularionic-frameworkdatepickerionic3
developer
developer

Reputation: 80

how to add a datepicker in ionic 3

As am begginer to ionic, i want to add a datepicker to my input fields in ionic i had tried several methods but no one could support so please any one help me to add a date picker plugin to a ionic 3 input fields

Upvotes: 1

Views: 11851

Answers (5)

Rohan Pawar
Rohan Pawar

Reputation: 49

Don't need any native plugin for ionic v4 just need to use the html template.

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

Upvotes: 1

jogaleumesh
jogaleumesh

Reputation: 156

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: enter image description here

THEME_HOLO_DARK: enter image description here

THEME_HOLO_LIGHT: enter image description here

THEME_DEVICE_DEFAULT_LIGHT:

for Dark theme THEME_DEVICE_DEFAULT_DARK enter image description here

Upvotes: 0

Sayed Mohd Ali
Sayed Mohd Ali

Reputation: 2254

first, you need to install Cordova date-picker.

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

then import the datepicker in your component and use it...

  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)
    );

Upvotes: 0

Code Spy
Code Spy

Reputation: 9964

Check this native Ionic 4 plugin DatePicker plugin

Date Picker

enter image description here

Time Picker

enter image description here

Upvotes: 0

gaborp
gaborp

Reputation: 714

You can use native ionic datepicker (it is using cordova datepicker): https://ionicframework.com/docs/native/date-picker/

or you can use a ion-datetime as suggested in the comments: https://ionicframework.com/docs/api/components/datetime/DateTime/

Upvotes: 3

Related Questions