Monaca Docs
Search
K

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<script>
function dateTest() {
var myNewDate = new Date();
// Same handling for iPhone and Android
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date', // date or time or blank for both
allowOldDates : true
}, function(returnDate) {
var newDate = new Date(returnDate);
alert(newDate.toString());
});
}
</script>
</head>
<body bgcolor="#ffffff">
<hr>DatePick Plugin Test<hr><br>
<hr> datePicker test<hr><br>
<input type="button" onClick ="dateTest()" value ="dateTest()" />
</body>
</html>

For iOS

Please note that, this example only works with iPhone but not iPad.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>PhoneGap</title>
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script>
document.addEventListener("deviceready", onDeviceReady, false);
var datePicker;
function onDeviceReady() {
// datepicker
console.log("cordova is ready");
datePicker = window.plugins.datePicker;
}
function getDateTime(){
datePicker.show({
"mode" : "datetime",
"date" : new Date("2000/01/02 03:04:05")
}, function(a){document.getElementById("datetimeButton").innerHTML = new Date(a).toString()});
}
function getDate(){
datePicker.show({
"mode" : "date",
"date" : new Date("2000/01/02 03:04:05")
}, function(a){document.getElementById("dateButton").innerHTML = new Date(a).toString()});
}
function getTime(){
datePicker.show({
"mode" : "time",
"date" : new Date("2000/01/02 03:04:05")
}, function(a){document.getElementById("timeButton").innerHTML = new Date(a).toString()});
}
function getDateTimeInhibitOldDates(){
datePicker.show({
"mode" : "datetime",
"date" : new Date("2012/09/28 03:04:05"),
"allowOldDates" : false
}, function(a){document.getElementById("inhibitOldDatesButton").innerHTML = new Date(a).toString()});
}
function getDateTimeInhibitFutureDates(){
datePicker.show({
"mode" : "datetime",
"date" : new Date("2012/09/28 03:04:05"),
"allowFutureDates" : false
}, function(a){document.getElementById("inhibitFutureDatesButton").innerHTML = a});
}
</script>
</head>
<body>
<hr> datepicker plugin test<hr>
<p>
<input type="button" onclick="getDateTime()" value="getDateTime"/>
<br/>
<span id="datetimeButton"></span>
</p>
<p>
<input type="button" onclick="getDate()" value="getDate"/>
<br/>
<span id="dateButton"></span>
</p>
<p>
<input type="button" onclick="getTime()" value="getTime"/>
<br/>
<span id="timeButton"></span>
</p>
<p>
<input type="button" onclick="getDateTimeInhibitOldDates()" value="get DateTimeInhibitOldDates"/>
<br/>
<span id="inhibitOldDatesButton"></span>
</p>
<p>
<input type="button" onclick="getDateTimeInhibitFutureDates()" value=" getDateTimeInhibitFutureDates"/>
<br/>
<span id="inhibitFutureDatesButton"></span>
</p>
</body>
</html>
See Also: