JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/25c11d79/build/css/bootstrap-datetimepicker.min.css">
<br/>
<!--Space for the fiddle-->
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='myDatepicker'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$('#myDatepicker').datetimepicker({
  "timeZone": "",
  "format": false,
  "dayViewHeaderFormat": "MMMM YYYY",
  "extraFormats": false,
  "stepping": 15,
  "minDate": false,
  "maxDate": false,
  "useCurrent": true,
  "collapse": true,
  "locale": "en",
  "defaultDate": false,
  "disabledDates": false,
  "enabledDates": false,
  "icons": {
    "time": "glyphicon glyphicon-time",
    "date": "glyphicon glyphicon-calendar",
    "up": "glyphicon glyphicon-chevron-up",
    "down": "glyphicon glyphicon-chevron-down",
    "previous": "glyphicon glyphicon-chevron-left",
    "next": "glyphicon glyphicon-chevron-right",
    "today": "glyphicon glyphicon-screenshot",
    "clear": "glyphicon glyphicon-trash",
    "close": "glyphicon glyphicon-remove"
  },
  "tooltips": {
    "today": "Go to today",
    "clear": "Clear selection",
    "close": "Close the picker",
    "selectMonth": "Select Month",
    "prevMonth": "Previous Month",
    "nextMonth": "Next Month",
    "selectYear": "Select Year",
    "prevYear": "Previous Year",
    "nextYear": "Next Year",
    "selectDecade": "Select Decade",
    "prevDecade": "Previous Decade",
    "nextDecade": "Next Decade",
    "prevCentury": "Previous Century",
    "nextCentury": "Next Century",
    "pickHour": "Pick Hour",
    "incrementHour": "Increment Hour",
    "decrementHour": "Decrement Hour",
    "pickMinute": "Pick Minute",
    "incrementMinute": "Increment Minute",
    "decrementMinute": "Decrement Minute",
    "pickSecond": "Pick Second",
    "incrementSecond": "Increment Second",
    "decrementSecond": "Decrement Second",
    "togglePeriod": "Toggle Period",
    "selectTime": "Select Time"
  },
  "useStrict": false,
  "sideBySide": true,
  "daysOfWeekDisabled": false,
  "calendarWeeks": false,
  "viewMode": "days",
  "toolbarPlacement": "default",
  "showTodayButton": false,
  "showClear": false,
  "showClose": false,
  "widgetPositioning": {
    "horizontal": "auto",
    "vertical": "auto"
  },
  "widgetParent": null,
 ...