JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/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">

JavaScript

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);
});