DateRangePicker

Question

我在表单中使用 DataRangePicker JS 库来选择两个日期的范围。 DRP 提供放置带有预定义日期下拉菜单的按钮的功能，例如昨天、今天、上个月等，但我希望在单击时将其与原始下拉菜单 window 结合使用日期输入字段。

DPR 确实提供了可以（以某种方式）执行此操作的设置生成器，但只允许设置静态日期。从那以后，我使用 moment() 函数将它们更改为按钮的动态范围，但无法设法将 JS 组合成一个函数。我在这里做错了什么？

HTML

  <!-- Date and time range -->
  <div class="form-group">
    <label>Date and time range:</label>

    <div class="input-group">
      <div class="input-group-addon">
        <i class="fa fa-clock-o"></i>
      </div>
      <input type="text" class="form-control" name="daterangepicker" id="daterangepicker" />
    </div>
    <!-- /.input group -->

      <button type="button" class="btn btn-default pull-right" name="daterange-btn" id="daterange-btn" />
        <span>
          <i class="fa fa-calendar"></i> Date range picker
        </span>
        <i class="fa fa-caret-down"></i>
      </button>

  </div>
  <!-- /.form group -->

用于输入字段的 JS（有效）

$(function() {
    $('input[name="daterangepicker"]').daterangepicker({
        alwaysShowCalendars: true,
        showWeekNumbers: true,
        timePicker: true,
        timePicker24Hour: true,
        timePickerIncrement: 30,
        locale: {
            format: 'DD/MM/YYYY H:mm'
        }
    });

按钮的 JS（有效）

$('input[name="daterange-btn"]').daterangepicker(
    {
      ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      },
      startDate: moment().subtract(29, 'days'),
      endDate: moment()
    },
    function (start, end) {
      $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
)

输入字段的组合 JS（不工作）

  <script type="text/javascript">
    //Date range picker with time picker
    $(function() {
        $('input[name="daterangepicker"]').daterangepicker({
            alwaysShowCalendars: true,
            showWeekNumbers: true,
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 30,
            locale: {
                format: 'DD/MM/YYYY H:mm'
            },

            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
              },
              startDate: moment().subtract(29, 'days'),
              endDate: moment()
            },

            function (start, end) {
              $('#daterangepicker').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }
        )                           
    });
    </script>

Answer 1

你错过了一些括号和错误的地方括号

  <script type="text/javascript">
    //Date range picker with time picker
    $(function() {
        $('input[name="daterangepicker"]').daterangepicker({
            alwaysShowCalendars: true,
            showWeekNumbers: true,
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 30,
            locale: {
                format: 'DD/MM/YYYY H:mm'
            },
            { // here
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                  },
                  startDate: moment().subtract(29, 'days'),
                  endDate: moment()
            },

            function (start, end) {
              $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }                           
    });
}); // here
    </script>

Answer 2

原来 DRP 语法以特殊方式处理 "ranges" 对象，不需要括号。感谢@AKZhang，他指出了缺少的括号。

以下代码对我有用：

  <script type="text/javascript">
    //Date range picker with time picker
    $(function() {
        $('input[name="daterangepicker"]').daterangepicker({
            alwaysShowCalendars: true,
            showWeekNumbers: true,
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 30,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            startDate: moment().subtract(29, 'days'),
            endDate: moment(),

            locale: {
                format: 'DD/MM/YYYY H:mm'
            },

            function (start, end) {
              $('#daterangepicker').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            } 
        });
    }); // here
    </script>

DateRangePicker - 将范围选择与动态预设相结合

DateRangePicker - combine range selection with dynamic presets

javascript

jquery