CODEWITHSUNDEEP
ionic-frameworkdatepickerionic2
Santosh Hegde
Santosh Hegde

Reputation: 3520

How to display Date-picker in IONIC 2?

I wanted to display the DatePicker as soon as page loads.

<DatePicker
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/datePicker"
        android:layout_gravity="center_horizontal|top"
        android:headerBackground="?attr/colorPrimary"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        />

I used Android studio and wrote above code to get the output as in the below image. Expected Output in ionic

I wanted to implement the same thing using ionic 2 and wrote below code to get the datepicker.

import {Component} from '@angular/core';
import {DatePicker} from 'ionic-native';
import {Calendar} from 'ionic-native';
import {Platform} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {



constructor(platform: Platform) {
    platform.ready().then(() => {
      let options = {
        date: new Date(),
        mode: 'date'
      }

  DatePicker.show(options).then(
    date => {
      alert('Selected date: ' + date);
    },
    error => {
      alert('Error: ' + error);
    }
  );
});


}
}

And im getting the DatePicker as in below image. Ionic DatePicker

Now my question is how to get the same DatePicker as in the First image?

Upvotes: 0

Views: 11829

Answers (1)

Huiting
Huiting

Reputation: 1406

You are using DataPicker from Ionic-Native. You can research more about Ionic-Native but the brief idea is that it wraps all the different cordova plugins a user would need to make it easier.

For DataPicker, if you look into the source code, it is using the plugin from cordova-plugin-datapicker. (https://github.com/VitaliiBlagodir/cordova-plugin-datepicker)

Under the README, there are a bunch of options that you can select when initializing your DataPicker. The plugin only caters to defined android themes:

androidTheme - Android
Choose the theme of the picker
Type: Int
Values: THEME_TRADITIONAL | THEME_HOLO_DARK | THEME_HOLO_LIGHT | THEME_DEVICE_DEFAULT_DARK | THEME_DEVICE_DEFAULT_LIGHT
Default: THEME_TRADITIONAL

For more details about themes, you can check out this issue that was open at the DatePicker plugin. (https://github.com/VitaliiBlagodir/cordova-plugin-datepicker/issues/180) As all these themes are based on Android API, I have not yet seen any suggestions on how to manually change the colors. It would be good to post your question at the plugin page.

Upvotes: 0

Related Questions