JSFiddle - React, Tailwind, and code Playground

by Dan Daniel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Close Date:
    <input id="date1" value="Pick Date" type="button" class="btn btn-default"> 
    <span style="top: 10px;" class="glyphicon glyphicon-calendar"></span>

CSS

.glyphicon {
    font-size: 25px;
}

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;

    var str = getDatStr(pickedDate);
    $('#date1').val(str + ' (' + dayDiff + ' Days)');
});

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

var days = ['SUN','MON','TUE','WED','THU','FRI','SAT'];

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;
}