Monaca Docs
検索…
Datepicker
Cordova 9.0 以降では廃止となりました。
DatePicker プラグインを使用して、ネイティブ側の DatePicker コントロール ( 日付設定 ) にアクセスします。

プラグインの追加方法 ( Monaca 上での処理 )

    1.
    Monaca クラウド IDE から設定 → Cordova プラグインの管理 を選択します。
    2.
    利用可能なプラグイン 項目の Datepicker プラグインにカーソルを置き、有効ボタンをクリックします。

メソッド

Android の場合

関数名
解説
show(func)
DatePicker を表示します。

DatePicker のデモ

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!

iOS の場合

このサンプルは、iPhone が対象です。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!
関連項目:
最終更新 2mo ago