首页>>表单>>时间插件，设置input时间(2013-12-19)

时间插件，设置input时间

 input只能输入时间，包括日历选择，小时等等

时间插件，设置input时间
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1.  <div id="container">       
  2.       <script>  
  3.           $(function() {  
  4.             $('#basicExample').timepicker();  
  5.           });  
  6.         </script>  
  7.       
  8. <div class="example">  
  9. <h3>Basic Example</h3>  
  10.         <p><input id="basicExample" type="text" class="time" /></p>  
  11.   
  12.         <pre class="code" data-language="javascript">$('#basicExample').timepicker();</pre>  
  13.     </div>  
  14.   
  15.   
  16.   
  17.   
  18.   
  19.     <div class="example">  
  20.         <script>  
  21.           $(function() {  
  22.             $('#defaultValueExample').timepicker({ 'scrollDefaultNow': true });  
  23.           });  
  24.         </script>  
  25.   
  26.         <h3>Scroll Default Example</h3>  
  27.         <p>Set the scroll position to local time if no value selected.</p>  
  28.         <p><input id="defaultValueExample" type="text" class="time" /></p>  
  29.   
  30.         <pre class="code" data-language="javascript">$('#defaultValueExample').timepicker({ 'scrollDefaultNow': true });</pre>  
  31.     </div>  
  32.  
  33.     <div class="example">  
  34.         <script>  
  35.           $(function() {  
  36.             $('#setTimeExample').timepicker();  
  37.             $('#setTimeButton').on('click', function (){  
  38.               $('#setTimeExample').timepicker('setTime', new Date());  
  39.             });  
  40.           });  
  41.         </script>  
  42.   
  43.         <h3>Set Time Example</h3>  
  44.         <p>Dynamically set the time using a Javascript Date object.</p>  
  45.         <p>  
  46.             <input id="setTimeExample" type="text" class="time" />  
  47.             <button id="setTimeButton">Set current time</button>  
  48.         </p>  
  49.   
  50.         <pre class="code" data-language="javascript">$('#setTimeExample').timepicker();  
  51. $('#setTimeButton').on('click', function (){  
  52.     $('#setTimeExample').timepicker('setTime', new Date());  
  53. });</pre>  
  54.     </div>  
  55.   
  56.   
  57.   
  58.   
  59.   
  60.     <div class="example">  
  61.         <script>  
  62.           $(function() {  
  63.             $('#durationExample').timepicker({ 'minTime': '2:00pm', 'maxTime': '11:30pm', 'showDuration': true });  
  64.           });  
  65.         </script>  
  66.   
  67.         <h3>Duration Example</h3>  
  68.         <p>Set a starting time and see duration from that starting time. You can optionally set an maxTime as well.</p>  
  69.         <p><input id="durationExample" type="text" class="time" /></p>  
  70.   
  71.         <pre class="code" data-language="javascript">$('#durationExample').timepicker({  
  72.     'minTime': '2:00pm',  
  73.     'maxTime': '11:30pm',  
  74.     'showDuration': true  
  75. });</pre>  
  76.     </div>  
  77.   
  78.   
  79.   
  80.   
  81.     <div class="example">  
  82.         <script>  
  83.           $(function() {  
  84.             $('#onselectExample').timepicker();  
  85.             $('#onselectExample').on('changeTime', function() {  
  86.                 $('#onselectTarget').text($(this).val());  
  87.             });  
  88.           });  
  89.         </script>  
  90.   
  91.         <h3>Event Example</h3>  
  92.         <p>Trigger an event after selecting a value. Fires before the input onchange event.</p>  
  93.         <p>  
  94.           <input id="onselectExample" type="text" class="time" />  
  95.           <span id="onselectTarget" style="margin-left: 30px;"></span>  
  96.         </p>  
  97.   
  98.         <pre class="code" data-language="javascript">$('#onselectExample').timepicker();  
  99. $('#onselectExample').on('changeTime', function() {  
  100.     $('#onselectTarget').text($(this).val());  
  101. });</pre>  
  102.     </div>  
  103.   
  104.   
  105.   
  106.   
  107.   
  108.     <div class="example">  
  109.         <script>  
  110.           $(function() {  
  111.             $('#disableTimeRangesExample').timepicker({ 'disableTimeRanges': [['1am', '2am'], ['3am', '4:01am']] });  
  112.           });  
  113.         </script>  
  114.   
  115.         <h3>DisableTimeRanges Example</h3>  
  116.         <p>Prevent selection of certain time values.</p>  
  117.         <p><input id="disableTimeRangesExample" type="text" class="time" /></p>  
  118.   
  119.         <pre class="code" data-language="javascript">$('#disableTimeRangesExample').timepicker({  
  120.     'disableTimeRanges': [  
  121.         ['1am', '2am'],  
  122.         ['3am', '4:01am']  
  123.     ]  
  124. });</pre>  
  125.     </div>  
  126.   
  127.   
  128.   
  129.   
  130.   
  131.     <div class="example">  
  132.         <script>  
  133.           $(function() {  
  134.             $('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });  
  135.             $('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });  
  136.           });  
  137.         </script>  
  138.   
  139.         <h3>timeFormat Example</h3>  
  140.         <p>timepicker.jquery uses the time portion of <a href="http://php.net/manual/en/function.date.php">PHP's date formatting commands</a>.</p>  
  141.         <p><input id="timeformatExample1" type="text" class="time" /> <input id="timeformatExample2" type="text" class="time" /></p>  
  142.   
  143.         <pre class="code" data-language="javascript">$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });  
  144. $('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });</pre>  
  145.     </div>  
  146.   
  147.   
  148.   
  149.   
  150.   
  151.     <div class="example">  
  152.         <script>  
  153.           $(function() {  
  154.             $('#stepExample1').timepicker({ 'step': 15 });  
  155.             $('#stepExample2').timepicker({ 'step': 60 });  
  156.           });  
  157.         </script>  
  158.   
  159.         <h3>Step Example</h3>  
  160.         <p>Generate drop-down options with varying levels of precision.</p>  
  161.         <p><input id="stepExample1" type="text" class="time" /> <input id="stepExample2" type="text" class="time" /></p>  
  162.   
  163.         <pre class="code" data-language="javascript">$('#stepExample1').timepicker({ 'step': 15 });  
  164. $('#stepExample2').timepicker({ 'step': 60 });</pre>  
  165.     </div>  
  166.   
  167.   
  168.   
  169.   
  170.     <div class="example">  
  171.         <script>  
  172.           $(function() {  
  173.             $('#roundTimeExample').timepicker({ 'forceRoundTime': true });  
  174.           });  
  175.         </script>  
  176.   
  177.         <h3>forceRoundTime Example</h3>  
  178.         <p>jquery-timepicker allows entering times via the keyboard. Setting forceRoundTime to true will  
  179.             round the entered time to the nearest option on the dropdown list.</p>  
  180.         <p><input id="roundTimeExample" type="text" class="time" /> </p>  
  181.   
  182.         <pre class="code" data-language="javascript">$('#roundTimeExample').timepicker({ 'forceRoundTime': true });</pre>  
  183.     </div>  
  184.   
  185.   
  186.   
  187.   
  188.   
  189.     <div class="example">  
  190.         <script>  
  191.           $(function() {  
  192.             $('#selectButton').click(function(e) {  
  193.               e.preventDefault();  
  194.               $('#selectExample').timepicker();  
  195.               $(this).hide();  
  196.             });  
  197.           });  
  198.         </script>  
  199.   
  200.         <h3>Select Example</h3>  
  201.         <p>Use jquery-timepicker with <select> elements too.</p>  
  202.         <p><select id="selectExample" class="time">  
  203.                 <option value="12:00am">12:00am</option>  
  204.                 <option value="1:00am">1:00am</option>  
  205.                 <option value="2:00am">2:00am</option>  
  206.                 <option value="3:00am">3:00am</option>  
  207.                 <option value="4:00am">4:00am</option>  
  208.                 <option value="5:00am">5:00am</option>  
  209.                 <option value="6:00am">6:00am</option>  
  210.                 <option value="7:00am">7:00am</option>  
  211.                 <option value="8:00am">8:00am</option>  
  212.                 <option value="9:00am">9:00am</option>  
  213.                 <option value="10:00am">10:00am</option>  
  214.                 <option value="11:00am">11:00am</option>  
  215.                 <option value="12:00pm">12:00pm</option>  
  216.                 <option value="1:00pm">1:00pm</option>  
  217.                 <option value="2:00pm">2:00pm</option>  
  218.                 <option value="3:00pm">3:00pm</option>  
  219.                 <option value="4:00pm">4:00pm</option>  
  220.                 <option value="5:00pm">5:00pm</option>  
  221.                 <option value="6:00pm">6:00pm</option>  
  222.                 <option value="7:00pm">7:00pm</option>  
  223.                 <option value="8:00pm">8:00pm</option>  
  224.                 <option value="9:00pm">9:00pm</option>  
  225.                 <option value="10:00pm">10:00pm</option>  
  226.                 <option value="11:00pm">11:00pm</option>  
  227.             </select> <button id="selectButton">Convert to timepicker</button></p>  
  228.   
  229.         <pre class="code" data-language="javascript">$('#selectButton').click(function(e) {  
  230.     e.preventDefault();  
  231.     $('#selectExample').timepicker();  
  232.     $(this).hide();  
  233. });</pre>  
  234.     </div>  
  235.   
  236.   
  237.   
  238.   
  239.     <div class="example">  
  240.         <script>  
  241.           $(function() {  
  242.             $('#spanExample').timepicker();  
  243.             $('#openSpanExample').on('click', function(){  
  244.               $('#spanExample').timepicker('show');  
  245.             });  
  246.           });  
  247.         </script>  
  248.   
  249.         <h3>Non-input Example</h3>  
  250.         <p>jquery-timepicker can be bound to any visibile DOM element, such as spans or divs.</p>  
  251.         <p><span id="spanExample" style="background:#f00; padding:0 10px; margin-right:100px;"></span> <button id="openSpanExample">Pick Time</button> </p>  
  252.   
  253.         <pre class="code" data-language="javascript">$('#spanExample').timepicker();  
  254.     $('#openSpanExample').on('click', function(){  
  255.     $('#spanExample').timepicker('show');  
  256. });</pre>  
  257.     </div>  
  258.     <div class="example">  
  259.         <script src="lib/datepair.js"></script>  
  260.         <h3>Datepair Example</h3>  
  261.   
  262.         <p class="datepair" data-language="javascript">  
  263.             <input type="text" class="date start" />  
  264.             <input type="text" class="time start" /> to  
  265.             <input type="text" class="time end" />  
  266.             <input type="text" class="date end" />  
  267.         </p>           
  268.     </div>  

 


原文地址:http://www.freejs.net/article_biaodan_178.html