JSFiddle - React, Tailwind, and code Playground

by Regisc

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://rawgit.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker.js"></script>
<link rel="stylesheet" href="https://rawgit.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker.css">
<input class="dates-range form-control datetimepicker" type="text" />

CSS

.dates-range {
  width: 300px;
}

JavaScript

var ranges = {
  "24 hours": [moment().subtract(24, 'hours'), moment()],
  "last 7 days": [moment().subtract(7, 'days'), moment()],
  "last 30 days": [moment().subtract(30, 'days'), moment()]
};

$(".dates-range").daterangepicker({
  "timePicker": true,
  "timePicker24Hour": true,
  "locale": {
    "format": "YYYY-MM-DD HH:mm"
  },
  "minDate": moment("1900-01-01T00:00:00").startOf('year'),
  "maxDate": moment().endOf('day'),
  "ranges": ranges,
  "defaultRange": "last 30 days",
  "autoUpdateInput": true,
  "alwaysShowCalendars": true,
  "width": "370px"
});