我想使用日期范围选择器日历显示 24 个月

Question

我在我的网页中使用了这个日历日期范围选择器，并且想显示 24 个月而不是 2 个月。

我用这个功能

numberOfMonts: '24'

但它对我不起作用。请参阅codepen

提前致谢:)

Answer 1

选项

numberOfMonts

不存在https://www.daterangepicker.com/

您可以使用两个日期选择器控件代替日期范围选择器。

<div class="input-group input-daterange col-md-4">
  <input type="text" class="start-date form-control" value="2012-04-05">
  <span class="input-group-addon">to</span>
  <input type="text" class="end-date form-control" value="2012-04-19">
</div>

像这样

小提琴：https://codepen.io/ravidevgam/pen/PoYdYeE

Answer 2

如果我理解正确的话，你想在打开选择器时看到 24 个迷你日历，而不是 2 个。我认为目前唯一的方法是更改库代码。

如果您从源代码中打开

datarangepicker.js

，您当前在第 101 行有模板定义：

options.template =
'<div class="daterangepicker">' +
    '<div class="ranges"></div>' +
    '<div class="drp-calendar left">' +
        '<div class="calendar-table"></div>' +
        '<div class="calendar-time"></div>' +
    '</div>' +
    '<div class="drp-calendar right">' +
        '<div class="calendar-table"></div>' +
        '<div class="calendar-time"></div>' +
    '</div>' +
    '<div class="drp-buttons">' +
        '<span class="drp-selected"></span>' +
        '<button class="cancelBtn" type="button"></button>' +
        '<button class="applyBtn" disabled="disabled" type="button"></button> ' +
    '</div>' +
'</div>';

并可以相应地更改它以拥有更多

drp-calendar

div（在特定情况下为 48）。

然后您必须构建日历，在第 609-610 行到

renderCalendar

的调用转到 619

renderCalendar: function(side) { ...

并遵循更改，而不是使用

this.leftCalendar

和

this.rightCalendar

您可以使用数组日历。

我认为它应该很容易做到，也许我会用你的参数做它

numberOfMonths

.

缺点是每次更新库时都必须重新做一遍。如果你打算经常更新，我认为在库上做这件事甚至不值得，你应该直接做一个完整的自定义代码。从该文件的简要视图来看，似乎没有任何简单的方法可以在代码中进行注入或扩展方法/类，要重写太多内容才能使日历足够通用。