JSFiddle - React, Tailwind, and code Playground

by dhchow

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script src="http://www.filamentgroup.com/examples/daterangepicker_v2/js/daterangepicker.jQuery.js"></script>
<link rel="stylesheet" href="http://www.filamentgroup.com/examples/daterangepicker_v2/css/ui.daterangepicker.css">
<link rel="stylesheet" href="http://www.filamentgroup.com/examples/daterangepicker_v2/css/redmond/jquery-ui-1.7.1.custom.css">
<ul>
    <li id="dates_dropdown" class="dropdown series last">
        <div id="date_range_input"><input type="text" id="date_range" value="Choose a Date"/></div>
    </li>
</ul>

JavaScript

$(function() {
    $('input').daterangepicker({/*presetRanges: [
        {text: _('Today'), dateStart: 'Today', dateEnd: 'Today'},
        {text: _('Yesterday'), dateStart: 'Yesterday', dateEnd: 'Yesterday'},
        {text: _('Last3Days'), dateStart: '-3 days', dateEnd: 'Today'},
        {text: _('Last7Days'), dateStart: '-7 days', dateEnd: 'Today'},
        {text: _('Last30Days'), dateStart: '-30 days', dateEnd: 'Today'},
        {text: _('MonthToDate'), dateStart: function(){ return Date.parse('today').moveToFirstDayOfMonth();}, dateEnd: 'Today'},
        {text: _('ThePreviousMonth'), dateStart: function(){ return Date.parse('-1 month').moveToFirstDayOfMonth();}, dateEnd:function(){return Date.parse('-1 month').moveToLastDayOfMonth();}},
        {text: _('Last3Months'), dateStart: '-3 Months', dateEnd: 'Today'},
        {text: _('YearToDate'), dateStart: function(){var x=Date.parse('today');x.setMonth(0);x.setDate(1); return x;}, dateEnd:'today'}
      ],*/
      presets: {},
      onChange: function() {
        /*// Because daterangepicker fires onChange twice for preset dates, and only once on manual changes.
        if (cotweet.reports.HeaderDatePicker.onchangeFired == 0) {
          setTimeout( function(){
            if (c.checkValidRange()) {
              c.adjustFrequency();
              $p().dispatch(cotweet.ping.names.REPORTS_RELOAD, cotweet.ping.phases.REQUEST);
            }
            cotweet.reports.HeaderDatePicker.onchangeFired = 0; 
          }, 500);
        } 
        cotweet.reports.HeaderDatePicker.onchangeFired++;*/
      }});
});