JSFiddle - React, Tailwind, and code Playground

by Dan Daniel

HTML

<div class="form-group">
    <label class="control-label col-sm-2" for="date">Date:</label>
    <div class="col-sm-5">
        <input id="date1" type="text" class="form-control" name="training_start_date" value=""> 
    </div>
</div>
<br>
<span id="pickedDate">  </span>  <span id='diff'>  </span>

JavaScript

$('#date1').datepicker();

$('#date1').change(function() {
    var pickedDate = $('#date1').datepicker("getDate");
    var diff = new Date() - $('#date1').datepicker("getDate");
    var dayDiff = Math.floor(diff / (1000*60*60*24) * -1) + 1;
    
    $('#pickedDate').text(getDatStr(pickedDate));
    $('#diff').text('(' + dayDiff + ' Days )');
});

var monthNames = [
  "January", "February", "March",
  "April", "May", "June", "July",
  "August", "September", "October",
  "November", "December"
];

var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

function getDatStr(date) {
  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();
  var dayOfWeek = date.getDay();

	console.log(day, monthNames[monthIndex], year);
  return days[dayOfWeek] + ', ' + day + ' ' + monthNames[monthIndex] + ', ' +  year;
}