Date Picker

Improve this doc

The DatePicker plugin allows the user to fetch date or time using native dialogs.

Repo: https://github.com/VitaliiBlagodir/cordova-plugin-datepicker

Installation

  1. Install the Cordova and Ionic Native plugins:
    $ ionic cordova plugin add cordova-plugin-datepicker
$ npm install --save @ionic-native/date-picker
  2. Add this plugin to your app's module

Supported platforms

Usage

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

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

Instance Members

show(options)

Shows the date and/or time picker dialog(s)

Param Type Details
options DatePickerOptions

Options for the date picker.

Returns: Promise<Date> Returns a promise that resolves with the picked date and/or time, or rejects with an error.

DatePickerOptions

Param Type Details
mode string

The mode of the date picker Values: date | time | datetime
date Date | string | number

Selected date
minDate Date | string | number

Minimum date Default: empty String

(optional)
maxDate Date | string | number

Maximum date Default?: empty String

(optional)
titleText string

Label for the dialog title. If empty, uses android default (Set date/Set time). Default?: empty String

(optional)
okText string

Label of BUTTON_POSITIVE (done button) on Android

(optional)
cancelText string

Label of BUTTON_NEGATIVE (cancel button). If empty, uses android.R.string.cancel.

(optional)
todayText string

Label of today button. If empty, doesn't show the option to select current date.

(optional)
nowText string

Label of now button. If empty, doesn't show the option to select current time.

(optional)
is24Hour boolean

Shows time dialog in 24 hours format.

(optional)
androidTheme number

Choose the Android theme for the picker. You can use the DatePicker.ANDROID_THEMES property. Values: 1: THEME_TRADITIONAL | 2: THEME_HOLO_DARK | 3: THEME_HOLO_LIGHT | 4: THEME_DEVICE_DEFAULT_DARK | 5: THEME_DEVICE_DEFAULT_LIGHT

(optional)
allowOldDates boolean

Shows or hide dates earlier then selected date.

(optional)
allowFutureDates boolean

Shows or hide dates after selected date.

(optional)
doneButtonLabel string

Label of done button.

(optional)
doneButtonColor string

Hex color of done button.

(optional)
cancelButtonLabel string

Label of cancel button.

(optional)
cancelButtonColor string

Hex color of cancel button.

(optional)
x number

X position of date picker. The position is absolute to the root view of the application.

(optional)
y number

Y position of date picker. The position is absolute to the root view of the application.

(optional)
minuteInterval number

Interval between options in the minute section of the date picker.

(optional)
popoverArrowDirection string

Force the UIPopoverArrowDirection enum. The value any will revert to default UIPopoverArrowDirectionAny and let the app choose the proper direction itself.

(optional)
locale string

Force locale for datePicker.

(optional)

API

Native

General