如何在 Bootstrap daterangepicker 中 selecting 开始日期后自动 select 结束日期

Question

$('#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)。

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

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

Answer 2

初始化时可以提供回调函数daterangepicker。回调获取选定日期作为输入，您可以 add 15 days using momentjs (one of components dependencies). Then you can use daterangepicker setStartDate and 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（小写）。

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

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

如何在 Bootstrap daterangepicker 中 selecting 开始日期后自动 select 结束日期

How to select End date automatically after selecting startdate in Bootstrap daterangepicker

asp.net-mvc

jquery

momentjs

bootstrap-daterangepicker