JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<label>select date</label>
 <input type="text" class="form-control selectrange" placeholder="select" >

JavaScript

$('.selectrange').daterangepicker({
    showDropdowns: true,
    timePicker: true,
    minDate: [moment().subtract(20,'years'),'inclusive'],
    maxDate: [moment(),'inclusive'],
    ranges: {
       'Today': [moment(), moment()],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'All Time':'all-time', // [minDate, maxDate]
    }
});