Daterangepicker default dates not working [Invalid date]

Question

I am fetching start and end date from backend, it comes in string format. e.g (2020-02-22).

But when I pass those dates as default, it is not working.

My code :

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/

Can you create a [small demo](https://stackoverflow.com/help/minimal-reproducible-example) for this using [jsfiddle](https://jsfiddle.net/) or [snippet](https://meta.stackoverflow.com/a/358993/1823841) here to show the issue happening. — palaѕн, Apr 29 '20 at 04:35
Thanks. That would help others to better understand and debug the issue and provide better solutions. — palaѕн, Apr 29 '20 at 04:41
https://stackoverflow.com/questions/44776463/how-to-set-default-date-in-daterangepicker — Kuru, Apr 29 '20 at 04:59

score 3 · Accepted Answer · answered Apr 29 '20 at 04:58

You can fix this issue by just setting the locale option for the daterangepicker to 'YYYY-MM-DD', the same format that you are using in getting start_date & end_date like:

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

Daterangepicker default dates not working [Invalid date]

1 Answers1