ヤフーユーザーインターフェイスブログ（YUIBlog）

合金からYUI 3カレンダーの日付セレクタを使用

合金内のコンポーネント（Liferayのからネイトキャバノーとエドゥアルドラングレンによって寄贈されました） YUI 3ギャラリーの使い方は簡単です。 この例では、徐々に一連の強化するための合金のカレンダーの使用方法を示してselect日付を選択するための要素を。

かかわらず、JavaScriptが有効になっているかどうかのページや機能になりますHTMLを - マークアップを見てみましょう。 合金のカレンダーモジュールは、このマークアップを必要としません。あなたはそれを空の要素を養うことができ、作成されますselectあなたのユースケースでは、プログレッシブ·エンハンスメントの恩恵を受けないことをイベントであなたのための要素を。

  <div id="calendar">
	 <select class="yui3-datepicker-month" name="month" id="monthselect">
		 <option value="0">
			 1月
		 </オプション>
		 <option value="1">
			 2月
		 </オプション>

 ...

	 </ SELECT>

         <select class="yui3-datepicker-day" name="d​​ay" id="dayselect">
		 <option value="1">
			 1
		 </オプション>
		 <option value="2">
			 2
		 </オプション>

 ...

	 </ SELECT>

         <select class="yui3-datepicker-year" name="year" id="yearselect">
		 <option value="2009">
			 2009
		 </オプション>

 ...

	 </ SELECT>
 </ DIV> 

代わりに、このマークアップ（または単に空のルート要素を持つ我々は徐々に既存のフォームフィールドを強化していない場合）は、我々はもたらすDatePickerの選択をサポートした合金のカレンダーモジュールからYUI 3ギャラリー 。 これは、私たちはページ上にYUI 3を持っているし、その後に概説の構成手順に従う必要があり、モジュールのギャラリーのページを 。

  <script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"> </ SCRIPT>
 <SCRIPT>
 YUI（{
	 / /この設定情報のすべては、カットアンドペーストしたギャラリーのエントリからのためにすることができます
	 / /このモジュール：http://yuilibrary.com/gallery/show/aui-calendar-datepicker-select
    ギャラリー： "ギャラリー -  2010年6月7日-17-52 '、
    モジュール：{
         "ギャラリー-AUI-肌ベース"：{
            フルパス： "http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/
							ギャラリー-AUI-皮膚ベースmin.css '、
            タイプ： 'CSS'
         }
         "ギャラリー-AUI-皮膚古典的な '：{
            フルパス： "http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/
							 gallery-aui-skin-classic/css /
							ギャラリー-AUI-皮膚クラシックmin.css '、
            タイプ： 'CSS'、
            必要があります：['ギャラリー-AUI-皮膚ベース']
         }
     }
 }）を使用してください。（ 'ギャラリー-AUI-カレンダーDatePickerのセレクト'、関数（Y）{
     VAR datePickerSelect =新しいY.DatePickerSelect（{
		 displayBoundingBox： '＃カレンダー'、
		 DateFormatは： '％M /％D /％Y'、
		 yearRange：[2009、2012]、
		 dayField：Y.one（ "＃dayselect"）、
		 dayFieldName： "日"、
		 monthField：Y.one（ "＃monthselect"）、
		 monthFieldName： "月"、
		 yearField：Y.one（ "＃yearselect"）、
		 yearFieldName： "年"
	 }）のrender（）;
 }）;

 </ SCRIPT> 

ここでは、この単純な例でのライブバージョンです 。

それはそれと同じくらい簡単です。 の構成プロパティdatePickerSelectされている明快合金のドキュメントで定義されている 。 この例では、プロパティはルート要素、形式の日付を設定するために使用され、日付範囲を設定し、既存のワイヤアップselect 、フォームフィールドはプログレッシブ·エンハンスメントに使用する知っているので、ウィジェットのインスタンスに要素を。 実際には、唯一のルート要素（ displayBondingBox ）必要なプロパティです。

合金のUIへの貢献の完全なリストについては、YUI 3ギャラリーの名簿をチェックしてください 。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！