javascript - 日期范围选择器在两个日历上显示结束日期

Question

我正在使用从 https://github.com/eternicode/bootstrap-datepicker/ 下载的 bootstrap date picket 插件它工作得很好，但问题是两个日历都显示同一个月 10/19/2014(2014 年 10 月)。我想在“起始”日期日历中显示 2014 年 1 月 (01/10/2014)，在“截止”日期日历中显示 2014 年 10 月 (10/19/2014)。

$('.input-daterange').datepicker({
            autoclose: true,
            startDate: '01/10/2014',
            endDate: '10/19/2014'
});

代码示例:http://jsfiddle.net/o2rq93x0/2/

Answer 1

如果您想为每个输入进行不同的配置，则应该循环访问不同的输入字段。选择器中有 2 个输入不会自动计算出 startDate 和 endDate，将其划分为两个日期选择器。每个日期选择器在 startDate 和 endDate 之间都有自己的范围，因此您应该像这样进行编程。

$('.input-daterange input').each(function(){/*set configuration here*/});

要拥有一个简单的系统来配置日期选择器实例，您可以使用 data- 属性。

<input type="text" class="input-small form-control" name="start" data-date="01/11/2014" data-start="01/10/2014" data-end="10/18/2014" />

然后只需循环每个输入并使用 data- 作为您的配置。

由于您正在过去工作，并且日期选择器默认将当前月份设置为入口点，因此您可以像这样强制该值:

input.val('10/19/2014').datepicker('update');

<强> See a working example...

使用:

• data-start="01/19/2014"
• data-end="10/18/2014"
• 数据日期=“01/19/2014”

...或者您想要配置它的任何方式。