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 для указателя даты на '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({
  opens: 'right',
  minDate: new Date(),
  startDate: start_date,
  endDate: end_date,
  locale: {
    format: 'YYYY-MM-DD'
  }
}, 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);
});

<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">