Daterangepicker 默认日期不起作用 [无效日期]答案

【问题标题】：Daterangepicker default dates not working [Invalid date]Daterangepicker 默认日期不起作用 [无效日期]
【发布时间】：2020-04-29 04:33:57
【问题描述】：

我正在使用Daterangepicker。

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

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

我的代码：

HTML

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

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/

【问题讨论】：

您能否在此处使用jsfiddle 或snippet 创建一个small demo 以显示正在发生的问题。
好的，我会尝试..
谢谢。这将有助于其他人更好地理解和调试问题并提供更好的解决方案。
@palaѕн ==> jsfiddle.net/rmtest/d28g130q/3
stackoverflow.com/questions/44776463/…

标签： javascript html jquery datepicker

【解决方案1】：

您可以通过将 daterangepicker 的 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">

【讨论】：