Daterangepicker 默认日期不起作用

Question

我正在使用Daterangepicker。

我正在从后端获取开始和结束日期，它采用字符串格式。例如（2020-02-22）。

但是当我将这些日期作为默认值传递时，它不起作用。

我的代码：

HTML

<input name="daterange_x" type="text" class="form-control">

JS

var start_date = moment('2020-04-29').format('YYYY-MM-DD');

var end_date = moment('2020-05-05').format('YYYY-MM-DD');

$('input[name="daterange_x"]').daterangepicker({

    opens: 'right',

    minDate:new Date(),

    startDate: start_date,

    endDate: end_date,

}, function(start, end, label) {

    start_date = start.format('YYYY-MM-DD')

    end_date = end.format('YYYY-MM-DD')

    $('#id_start_date').val(start_date);

    $('#id_end_date').val(end_date);

});

https://jsfiddle.net/rmtest/d28g130q/3/

Answer 1

您可以通过locale将 daterangepicker 的选项设置为 来解决此问题'YYYY-MM-DD'，该格式与您在获取start_date&时使用的格式相同end_date：var start_date = moment('2020-04-29').format('YYYY-MM-DD');var end_date = moment('2020-05-05').format('YYYY-MM-DD');$('input[name="daterange_x"]').daterangepicker({&nbsp; opens: 'right',&nbsp; minDate: new Date(),&nbsp; startDate: start_date,&nbsp; endDate: end_date,&nbsp; locale: {&nbsp; &nbsp; format: 'YYYY-MM-DD'&nbsp; }}, function(start, end, label) {&nbsp; start_date = start.format('YYYY-MM-DD')&nbsp; end_date = end.format('YYYY-MM-DD')&nbsp; $('#id_start_date').val(start_date);&nbsp; $('#id_end_date').val(end_date);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"><script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script><script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script><input name="daterange_x" type="text" class="form-control">