demos/tizen-winsets/widgets/datefield.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
   5         <script src="../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
   6         <script src="../configure.js"></script>
   7         <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   8         <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
   9                         data-framework-theme="tizen-white"
  10                         data-framework-viewport-width="device-width">
  11         </script>
  12         <title>Tizen UI - Datefield</title>
  13         <!-- for compatibility test -->
  14         <meta name="apple-mobile-web-app-capable" content="yes" />
  15         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  16         <link rel="apple-touch-icon" href="../icon-tizen.png" />
  17 </head>
  18 <body>
  19 <div data-role="page" id="datetimepicker-demo" data-add-back-btn="true">
  20         <div data-role="header" data-position="fixed">
  21                 <h1>DATE/TIME PICKER</h1>
  22         </div>
  23         <div data-role="content">
  24                 <ul data-role="listview">
  25                         <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>
  26                         <li class="ui-li-dialogue ui-datetime">
  27                                 <div class="ui-datetime-text-main">
  28                                         <input type="datetime" name="demo-date" id="demo-date"
  29                                                 data-format="MMM dd yyyy        hh:mm tt" value="2012-06-30T00:00:00+09:00" />
  30                                 </div>
  31                         </li>
  32                         <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>
  33                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  34                                 <div class="ui-datetime-text-main">
  35                                         <input type="datetime" name="demo-date2" id="demo-date2" />
  36                                 </div>
  37                         </li>
  38                         <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>
  39                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  40                                 <div class="ui-datetime-text-main">
  41                                         <input type="date" name="demo-date3" value="2012-06-30" id="demo-date3"/>
  42                                 </div>
  43                         </li>
  44                         <li data-role="list-divider" data-line="false"  class="ui-datetime-text-sub" ><span id="selected-date4"><em>(select a time first)</em></span> </li>
  45                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  46                                 <div class="ui-datetime-text-main">
  47                                         <input type="time" name="demo-date4" id="demo-date4" />
  48                                 </div>
  49                         </li>
  50                         <li data-role="list-divider" data-line="false"  class="ui-datetime-text-sub" ><span id="selected-date5"><em>(select a date first)</em></span> </li>
  51                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  52                                 <div class="ui-datetime-text-main">
  53                                         <input data-format="MM/dd/yyyy hh:mm tt" value="2013/1/31 15:08:44" type="datetime" id="demo-date5">
  54                                 </div>
  55                         </li>
  56                         <li data-role="list-divider" data-line="false"  class="ui-datetime-text-sub" ><span id="selected-date6"><em>(select a date first)</em></span> </li>
  57                         <li class="ui-li-dialogue ui-datetime ui-datetime">
  58                                 <div class="ui-datetime-text-main">
  59                                         <input data-format="MMMM/dd/yyyy" value="2013/1/31" type="date" id="demo-date6">
  60                                 </div>
  61                         </li>
  62                 </ul>
  63         </div><!-- /content -->
  64         <div data-role="footer">
  65         </div>
  66         <script src="datefield.js"></script>
  67 </div> <!-- /page -->
  68 </body>
  69 </html>
  70