Monaca Docs
Search…
DatePicker Plugin
Deprecated for Cordova 9.0 or higher.
DatePicker plugin lets an app use the native DatePicker control.

Enable Plugin in Monaca

  1. 1.
    From the IDE menu, go to Configure → Cordova Plugin Settings.
  2. 2.
    Under Available Plugins section, hover over the Datepicker plugin and click Enable button.

Methods

For Android

Function Name
Description
show(func)
show a DatePicker control.

DatePicker Demo

For Android

1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, user-scalable=no">
6
<script src="components/loader.js"></script>
7
<link rel="stylesheet" href="components/loader.css">
8
9
<script>
10
function dateTest() {
11
var myNewDate = new Date();
12
13
// Same handling for iPhone and Android
14
window.plugins.datePicker.show({
15
date : myNewDate,
16
mode : 'date', // date or time or blank for both
17
allowOldDates : true
18
}, function(returnDate) {
19
var newDate = new Date(returnDate);
20
alert(newDate.toString());
21
});
22
}
23
</script>
24
</head>
25
<body bgcolor="#ffffff">
26
<hr>DatePick Plugin Test<hr><br>
27
<hr> datePicker test<hr><br>
28
<input type="button" onClick ="dateTest()" value ="dateTest()" />
29
</body>
30
</html>
Copied!

For iOS

Please note that, this example only works with iPhone but not iPad.
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, user-scalable=no">
6
<title>PhoneGap</title>
7
<script src="components/loader.js"></script>
8
<link rel="stylesheet" href="components/loader.css">
9
10
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
11
12
<script>
13
document.addEventListener("deviceready", onDeviceReady, false);
14
var datePicker;
15
16
function onDeviceReady() {
17
// datepicker
18
console.log("cordova is ready");
19
datePicker = window.plugins.datePicker;
20
}
21
22
function getDateTime(){
23
datePicker.show({
24
"mode" : "datetime",
25
"date" : new Date("2000/01/02 03:04:05")
26
}, function(a){document.getElementById("datetimeButton").innerHTML = new Date(a).toString()});
27
}
28
function getDate(){
29
datePicker.show({
30
"mode" : "date",
31
"date" : new Date("2000/01/02 03:04:05")
32
}, function(a){document.getElementById("dateButton").innerHTML = new Date(a).toString()});
33
}
34
function getTime(){
35
datePicker.show({
36
"mode" : "time",
37
"date" : new Date("2000/01/02 03:04:05")
38
}, function(a){document.getElementById("timeButton").innerHTML = new Date(a).toString()});
39
}
40
function getDateTimeInhibitOldDates(){
41
datePicker.show({
42
"mode" : "datetime",
43
"date" : new Date("2012/09/28 03:04:05"),
44
"allowOldDates" : false
45
}, function(a){document.getElementById("inhibitOldDatesButton").innerHTML = new Date(a).toString()});
46
}
47
function getDateTimeInhibitFutureDates(){
48
datePicker.show({
49
"mode" : "datetime",
50
"date" : new Date("2012/09/28 03:04:05"),
51
"allowFutureDates" : false
52
}, function(a){document.getElementById("inhibitFutureDatesButton").innerHTML = a});
53
}
54
55
</script>
56
</head>
57
58
<body>
59
<hr> datepicker plugin test<hr>
60
<p>
61
<input type="button" onclick="getDateTime()" value="getDateTime"/>
62
<br/>
63
<span id="datetimeButton"></span>
64
</p>
65
<p>
66
<input type="button" onclick="getDate()" value="getDate"/>
67
<br/>
68
<span id="dateButton"></span>
69
</p>
70
<p>
71
<input type="button" onclick="getTime()" value="getTime"/>
72
<br/>
73
<span id="timeButton"></span>
74
</p>
75
<p>
76
<input type="button" onclick="getDateTimeInhibitOldDates()" value="get DateTimeInhibitOldDates"/>
77
<br/>
78
<span id="inhibitOldDatesButton"></span>
79
</p>
80
<p>
81
<input type="button" onclick="getDateTimeInhibitFutureDates()" value=" getDateTimeInhibitFutureDates"/>
82
<br/>
83
<span id="inhibitFutureDatesButton"></span>
84
</p>
85
</body>
86
</html>
Copied!
See Also:
Last modified 4mo ago