Skip to main content

Visit Mozilla.org

XUL:datepicker

出典: MDC

この記事は Firefox 3 の新機能について述べています

« XUL リファレンス HOME    [ 例 | 属性 | プロパティ | メソッド | 関連項目 ]

日付ピッカは日付を入力できます。 3 つの種類が利用でき、type 属性を使って指定できます。

  • normal - 年、月、日を入力する 3 つのフィールドを持った日付ピッカ。
  • grid - 日付を選択するカレンダーグリッドを持った日付ピッカ。
  • popup - 3 つのフィールドを持つ普通の日付ピッカですが、ポップアップするグリッドを表示する、追加のドロップダウンボタンがあります。

選択された日を設定するには方法がいくつかあります。XUL では特定の日付に初期化するため value 属性に YYYY-MM-DD 形式の値を設定できます。もし指定されていない場合、日付ピッカのデフォルトは現在の日付です。

選択された日付を変えるには value プロパティに YYYY-MM-DD 形式で新しい値を入れることができます。dateValue プロパティは Date オブジェクトを使って日付を得たり設定できます。さらに date および month, year プロパティで日付のそれぞれの要素を別々に取得したり変更することができます。

属性
disabled, firstdayofweek, readonly, type, tabindex, value
プロパティ
date, dateLeadingZero, dateValue, disabled, month, monthLeadingZero, open, readOnly, tabIndex, value, year, yearLeadingZero

[編集] 例

Image:Controlsguide-datepicker-grid.png 

<datepicker type="grid" value="2007/03/26"/>

[編集] 属性

XUL 要素からの継承
align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width

disabled
型: 真偽値
要素が無効化されているかどうかを示します。ある要素が true に設定されていたら、その要素は無効化されています。無効化された要素は通常グレイ表示のテキストで描画されます。要素が無効化されていると、ユーザのアクションには応答せず、フォーカスもあてられず、command イベントも発生しません。

firstdayofweek
型: 整数
グリッドで最初に表示される週の曜日。値は 0 から 6 までの範囲です。0 は日曜日で 6 が土曜日です。初期値はロケールによって決定されるため、上書きするにはこの属性を使用するしかありません。

readonly
型: boolean
true に設定した場合、ユーザは要素の値を変更できません。しかし、スクリプトからは依然として値を変更できます。

tabindex
型: 整数
要素のタブの順番。タブの順番は tab キーが押下されたときにフォーカスが移動する順番です。より大きな tabindex の値をもつ要素は、タブの遷移が後になります。

type
型: 以下の値の中の一つ
日付ピッカの種類を指定するために以下の値の中から一つを type 属性に設定できます。
  • normal: 年、月、日を入力する 3 つのフィールドを持った日付ピッカ。これはデフォルトの値なので、この種類を望む場合は type 属性を指定しないでください。
  • grid: 1 ヶ月を一度に表示するカレンダーグリッドを持った日付ピッカ。
  • popup: 3 つのフィールドを持った日付ピッカですが、プレスするとカレンダーグリッドを表示する追加のドロップダウンボタンがあります。

value
型: string
YYYY-MM-DD 形式の datepicker の初期値。

[編集] プロパティ

XUL 要素からの継承
align, allowEvents, boxObject, builder, className, collapsed, contextMenu, controllers, currentItem, database, datasources, dir, flex, height, hidden, id, left, listBoxObject, maxHeight, maxWidth, menu, minHeight, minWidth, observes, ordinal, orient, pack, persist, ref, resource, statusText, style, tooltip, tooltipText, top, value, width

DOM 要素からの継承
attributes, childNodes, cloneNode, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, tagName

date
型: 整数
その月の現在選択されている日 (1 から 31 までの値)。選択された日を変更するにはこのプロパティを設定してください。

dateLeadingZero
型: 真偽値
日付が 10 日より前の日で、先頭にゼロを加えて二桁で表示すべきかどうかを示す、読み取り専用の値。

dateValue
型: Date
Date オブジェクトとして datepicker に現在入力または選択されている日付。

disabled
型: 真偽値
disabled 属性の値の取得と設定。

month
型: 整数
現在選択されている月 (0 から 11 までの値)。選択された月を変更するにはこのプロパティを設定してください。

monthLeadingZero
型: 真偽値
日付が 10 月より前の月で、先頭にゼロを加えて二桁で表示すべきかどうかを示す、読み取り専用の値。

open
型: boolean
popup タイプの日付ピッカで、ポップアップが開いているかを指定します。ポップアップを開いたり閉じたりするにはこのプロパティを設定します。popup タイプではない日付ピッカでは、このプロパティは常に false です。

readOnly
型: 真偽値
true に設定すると、ユーザは要素の値を変更できなくなります。

tabIndex
型: 整数
tabindex 属性の値の取得と設定。

value
型: 文字列
YYYY-MM-DD 形式の現在選択されている日付。month プロパティとは異なり、月は 01 から 12 の範囲です。選択されている日付を変更するにはこのプロパティを設定してください。

year
型: 整数
現在選択されている年 (1 から 9999 までの値)。選択された年を変更するにはこのプロパティを設定してください。

yearLeadingZero
型: 真偽値
日付の年が 1000 未満の年で、先頭にゼロを加えて四桁で表示すべきかどうかを示す、読み取り専用の値。

[編集] メソッド

XUL 要素からの継承
blur, click, doCommand, focus, getElementsByAttribute

DOM 要素からの継承
addEventListener, appendChild, dispatchEvent, getAttribute, getAttributeNode, getAttributeNodeNS, getAttributeNS, getElementsByTagName, getElementsByTagNameNS, hasAttribute, hasAttributeNS, hasAttributes, hasChildNodes, insertBefore, isSupported, normalize, removeAttribute, removeAttributeNode, removeAttributeNS, removeChild, removeEventListener, replaceChild, setAttribute, setAttributeNode, setAttributeNodeNS, setAttributeNS

[編集] 関連項目

インタフェース
nsIDOMXULControlElement
"http://developer.mozilla.org/ja/docs/XUL:datepicker" より作成