Daterangepicker default dates not working [Invalid date]

Question

I am using Daterangepicker .

I am fetching start and end date from backend, it comes in string format. eg (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/

Answer 1

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