Date Picker, Time Picker, and Date Time Picker

ピッカーウィジェットは日付と時刻の値を入力するために使用できるコントロールを表示します。

注意
フォーム要素を（ピッカーウィジェットを使用せずに）自動で初期化するには、`form`要素内に`type=date/time/datetime`オプションをつけた`input`要素を使用します。

アプリケーションに日付時刻ピッカーウィジェットを追加するには、次のコードを使用します。

<li data-role="list-divider" data-line="false" class="ui-datetime-text-sub" > Date/Time Picker(Custom) - <span id="selected-date1"><em>(select a date first)</em></span></li>
<li class="ui-li-dialogue ui-datetime">
   <div class="ui-datetime-text-main">
      <input type="datetime" name="demo-date" id="demo-date"
             data-format="MMM dd yyyy   hh:mm tt" value="2012-06-30T00:00:00+09:00" />
   </div>
</li>

ピッカーのオプションを次の表で説明します。

オプション	入力タイプ	説明
data-format	文字列	日付と時刻の形式を設定します。デフォルト値は、システムロケールの日付と時刻の設定です。
type	文字列	ピッカーのスタイルを設定します。そのスタイルのオプションは、`date`（日付のみを表示）、`time`（時刻のみを表示）、および`datetime`（日付と時刻の両方を表示）です。フォルト値は`datetime`です。
value	文字列	ピッカーの値を設定します。デフォルト値は、現在のシステム時間です。

ピッカーは、changeイベントのコールバックを定義することができます。changeイベントのコールバックはピッカーの値が変更されたときに起動します。

<li data-role="list-divider" data-line="false"  class="ui-datetime-text-sub" > Data Format(MMMM) - <span id="selected-date6"><em>(select a date first)</em></span> </li>
<li class="ui-li-dialogue ui-datetime ui-datetime">
   <div class="ui-datetime-text-main">
      <input data-format="MMMM/dd/yyyy hh:mm tt" id="datetest" value="2013/1/31 15:08:44" type="datetime">
   </div>
</li>

<script>
   $("#datetest").bind( "change", function( )
   {
      $("#selected-date6").text($("#datetest").datetimepicker("value")) ;
   });
</script>

W3C DTF形式で現在の日付と時刻を設定または取得するために、ピッカーのvalueメソッドを使用することができます。

$("#selected-date1").datetimepicker("value"); // 2012-05-30T01:23:45
$("#selected-date1").datetimepicker("value", "Jun 30, 2012 09:00");

次に読むドキュメント

Web UI Frameworkリファレンス

日本語訳： yasuyk

http://www.softolet.com

This content is licensed under Creative Commons Attribution 3.0. For details, see the Content License.

TIZENアプリ開発研究ブログ興味しんしんドリーム

このブログはTIZENアプリ開発情報を実践して情報を共有する為のブログです。

Date Picker, Time Picker, and Date Time Picker

Date Picker, Time Picker, and Date Time Picker

次に読むドキュメント