demos/tizen-winsets/widgets/datefield.html

   1 <div data-role="page" id="datetimepicker-demo" data-add-back-btn="true">
   2         <div data-role="header" data-position="fixed">
   3                 <h1>Date/time picker</h1>
   4         </div>
   5         <div data-role="content">
   6                 <ul data-role="listview">
   7                         <li class="ui-li-dialogue ui-datetime">
   8                                 <div class="ui-datetime-text-main">
   9                                         <input type="datetime" name="demo-date" id="demo-date"
  10                                                 data-format="MMM dd yyyy        hh:mm tt" value="2012-06-30T00:00:00+09:00" />
  11                                 </div>
  12                                 <div class="ui-datetime-text-sub">
  13                                         Date/Time Picker(Custom) - <span id="selected-date1"><em>(select a date first)</em></span>
  14                                 </div>
  15                         </li>
  16                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  17                                 <div class="ui-datetime-text-main ui-datetime-nosubtitle">
  18                                         <input type="datetime" name="demo-date2" id="demo-date2" />
  19                                 </div>
  20                                 <div class="ui-datetime-text-sub">
  21                                         Date/Time Picker - <span id="selected-date2"><em>(select a date first)</em></span>
  22                                 </div>
  23                         </li>
  24                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  25                                 <div class="ui-datetime-text-main">
  26                                         <input type="date" name="demo-date3" value="2012-06-30" id="demo-date3"/>
  27                                 </div>
  28                                 <div class="ui-datetime-text-sub">
  29                                         Date Picker  - <span id="selected-date3"><em>(select a date first)</em></span>
  30                                 </div>
  31                         </li>
  32                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  33                                 <div class="ui-datetime-text-main">
  34                                         <input type="time" name="demo-date4" id="demo-date4" />
  35                                 </div>
  36                                 <div class="ui-datetime-text-sub">
  37                                         Time Picker - <span id="selected-date4"><em>(select a date first)</em></span>
  38                                 </div>
  39                         </li>
  40                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  41                                 <div class="ui-datetime-text-main ui-datetime-nosubtitle">
  42                                         <input type="datetime" name="demo-date2" id="demo-date2" />
  43                                 </div>
  44                         </li>
  45                 </ul>
  46         </div><!-- /content -->
  47 </div> <!-- /page -->
  48
  49