Daterangepicker 默认日期不起作用

Question

我正在使用Daterangepicker。我正在从后端获取开始和结束日期，它采用字符串格式。例如（2020-02-22）。但是当我将这些日期作为默认值传递时，它不起作用。我的代码：HTML<input name="daterange_x" type="text" class="form-control">JSvar 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({

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