DatePicker Plugin
Last updated
Was this helpful?
Last updated
Was this helpful?
Deprecated for Cordova 9.0 or higher.
DatePicker plugin lets an app use the native DatePicker control.
From the IDE menu, go to Configure → Cordova Plugin Settings.
Under Available Plugins section, hover over the Datepicker plugin and click Enable button.
Function Name
Description
show(func)
show a DatePicker control.
<!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>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:
