JSFiddle - React, Tailwind, and code Playground

by David Simpson

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />



<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 400px">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span> <i class="fa fa-caret-down"></i>
</div>



<div id="reportrange-dates">

</div>

CSS

html {
  font-family: sans-serif;
}

html .daterangepicker.show-calendar .ranges {
    margin-top: 0;
    max-height: 235px;
    overflow: auto;
}



html .daterangepicker .ranges li:first {
  border-top-left-radius: 4px!important;
}

html .daterangepicker tr {
  border-se
}
html .daterangepicker td.disabled{
  
  text-decoration: none;
}


#reportrange-dates {
  padding: 20px 5px;
}

i.fa.fa-caret-down {
  float: right;
}

JavaScript

$(function() {

    var start = moment().subtract(7, 'days');
    var end = moment();
    var label = 'Last 7 Days';

    function callback(start, end, label) {
        $('#reportrange-dates').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        $('#reportrange span').html(label);
        
        console.log(' ------', {start, end, label});
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        maxDate: end,
        ranges: {       
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'Last 90 Days': [moment().subtract(89, 'days'), moment()],
           'Last 365 Days': [moment().subtract(364, 'days'), moment()],
           
           
           'This Month': [moment().startOf('month'), moment()],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
           
           'This Quarter': [moment().startOf('quarter'), moment()],
           'Last Quarter': [moment().subtract(1, 'quarter').startOf('quarter'), moment().subtract(1, 'quarter').endOf('quarter')],
           
           'This Year': [moment().startOf('year'), moment()],
           'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
        },
    		alwaysShowCalendars: true,
    }, callback);

    callback(start, end, label);
});