daterangepicker控件的使用

港控/mmm° 2021-10-08 05:46 548阅读 0赞

![Center][]

$(document).ready(function() {
         
             var cb = function(start, end, label) {
              //console.log("aammm"+start.toISOString(), end.toISOString(), label);
              
               $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
            };
    
    
            var optionSet1 = {
              startDate: moment().subtract(29, 'days'),
              endDate: moment(),
              minDate: '01/01/2010',
              maxDate: '12/31/2100',
              dateLimit: {
                days: 365
              },
              showDropdowns: true,
              showWeekNumbers: true,
              timePicker: true,
              timePickerIncrement: 1,
              timePicker24Hour: true,
              ranges: {
                '今天': [moment().startOf('day'), moment().endOf('day'),],
                '昨天': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                '过去7天': [moment().subtract(6, 'days').startOf('week'), moment().endOf('week')],
                '过去30天': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
                '这个月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
              },
              opens: 'left',
              buttonClasses: ['btn btn-default'],
              applyClass: 'btn-small btn-primary',
              cancelClass: 'btn-small',
              format: 'MM/DD/YYYY',
              //format: 'YYYY-MM-DD HH:mm:ss',
              separator: ' to ',
              locale: {
                applyLabel: '提交',
                cancelLabel: '清除',
                fromLabel: 'From',
                toLabel: 'To',
                customRangeLabel: '自定义',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                firstDay: 1
              }
            };
            
            
            $('#reportrange span').html(moment().subtract(29, 'days').format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
            $('#reportrange').daterangepicker(optionSet1, cb);
            $('#reportrange').on('show.daterangepicker', function() {
             //  console.log("show event fired");
            });
            $('#reportrange').on('hide.daterangepicker', function() {
              // console.log("hide event fired");
            });
          
            $('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
             //  console.log("cancel event fired");
            });
            $('#options1').click(function() {
              $('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
            });
            $('#options2').click(function() {
              $('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
            });
            $('#destroy').click(function() {
              /* $('#reportrange').data('daterangepicker').remove(); */
            $('#reportrange').data('daterangepicker'); 
            });
         
          });
          
         
         
        </script>
      
        
       <script type="text/javascript">
              $(document).ready(function() {
           $('.date-picker').daterangepicker({
          singleDatePicker: false,
           timePicker: true,
           timePicker24Hour: true,
           showDropdowns:false,
           //autoUpdateInput:false,
           startDate:'00:00:00', 
           endDate:'00:00:00',
             calender_style: "picker_4",
            locale: {
                format: 'HH:mm:ss'
              },
    
    
           }, function(start, end, label) {
             console.log(start.format('HH:mm:ss'));
        });
          
          });
       
       </script>

[Center]: /images/20211008/e3ca30fc7f37407b9d8871bc3cabd79d.png