首页>>Jquery文字>>时间插件，弹出时间选择框,可以选择本月，最近7天等(2014-02-09)

时间插件，弹出时间选择框,可以选择本月，最近7天等

 请看演示最后一个，可以选择的项目不同于一般的时间插件

时间插件，弹出时间选择框,可以选择本月，最近7天等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.          <div class="span12">  
  3.   
  4.             <h4>Simple Date Picker</h4>  
  5.             <div class="well">  
  6.   
  7.                <form class="form-horizontal">  
  8.                  <fieldset>  
  9.                   <div class="control-group">  
  10.                     <label class="control-label" for="reservation">Reservation dates:</label>  
  11.                     <div class="controls">  
  12.                      <div class="input-prepend">  
  13.                        <span class="add-on"><i class="glyphicon glyphicon-calendar icon-calendar"></i></span><input type="text" style="width: 200px" name="reservation" id="reservation" value="03/18/2013 - 03/23/2013" />   
  14.                      </div>  
  15.                     </div>  
  16.                   </div>  
  17.                  </fieldset>  
  18.                </form>  
  19.   
  20.                <script type="text/javascript">  
  21.                $(document).ready(function() {  
  22.                   $('#reservation').daterangepicker();  
  23.                });  
  24.                </script>  
  25.   
  26.             </div>  
  27.   
  28.             <h4>Simple Date & Time Picker</h4>  
  29.             <div class="well">  
  30.   
  31.                <form class="form-horizontal">  
  32.                  <fieldset>  
  33.                   <div class="control-group">  
  34.                     <label class="control-label" for="reservationtime">Reservation dates:</label>  
  35.                     <div class="controls">  
  36.                      <div class="input-prepend">  
  37.                        <span class="add-on"><i class="glyphicon glyphicon-calendar icon-calendar"></i></span>  
  38.                        <input type="text" style="width: 300px" name="reservation" id="reservationtime" value="08/01/2013 1:00 PM - 08/01/2013 1:30 PM"  class="span4"/>  
  39.                      </div>  
  40.                     </div>  
  41.                   </div>  
  42.                  </fieldset>  
  43.                </form>  
  44.   
  45.                <script type="text/javascript">  
  46.                $(document).ready(function() {  
  47.                   $('#reservationtime').daterangepicker({  
  48.                     timePicker: true,  
  49.                     timePickerIncrement: 30,  
  50.                     format: 'MM/DD/YYYY h:mm A'  
  51.                   });  
  52.                });  
  53.                </script>  
  54.   
  55.             </div>              
  56.   
  57.             <h4>Options Usage Example</h4>  
  58.   
  59.             <div class="well" style="overflow: auto">  
  60.   
  61.                <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">  
  62.                   <i class="glyphicon glyphicon-calendar icon-calendar icon-large"></i>  
  63.                   <span></span> <b class="caret"></b>  
  64.                </div>  
  65.   
  66.                <script type="text/javascript">  
  67.                $(document).ready(function() {  
  68.                   $('#reportrange').daterangepicker(  
  69.                      {  
  70.                         startDate: moment().subtract('days', 29),  
  71.                         endDate: moment(),  
  72.                         minDate: '01/01/2012',  
  73.                         maxDate: '12/31/2014',  
  74.                         dateLimit: { days: 60 },  
  75.                         showDropdowns: true,  
  76.                         showWeekNumbers: true,  
  77.                         timePicker: false,  
  78.                         timePickerIncrement: 1,  
  79.                         timePicker12Hour: true,  
  80.                         ranges: {  
  81.                            'Today': [moment(), moment()],  
  82.                            'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],  
  83.                            'Last 7 Days': [moment().subtract('days', 6), moment()],  
  84.                            'Last 30 Days': [moment().subtract('days', 29), moment()],  
  85.                            'This Month': [moment().startOf('month'), moment().endOf('month')],  
  86.                            'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]  
  87.                         },  
  88.                         opens: 'left',  
  89.                         buttonClasses: ['btn btn-default'],  
  90.                         applyClass: 'btn-small btn-primary',  
  91.                         cancelClass: 'btn-small',  
  92.                         format: 'MM/DD/YYYY',  
  93.                         separator: ' to ',  
  94.                         locale: {  
  95.                             applyLabel: 'Submit',  
  96.                             fromLabel: 'From',  
  97.                             toLabel: 'To',  
  98.                             customRangeLabel: 'Custom Range',  
  99.                             daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],  
  100.                             monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],  
  101.                             firstDay: 1  
  102.                         }  
  103.                      },  
  104.                      function(start, end) {  
  105.                       console.log("Callback has been called!");  
  106.                       $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));  
  107.                      }  
  108.                   );  
  109.                   //Set the initial state of the picker label  
  110.                   $('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));  
  111.                });  
  112.                </script>  
  113.   
  114.             </div>  
  115.   
  116.          </div>  
  117.       </div>  

 


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