日期選擇器設定結束日期的屬性，基於輸入

Question

我使用引導日期選擇器從這個鏈接： 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 
     }); 

我使用的範圍日期選擇器，它產生2個輸入字段， '開始'和'結束'。當我選擇「開始」字段的日期時，「結束」字段的endDate屬性應設置爲「forDate我選擇+5天」。我怎樣才能做到這一點？

感謝您的幫助

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); 
    }); 
});