javascript - Bootstrap日期选择器自动填充结束日期

标签 javascript jquery twitter-bootstrap datepicker

我正在使用 Bootstrap Datepicker here为了显示一个简单的日历范围选择器。到目前为止一切都运行良好,但是我想要一些我似乎无法弄清楚的附加功能。

我想选择一个开始日期,然后自动填写结束日期(+10 天)。

我确信这是可能的,但我无法弄清楚。

我创建了一个Fiddle 。非常感谢任何帮助。

我的JS如下;

$( document ).ready(function() {
    $('#sandbox-container .input-daterange').datepicker({
        format: "dd/mm/yy",
        startDate: "0d",
        endDate: "+10d",
        todayBtn: "linked",
        clearBtn: true,
        multidateSeparator: " ",
        forceParse: false,
        daysOfWeekDisabled: "0,6",
        orientation: "top auto",
        todayHighlight: true,
        toggleActive: true
    });
});

我的HTML如下;

<div class="col-md-5" id="sandbox-container">

<h2>Select borrow date</h2> 
    <div class="input-daterange input-group" id="datepicker">
        <input type="text" class="input-lg form-control" name="start" placeholder="borrow date" /> <span class="input-group-addon">to</span>
        <input type="text" class="input-lg form-control" name="end" placeholder="return date" />
    </div>
</div>

最佳答案

您可以查看此链接 Datepicker using jquery

您必须在第一个日期选择器的更改功能中包含 JavaScript

 $('firstdatepicker').change(function() {
 var date2 = $('firstdatepicker').datepicker('getDate', '+1d'); 
 date2.setDate(date2.getDate()+1); 
 $('seconddatepicker').datepicker('setDate', date2);
});

关于javascript - Bootstrap日期选择器自动填充结束日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29984862/

相关文章:

javascript - 如果选择了两个选项之一,则 Greasemonkey 脚本可更改下拉选项

javascript - jQuery 将 id 添加到要附加到正文的元素

javascript - 计算器 Javascript/Jquery 存储变量

html - 为什么 BootStrap 列偏移不起作用?

javascript - 带有数据的初始化表仅适用于断点

javascript - AmCharts - 使用 dataprovider 设置最大值轴

jquery - Async Javascript导致JS错误函数不存在

jquery - 组合 jQuery 函数

jquery - 在不扭曲形状/阴影的情况下向图形添加文本。 CSS

javascript - &lt;input type=text> 的 HTML 替代品,可以分配一个唯一的 ID 并与文本混合