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

日付の書式ゆいと-パートII

2009年2月25日でテリス表示|フィリップで1時44分で午後開発 | 2コメント

でパートI 、我々はフォーマッタを見たのフォーマット方法を送信した日の日付を使用してゆいの。 IIではパーツ、我々は、大文字を使用し、特定の日付をよ〜でフォーマット-内のDataTableコントロール。

DataTableのは、日付を含むウェブサイトのユーザーにあらゆる種類のデータを提示するための素晴らしいツールです。 我々は第I部で見たように、日付のフォーマッタが簡単に書式設定された文字列にDateオブジェクトを変換することができます。 たとえば、この、我々はのDataTableのでしょう取るBasicの例をして、カスタム日付フォーマッタを追加します。 我々は必要な含まれていますから始めましょう：

 <！ - 個々のユイのCSSファイル - > 
 <linkのrel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css"> 

 <！ - 個々のユイのJSファイル - > 
 <scriptのtype="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"> </スクリプト> 
 <scriptのtype="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"> </スクリプト> 
 <scriptのtype="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"> </スクリプト> 
 <scriptのtype="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"> </スクリプト> 

次に、我々が入力するマークアップ、ユーザー定義の書式を追加しますDataTableの再描画をトリガするために：

 <label>はフォーマット：<inputのtype="text"のid="date-format"は%Y" size="30"> </ラベル> <入力タイプを%d value="%b ="ボタン"idは="レンダリングテーブル"値="再描画">

 <div id="basic"> </ divの>

ここで重要なカスタム日付フォーマッタを定義することです：

 YAHOO.namespace（"YAHOO.example.DateFormatter"）;
 YAHOO.example.DateFormatter.formatDate =関数（elCell、oRecord、oColumn、oData）（
	ヴァールelは=（"日付形式"）はdocument.getElementById;
	ヴァールsformatの= el.value;

	ヴァールstrに= YAHOO.util.Date.format（oData、（形式：sformatの））;
	 = elCell.innerHTML strの;
 ）

そして最後に、ここではJavaScript DataTableを作成することです。 は、我々自身の"日付"列のフォーマッタを指すように注意してください：

 YAHOO.example.Data =（bookorders数：[（idを："のpo - 0167"を、日付：新しい日付（1980年、2、24）、数量：1、量：4）、（idを："のpo - 0783"を、日付：新しい日付（"1983年1月3日"）、数量：nullの場合、金額：12.12345）、（idを："のpo - 0297"を、日付：新しい日付（1978、11、12）、数量：12、金額：1.25） 、（idを："のpo - 1482"を、日付：新しい日付（"1985年3月11日"）、数量：6、金額：3.5）]）;ヴァールmyColumnDefs = [（キー："id"が、ソート：真） （キー："日付"、フォーマッタ：YAHOO.example.DateFormatter.formatDate、ソート：trueの場合、sortOptions：（DefaultDirの：YAHOO.widget.DataTable.CLASS_DESC））、（キー："量"は、フォーマッタ：YAHOO.widget.DataTable 。formatNumber、ソート：真）、（キー："量"は、フォーマッタ：YAHOO.widget.DataTable.formatCurrency、ソート：真）];ヴァールmyDataSourceが=新しいYAHOO.util.DataSource（YAHOO.example.Data.bookorders）; myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema =（フィールド：["id"を"日付"、"量"、"量"]）;ヴァールmyDataTable =新しいYAHOO.widget.DataTable（"基本的な"myColumnDefs、myDataSourceが）; 

この例では、我々はまた、イベントハンドラテーブルを"再描画"ボタンをクリックすると描画を含めるでしょう：

 YAHOO.util.Event.addListener（"レンダリング表"、"クリック"、myDataTable.render、myDataTable、真の）;

一緒にそれをすべて置くこと、我々は取得日のformatingしてDataTableのでカスタマイズ可能。

この例では、我々のデータソースは、実際のDateオブジェクトを保持します。 これは、厳密には必要ではありません。 アプリケーションでは、/時刻情報を格納する必要がありますUTCに送信日付を国際化をサポートします。 サーバーとしてあなたのためのインスタンス上に存在するデータが場合は、 DATETIME型DATETIMEデータベースのMySQL、そして最良の方法は、タイムスタンプのUnixへの変換に使用することですUNIX_TIMESTAMPを（）関数をUNIX_TIMESTAMP()

セレクトidは、UNIX_TIMESTAMPを （pubdateの）のAS日付、数量、金額からのbookorders;

他のデータベースエンジンはUnixタイムスタンプを抽出する独自のメソッドがあります。

それは、ブラウザに渡される前に、結果セットは、JSONは選択した言語でサーバー側のJSONライブラリを使用してエンコードされたことができます。 PHPでは、我々はこのようにしてください：

 $ bookorders =配列（）;
 =するmysql_fetch_assoc（$結果））（$行中
 （
	 $ bookorders [] = $行;
 ）
ヘッダー（"コンテンツのタイプ：アプリケーション/ jsonに"）;
 json_encode（$ bookordersエコー）;

側ではクライアント、我々が使用してね受信するデータは、このXHRDataSourceを：

ヴァールmyDataSourceが=新しいYAHOO.util。XHRDataSource（"http://hostname/your/script.php"）;
 myDataSource.responseType = YAHOO.util.DataSource。TYPE_JSON;
完全な詳細について/ /を参照してデータソースのドキュメント

あなたのデータはJSONとしてサーバーから来るので、おそらくオフには、Unixのタイムスタンプの日付を渡して良いと日付のコンストラクタを使用してフォーマッタの中にいる：

 YAHOO.example.Data =（
     "bookorders'：[
         （idは："のpo - 0167"、日付：320227200、数量：1、量：4）、
         （idは："のpo - 0783"、日付：410428800、数量：nullの場合、金額：12.12345）
         （idは："のpo - 0297"、日付：279705600、数量：12、金額：1.25）、
         （idは："のpo - 1482"、日付：479376000、数量：6、金額：3.5）
     ]
 ）;

 YAHOO.example.DateFormatter.formatDate =関数（elCell、oRecord、oColumn、oData）（
	ヴァールelは=（"日付形式"）はdocument.getElementById;
	ヴァールsformatの= el.value;

	ヴァール大館=新しい日付（oData * 1000）;

	ヴァールstrが= YAHOO.util.Date.format（（）形式：sformatの）大館。
	 = elCell.innerHTML strの;
 ）

Dateコンストラクタは、ミリ秒を必要としながら我々が受け取ったのUnixタイムスタンプを秒単位でいたので、我々は1000 Unixタイムスタンプを乗算、注意してください。

とりあえずそれで結構です。/今のところそれで問題ありません。 IIIではパーツ、我々は日付の書式設定を見ていきますチャートコントロール。

会話をして下さい： Bloglinesの | テクノラティ

共有し、拡張： ブックマークdel.icio.usで | それをディグ！ | redditを！