如何在 Bootstrap daterangepicker 中选择开始日期后自动选择结束日期答案

【问题标题】：How to select End date automatically after selecting startdate in Bootstrap daterangepicker如何在 Bootstrap daterangepicker 中选择开始日期后自动选择结束日期
【发布时间】：2018-02-13 22:18:04
【问题描述】：

$('#Startdate').daterangepicker({
    singledatepicker=true,
    locale:{Format : "dd-mm-yyyy"}
});

$('#Enddate').daterangepicker({
    singledatepicker=true,
    locale:{Format : "dd-mm-yyyy"}
});

在 UserInterface 中，我有两个文本框 @html.EditiorFor(m=>m.Startdate) 和 @html.EditiorFor(m=>m.Enddate)。

当我们从 startdate 和 enddate 中选择日期时，我们如何更改自动显示该月的结束日期？我也无法在 daterangepicker 中显示当前文本框日期以突出显示。任何帮助将不胜感激...

【问题讨论】：

在 daterangepicker 中显示当前文本框日期以突出显示是什么意思？
我的意思是说，如果文本框的日期为 12/09/2017 ，但 daterangepicker 显示的日期为 06/09/2017 在日历中突出显示。
@VincenzoC：请帮忙，这对我来说非常紧急......

标签： jquery asp.net-mvc momentjs bootstrap-daterangepicker

【解决方案1】：

    $('#Startdate').daterangepicker({
               singledatepicker=true,
               locale:{Format : "dd-mm-yyyy"},  
       onSelect: function(selectedDate) { 
            var date = $(this).datepicker("getDate"); 
            date.setDate(date.getDate() + 15);
            $("#Enddate").datepicker("setDate", date);
            $("#Enddate").datepicker("option", "minDate", selectedDate);
            $("#Enddate").datepicker("option", "maxDate", date); 
     }
    });

【讨论】：

一些cmets会很好

【解决方案2】：

可以在初始化daterangepicker时提供回调函数。回调获取所选日期作为输入，您可以使用 momentjs（组件依赖项之一）add 15 天。然后您可以使用 daterangepicker setStartDate 和 setEndDate methods 设置 #Enddate 上的值。

这是一个工作示例：

$('#Startdate').daterangepicker({
  singleDatePicker: true,
  locale:{format : "DD-MM-YYYY"}
}, function(start, end, label){
  if( start ){
    var end = start.clone().endOf('month');
    $('#Enddate').data('daterangepicker').setStartDate(end.startOf('day'));
    $('#Enddate').data('daterangepicker').setEndDate(end.endOf('day'));
  }
});

$('#Enddate').daterangepicker({
  singleDatePicker: true,
  locale:{format : "DD-MM-YYYY"}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<input id="Startdate">
<input id="Enddate">

请注意，您必须提供一个有效的对象作为daterangepicker 函数的参数。不要使用singledatepicker=true，注意大小写，daterangepicker的有效选项为singleDatePicker: true（驼峰式）和format（小写）。

【讨论】：

抱歉拼写错误 singledatepicker=true 。但它不起作用。
@user3085836 什么不起作用？你觉得 sn-p 有什么问题吗？
@VincenzoC：我得到，无法获取未定义或空引用的属性“setStartDate”。
@VincenzoC：对不起，我的错。此代码有效，谢谢。我还有一个问题，如何选择像 9 月 30 日或 10 月 31 日这样的月底日期。
我正在使用 moment().add('months',1).date(0) 但我总是显示当前月份的结束日期。

【解决方案3】：

 $('#StartDate').daterangepicker({
            singleDatePicker: true,
            locale: { format: "DD-MM-YYYY" }
        },
         function (start, end, label) {
             var selectedDate = start._d;
             var EndMonthDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0);
             EndMonthDate = EndMonthDate .getDate() + '/' + (EndMonthDate .getMonth() + 1) + '/' + EndMonthDate .getFullYear();
             $('#EndDate').daterangepicker({
                 singleDatePicker: true,
                 startDate: EndMonthDate 
             });
         });

【讨论】：

【解决方案4】：

$('#Startdate').daterangepicker({
               singledatepicker=true,
               locale:{Format : "dd-mm-yyyy"},  
       onSelect: function(selectedDate) { 
            var date = $(this).datepicker("getDate"); 
            date.setDate(date.getDate() + 15);
            $("#Enddate").datepicker("setDate", date);
            $("#Enddate").datepicker("option", "minDate", selectedDate);
            $("#Enddate").datepicker("option", "maxDate", date); 
     }
});

【讨论】：

请在您回答时添加一个关于您的代码在做什么以及它将如何解决提问者问题的小说明