muhammadaziz / cordova-plugin-datepicker

DatePicker Plugin for Cordova/PhoneGap 3.0 (iOS and Android)

This is a combined version of DatePicker iOS and Android plugin for Cordova/Phonegap 3.0.

• Original iOS version: https://github.com/sectore/phonegap3-ios-datepicker-plugin

• Original Android version: https://github.com/bikasv/cordova-android-plugins/tree/master/datepicker

• Original combined version: https://github.com/VitaliiBlagodir/cordova-plugin-datepicker

• Original combined version: https://github.com/nicholasareed/cordova-plugin-datepicker

• Original combined version: https://github.com/Sharinglabs/cordova-plugin-datepicker

Installation

1. Make sure that you have Node and Cordova CLI or PhoneGap's CLI installed on your machine.

2. Add a plugin to your project using Cordova CLI:

cordova plugin add https://github.com/okaybmd/cordova-plugin-datepicker

Or using PhoneGap CLI:

phonegap local plugin add https://github.com/okaybmd/cordova-plugin-datepicker

3a) Register plugin within config.xml of your app

<feature name="DatePicker">
    <param name="ios-package" value="DatePicker"/>
</feature>

<feature name="DatePickerPlugin">
    <param name="android-package" value="com.okaybmd.cordova.plugin.datepicker.DatePickerPlugin"/>
</feature>

3b) If you are using PhoneGap build service add to config.xml

<gap:plugin name="com.okaybmd.cordova.plugin.datepicker" version="1.3.0" source="plugins.cordova.io" />
	

Usage

var options = {
  date: new Date(),
  mode: 'date'
};

datePicker.show(options, function(date){
  alert("date result " + date);  
});

Options

mode - iOS, Android

The mode of the date picker.

Type: String

Values: date | time | datetime (datetime only works starting Android 4.4)

Default: date

windowTitle - Android (date only mode)

Custom window title (by default, Android will show the selected date).

Type: String

Default: [default] (will show selected date)

date - iOS, Android

Selected date.

Type: String

Default: new Date()

minDate - iOS, Android

Minimum date.

Type: Date | empty String

Default: (empty String)

maxDate - iOS, Android

Maximum date.

Type: Date | empty String

Default: (empty String)

allowOldDates - iOS

Shows or hide dates earlier then selected date.

Type: Boolean

Values: true | false

Default: true

allowFutureDates - iOS

Shows or hide dates after selected date.

Type: Boolean

Values: true | false

Default: true

doneButtonLabel - iOS, Android

Label of done button.

Typ: String

Default: Done

doneButtonColor - iOS

Hex color of done button.

Typ: String

Default: #0000FF

cancelButtonLabel - iOS, Android

Label of cancel button.

Type: String

Default: Cancel

cancelButtonColor - iOS

Hex color of cancel button.

Type: String

Default: #000000

cancelButton - Android

Show or hide cancel button

Type: Boolean

Default: true

clearButtonLabel - iOS, Android

Label of clear button.

Type: String

Default: Clear

clearButtonColor - iOS

Hex color of clear button.

Type: String

Default: #FF0000

clearButton - iOS, Android

Show or hide clear button

Type: Boolean

Default: false

Return: "clear" will be returned when the user clicks the button

x - iOS (iPad only)

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

Type: String

Default: 0

y - iOS (iPad only)

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

Type: String

Default: 0

Requirements

• PhoneGap 3.0 or newer / Cordova 3.0 or newer
• Android 2.3.1 or newer / iOS 5 or newer

Basic Example

var options = {
  date: new Date(),
  mode: 'date'
};

datePicker.show(options, function(date){
  alert("date result " + date);  
});

Advanced Example

var options = {
  date: new Date(),
  mode: 'date',
  cancelButton: false,
  windowTitle: 'Set your birthday'
};

datePicker.show(options, function(date){
  alert("date result " + date);  
});

Plugin Default Options

var defaults = {
		mode : 'date',
		date : '',
		minDate: 0,
		maxDate: 0,
		doneButtonLabel: "Done",
		cancelButtonLabel: "Cancel",
		clearButtonLabel: "Clear",
		clearButton: false,
		cancelButton: false,
		windowTitle: "[default]"
	};

Version updates

v1.3.2 - fixed cancel button (still not working) v1.3.3 - set show cancel button to false by default