-2 
$('#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 中显示当前文本框日期以突出显示。任何帮助将不胜感激...

4

4 回答 4

1

您可以在初始化时提供回调函数daterangepicker。回调获取选定的日期作为输入，您可以add使用 momentjs（组件依赖项之一）来 15 天。然后你可以使用 daterangepickersetStartDate和setEndDate 方法来设置值 on #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(camel case) 和format(lowercase)。

于 2017-09-05T15:12:48.233 回答
-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); 
     }
    });
于 2017-09-05T15:00:13.223 回答
-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); 
     }
});

于 2018-07-16T15:26:19.727 回答
-1 
 $('#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 
             });
         });
于 2017-09-19T03:24:46.280 回答