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" ><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" ><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" ><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" ><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                         <li data-role="list-divider" data-line="false"  class="ui-datetime-text-sub" ><span id="selected-date4"><em>(select a date first)</em></span> </li>
  33                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  34                                 <div class="ui-datetime-text-main">
  35                                         <input data-format="MM/dd/yyyy hh:mm tt" value="2013/1/31 15:08:44" type="datetime">
  36                                 </div>
  37                         </li>
  38                         <li data-role="list-divider" data-line="false"  class="ui-datetime-text-sub" ><span id="selected-date4"><em>(select a date first)</em></span> </li>
  39                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  40                                 <div class="ui-datetime-text-main">
  41                                         <input data-format="MMMM/dd/yyyy hh:mm tt" value="2013/1/31 15:08:44" type="datetime">
  42                                 </div>
  43                         </li>
  44                 </ul>
  45         </div><!-- /content -->
  46         <div data-role="footer">
  47         </div>
  48 </div> <!-- /page -->
  49
  50