JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://bootswatch.com/3/cosmo/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input id="due-date" class="form-control" required minlength="10" maxlength="10" autocomplete="off" placeholder="Select due date" readonly>

JavaScript

(function() {
  $('#due-date').datepicker({
    format: {
      toDisplay: function(date, format, language) {
        return moment(date).local().format('DD MMMM, YYYY');
      },
      toValue: function(date) {
        return moment.utc(date, 'DD-MM-YYYY').toDate();
      }
    }
  }).on('changeDate', function(e) {
    console.log(e.date);
  })

})();