1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
---
title: datepicker
slug: Archive/Mozilla/XUL/datepicker
tags:
- XUL Elements
- XUL Reference
translation_of: Archive/Mozilla/XUL/datepicker
---
<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
« <a href="/ja/docs/XUL/XUL_Reference">XUL リファレンス HOME</a> [
<a href="#Examples">例</a> |
<a href="#Attributes">属性</a> |
<a href="#Properties">プロパティ</a> |
<a href="#Methods">メソッド</a> |
<a href="#Related">関連項目</a> ]
</span></div>
<p>日付ピッカは日付を入力できます。 3 つの種類が利用でき、<code>type</code> 属性を使って指定できます。</p>
<ul> <li><code>normal</code> - 年、月、日を入力する 3 つのフィールドを持った日付ピッカ。</li> <li><code>grid</code> - 日付を選択するカレンダーグリッドを持った日付ピッカ。</li> <li><code>popup</code> - 3 つのフィールドを持つ普通の日付ピッカですが、ポップアップするグリッドを表示する、追加のドロップダウンボタンがあります。</li>
</ul>
<p>選択された日を設定するには方法がいくつかあります。XUL では特定の日付に初期化するため <code>value</code> 属性に <var>YYYY-MM-DD</var> 形式の値を設定できます。もし指定されていない場合、日付ピッカのデフォルトは現在の日付です。</p>
<p>選択された日付を変えるには <code>value</code> プロパティに <var>YYYY-MM-DD</var> 形式で新しい値を入れることができます。<code>dateValue</code> プロパティは <a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Date" title="ja/Core_JavaScript_1.5_Reference/Global_Objects/Date">Date</a> オブジェクトを使って日付を得たり設定できます。さらに <code>date</code> および <code>month</code>, <code>year</code> プロパティで日付のそれぞれの要素を別々に取得したり変更することができます。</p>
<p>日付が変更されるたびに change イベントが発生します。</p>
<p>別の月に移動したり表示されるたびに monthchange イベントが grid と popup datepicker に対して発生します。</p>
<dl><dt> 属性 </dt><dd> <a href="#a-disabled">disabled</a>, <a href="#a-firstdayofweek">firstdayofweek</a>, <a href="#a-readonly">readonly</a>, <a href="#a-datepicker.type">type</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-datepicker.value">value</a> </dd></dl> <dl><dt> プロパティ </dt><dd> <a href="#p-date">date</a>, <a href="#p-dateLeadingZero">dateLeadingZero</a>, <a href="#p-dateValue">dateValue</a>, <a href="#p-disabled">disabled</a>, <a href="#p-month">month</a>, <a href="#p-monthLeadingZero">monthLeadingZero</a>, <a href="#p-datepicker.open">open</a>, <a href="#p-readOnly">readOnly</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-datepicker.value">value</a>, <a href="#p-year">year</a>, <a href="#p-yearLeadingZero">yearLeadingZero</a> </dd></dl>
<h3 id="Examples" name="Examples">例</h3>
<p><img alt="Image:Controlsguide-datepicker-grid.png" class="internal" src="/@api/deki/files/1716/=Controlsguide-datepicker-grid.png"></p>
<pre><datepicker type="grid" value="2007-03-26"/>
</pre>
<h3 id="Attributes" name="Attributes">属性</h3>
<p> </p><div id="a-disabled">
<dl>
<dt>
<code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt>
<dd>
型: <em>論理型</em></dd>
<dd>
要素が無効化されているかどうかを示します。ある要素が <code>true</code> に設定されていたら、その要素は無効化されています。無効化された要素は通常グレイ表示のテキストで描画されます。要素が無効化されていると、ユーザのアクションには応答せず、フォーカスもあてられず、<code>command</code> イベントも発生しません。
</dd>
</dl>
<p> </p>
</div> <div id="a-firstdayofweek">
<dl><dt> <code id="a-firstdayofweek"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/firstdayofweek">firstdayofweek</a></code> </dt><dd> 型: <em>整数型</em> </dd><dd> グリッドで最初に表示される週の曜日。値は <code>0</code> から <code>6</code> までの範囲です。<code>0</code> は日曜日で <code>6</code> が土曜日です。初期値はロケールによって決定されるため、上書きするにはこの属性を使用するしかありません。 </dd></dl>
</div> <div id="a-readonly">
<dl> <dt><code id="a-readonly"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/readonly">readonly</a></code></dt> <dd>型: <em>論理型</em></dd> <dd><code>true</code> に設定した場合、ユーザは要素の値を変更できません。しかし、スクリプトからは依然として値を変更できます。</dd> <div class="geckoVersionNote"><div class="geckoVersionHeading">
Gecko 2 note
<div style="font-size: 9px; line-height: 1; font-style: italic;">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</div>
</div> Gecko 2.0 まで、<code>readonly</code> 属性は XBL フィールド上で正しく動作しませんでした。</div>
</dl>
</div> <div id="a-tabindex">
<dl><dt> <code id="a-tabindex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> </dt><dd> 型: <em>整数型</em> </dd><dd> 要素のタブの順番。タブの順番は <code>tab</code> キーが押下されたときにフォーカスが移動する順番です。より大きな <code>tabindex</code> の値をもつ要素は、タブの遷移が後になります。 </dd></dl>
</div> <div id="a-datepicker.type">
<dl>
<dt>
<code id="a-datepicker.type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/datepicker.type">type</a></code></dt>
<dd>
型: <em>下記の値のいずれか一つ</em></dd>
<dd>
日付ピッカの種類を指定するために以下の値の中から一つを <code>type</code> 属性に設定できます。</dd>
</dl>
<ul>
<li><code>normal</code>: 年、月、日を入力する 3 つのフィールドを持った日付ピッカ。これはデフォルトの値なので、この種類を望む場合は <code>type</code> 属性を指定しないでください。</li>
<li><code>grid</code>: 1 ヶ月を一度に表示するカレンダーグリッドを持った日付ピッカ。</li>
<li><code>popup</code>: 3 つのフィールドを持った日付ピッカですが、プレスするとカレンダーグリッドを表示する追加のドロップダウンボタンがあります。</li>
</ul>
</div> <div id="a-datepicker.value">
<dl>
<dt>
<code id="a-datepicker.value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/datepicker.value">value</a></code></dt>
<dd>
型: <em>文字列型</em></dd>
<dd>
<var>YYYY-MM-DD</var> 形式の datepicker の初期値。</dd>
</dl>
</div>
<h3 id="Properties" name="Properties">プロパティ</h3>
<p> </p><div id="p-date">
<dl>
<dt>
<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/date">date</a></span></code></dt>
<dd>
型: <em>整数型</em></dd>
<dd>
その月の現在選択されている日 (1 から 31 までの値)。選択された日を変更するにはこのプロパティを設定してください。</dd>
</dl></div> <div id="p-dateLeadingZero">
<dl>
<dt>
<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/dateLeadingZero">dateLeadingZero</a></span></code></dt>
<dd>
型: <em>論理型</em></dd>
<dd>
日付が 10 日より前の日で、先頭にゼロを加えて 2 桁で表示すべきかどうかを示す、読み取り専用の値</dd>
</dl></div> <div id="p-dateValue">
<dl>
<dt>
<code><span><a href="http://api/ja/docs/XUL/Property/dateValue">dateValue</a></span></code></dt>
<dd>
型: <em>Date</em></dd>
<dd>
<a href="/ja/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global_Objects/Date">Date</a> オブジェクトとして datepicker に現在入力または選択されている日付</dd>
</dl></div> <div id="p-disabled">
<dl><dt> <code><span><a href="http://api/ja/docs/XUL/Property/disabled">disabled</a></span></code> </dt><dd> 型: <em>論理型</em> </dd><dd> <code id="a-disabled"><a href="http://api/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> 属性の値の取得と設定。 </dd></dl>
</div> <div id="p-month">
<dl>
<dt>
<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/month">month</a></span></code></dt>
<dd>
型: <em>整数型</em></dd>
<dd>
現在選択されている月 (0 から 11 までの値)。選択された月を変更するにはこのプロパティを設定してください。</dd>
</dl></div> <div id="p-monthLeadingZero">
<dl>
<dt>
<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/monthLeadingZero">monthLeadingZero</a></span></code></dt>
<dd>
型: <em>論理型</em></dd>
<dd>
日付が 10 月より前の月で、先頭にゼロを加えて 2 桁で表示すべきかどうかを示す、読み取り専用の値。</dd>
</dl></div> <div id="p-datepicker.open">
<dl>
<dt>
<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/datepicker.open">open</a></span></code></dt>
<dd>
型: <em>論理型</em></dd>
<dd>
popup タイプの日付ピッカで、ポップアップが開いているかを指定します。ポップアップを開いたり閉じたりするにはこのプロパティを設定します。popup タイプではない日付ピッカでは、このプロパティは常に false です。</dd>
</dl></div> <div id="p-readOnly">
<dl>
<dt>
<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/readOnly">readOnly</a></span></code></dt>
<dd>
型: <em>論理型</em></dd>
<dd>
<code>true</code> に設定すると、ユーザは要素の値を変更できなくなります。</dd>
</dl></div> <div id="p-tabIndex">
<dl><dt> <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/tabIndex">tabIndex</a></span></code> </dt><dd> 型: <em>整数型</em> </dd><dd> <code id="a-tabindex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> 属性の値の取得と設定。 </dd></dl>
</div> <div id="p-datepicker.value">
<dl>
<dt>
<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/datepicker.value">value</a></span></code></dt>
<dd>
型: <em>文字列型</em></dd>
<dd>
<var>YYYY-MM-DD</var> 形式の現在選択されている日付。<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/month">month</a></span></code></code> プロパティとは異なり、月は 01 から 12 の範囲です。選択されている日付を変更するにはこのプロパティを設定してください。</dd>
</dl></div> <div id="p-year">
<dl>
<dt>
<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/year">year</a></span></code></dt>
<dd>
型: <em>整数型</em></dd>
<dd>
現在選択されている年 (1 から 9999 までの値)。選択された年を変更するにはこのプロパティを設定してください。</dd>
</dl></div> <div id="p-yearLeadingZero">
<dl>
<dt>
<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/yearLeadingZero">yearLeadingZero</a></span></code></dt>
<dd>
型: <em>論理型</em></dd>
<dd>
日付の年の値が 1000 未満の年で、先頭にゼロを加えて 4 桁で表示すべきかどうかを示す、読取専用の値</dd>
</dl></div>
<h3 id="Methods" name="Methods">メソッド</h3>
<div style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;">
<p><strong>XUL 要素からの継承</strong><br>
<small> <span id="m-blur"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span> </small></p>
<p><strong>DOM 要素からの継承</strong><br>
<small> <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.appendChild">appendChild()</a></code>, <a class="internal" href="/ja/DOM/Node.compareDocumentPosition" title="ja/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <a class="internal" href="/ja/DOM/Node.getFeature" title="ja/DOM/Node.getFeature">getFeature</a>, <a class="internal" href="/ja/DOM/Node.getUserData" title="ja/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.insertBefore">insertBefore()</a></code>, <a class="internal" href="/ja/DOM/Node.isEqualNode" title="ja/DOM/Node.isEqualNode">isEqualNode</a>, <a class="internal" href="/ja/DOM/Node.isSameNode" title="ja/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.isSupported">isSupported()</a></code>, <a class="internal" href="/ja/DOM/Node.lookupNamespaceURI" title="ja/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a class="internal" href="/ja/DOM/Node.lookupPrefix" title="ja/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a class="internal" href="/ja/DOM/Node.setUserData" title="ja/DOM/Node.setUserData">setUserData</a></small></p>
</div>
<h3 id="Related" name="Related">関連項目</h3>
<dl><dt> インタフェース </dt><dd> <a href="/ja/NsIDOMXULControlElement" title="ja/NsIDOMXULControlElement">nsIDOMXULControlElement</a> </dd></dl>
<div class="noinclude">
</div>
|
