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 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>
   8                         <li class="ui-li-dialogue ui-datetime">
   9                                 <div class="ui-datetime-text-main">
  10                                         <input type="datetime" name="demo-date" id="demo-date"
  11                                                 data-format="MMM dd yyyy        hh:mm tt" value="2012-06-30T00:00:00+09:00" />
  12                                 </div>
  13                         </li>
  14                         <li data-role="list-divider" data-line="false"  class="ui-datetime-text-sub" >Date/Time Picker - <span id="selected-date2"><em>(select a date first)</em></span></li>
  15                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  16                                 <div class="ui-datetime-text-main">
  17                                         <input type="datetime" name="demo-date2" id="demo-date2" />
  18                                 </div>
  19                         </li>
  20                         <li data-role="list-divider" data-line="false" class="ui-datetime-text-sub" >Date Picker  - <span id="selected-date3"><em>(select a date first)</em></span></li>
  21                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  22                                 <div class="ui-datetime-text-main">
  23                                         <input type="date" name="demo-date3" value="2012-06-30" id="demo-date3"/>
  24                                 </div>
  25                         </li>
  26                         <li data-role="list-divider" data-line="false"  class="ui-datetime-text-sub" > Time Picker - <span id="selected-date4"><em>(select a date first)</em></span> </li>
  27                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  28                                 <div class="ui-datetime-text-main">
  29                                         <input type="time" name="demo-date4" id="demo-date4" />
  30                                 </div>
  31                         </li>
  32                 </ul>
  33         </div><!-- /content -->
  34 </div> <!-- /page -->
  35
  36