third-party/jquery-ui-1.10.2/demos/spinner/time.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Spinner - Time</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../external/jquery.mousewheel.js"></script>
   9         <script src="../../external/globalize.js"></script>
  10         <script src="../../external/globalize.culture.de-DE.js"></script>
  11         <script src="../../ui/jquery.ui.core.js"></script>
  12         <script src="../../ui/jquery.ui.widget.js"></script>
  13         <script src="../../ui/jquery.ui.button.js"></script>
  14         <script src="../../ui/jquery.ui.spinner.js"></script>
  15         <link rel="stylesheet" href="../demos.css">
  16         <script>
  17         $.widget( "ui.timespinner", $.ui.spinner, {
  18                 options: {
  19                         // seconds
  20                         step: 60 * 1000,
  21                         // hours
  22                         page: 60
  23                 },
  24
  25                 _parse: function( value ) {
  26                         if ( typeof value === "string" ) {
  27                                 // already a timestamp
  28                                 if ( Number( value ) == value ) {
  29                                         return Number( value );
  30                                 }
  31                                 return +Globalize.parseDate( value );
  32                         }
  33                         return value;
  34                 },
  35
  36                 _format: function( value ) {
  37                         return Globalize.format( new Date(value), "t" );
  38                 }
  39         });
  40
  41         $(function() {
  42                 $( "#spinner" ).timespinner();
  43
  44                 $( "#culture" ).change(function() {
  45                         var current = $( "#spinner" ).timespinner( "value" );
  46                         Globalize.culture( $(this).val() );
  47                         $( "#spinner" ).timespinner( "value", current );
  48                 });
  49         });
  50         </script>
  51 </head>
  52 <body>
  53
  54 <p>
  55         <label for="spinner">Time spinner:</label>
  56         <input id="spinner" name="spinner" value="08:30 PM">
  57 </p>
  58 <p>
  59         <label for="culture">Select a culture to use for formatting:</label>
  60         <select id="culture">
  61                 <option value="en-EN" selected="selected">English</option>
  62                 <option value="de-DE">German</option>
  63         </select>
  64 </p>
  65
  66 <div class="demo-description">
  67 <p>
  68         A custom widget extending spinner. Use the Globalization plugin to parse and output
  69         a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down
  70         spins hours.
  71 </p>
  72 </div>
  73 </body>
  74 </html>