Datepicker根据输入设置endDate属性

Question

我在这个链接中使用bootstrap datepicker： https://eternicode.github.io/bootstrap-datepicker/

这是我的代码：

<div class='input-group input-daterange' id="datetimepicker">
   <input type="text" class="input-sm form-control" name="start" />
   <span class="input-group-addon">to</span>
   <input type="text" class="input-sm form-control" name="end" />
</div>

<script type="text/javascript">
   $(function () {
       $('#datetimepicker').datepicker({
           maxViewMode: 1,
           datesDisabled: [@Html.Raw(ViewBag.dis)],
           orientation: "bottom left",
           keyboardNavigation: false,
           clearBtn: true,
           daysOfWeekDisabled: "0,6",
           startDate: '+2d',
           autoclose: true
       });

我正在使用范围datepicker，它会生成2个输入字段，＆＃39; start＆＃39;并且＆＃39;结束＆＃39;。当我为“开始”选择日期时字段，＆＃39;结束的endDate属性＆＃39;字段应设置为＆＃34; forDate我选择+ 5天＆＃34;。我怎样才能做到这一点？

感谢您的帮助

Answer 1

使用 changeDate 方法并相应地设置相应的startDate和endDate。请考虑以下设置：

$(function() {
    //initialize on both inputs
    $('#start,#end').datepicker({
        maxViewMode: 1,
        orientation: "bottom left",
        keyboardNavigation: false,
        clearBtn: true,
        daysOfWeekDisabled: "0,6",
        startDate: '+2d',
        autoclose: true
    }).on('changeDate', function(e) {
        var ctrl = $(this);//get the targeted control
        var selected = new Date(e.date); //get the selected date
        if (ctrl.attr('id') == "start") { //if its a start date
            $("#end").datepicker('setStartDate', new Date(selected.setDate(selected.getDate() + 5))) //set end date + 5
        } else {
            $("#start").datepicker('setEndDate', new Date(selected.setDate(selected.getDate() - 5))) //vice versa for end date
        }
    });
});

<强>

的 DEMO HERE

Answer 2

试试这个：

$(function() {
    $('#start,#end').datepicker({
        maxViewMode: 1,
        orientation: "bottom left",
        keyboardNavigation: false,
        clearBtn: true,
        daysOfWeekDisabled: "0,6",
        startDate: '+2d',
        autoclose: true
    });

    $('#start').change(function(){
        var date1 = $('#start').datepicker('getDate');
        var date = new Date( Date.parse( date1 ) ); 
        date.setDate( date.getDate() + 5 );

        var newDate = date.toDateString(); 
        newDate = new Date( Date.parse( newDate ) );

        $('#end').datepicker('setDate', newDate );
    });
});