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

Question

我正在使用从 https://github.com/eternicode/bootstrap-datepicker/ 下载的 bootstrap 日期纠察插件，它运行良好，但问题是两个日历都显示同月 10/19/2014（2014 年 10 月）。我想为 'from' 日期日历显示 2014 年 1 月 (01/10/2014)，为 'to' 日期日历显示 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"

...或者您想要配置它。

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

Date Range Picker Showing endDate on both calendars

javascript

jquery

datepicker

twitter-bootstrap

bootstrap-datepicker