eirenaios eirenaios - 7 months ago 25
Javascript Question

Show day total count using jQuery UI datepicker

I am using jQuery ui datepicker and applied a date format like this


Wednesday, 30 April, 2016


Here is the code

HTML

<input type="text" id="closedate">


jQuery

$(document).ready(function() {
$("#closedate").datepicker({ dateFormat: 'DD, d MM, yy' });
});


Now how can I add day count from current date like this in my input?


Wednesday, 30 April, 2016 (3 Days)


demo

3 days in bracket is a count from current date

Answer

Just addition over answer provided by DDan

Use onSelect event and you can use formatted value framed by provided formatter.

$(document).ready(function() {
  $("#closedate").datepicker({
    dateFormat: 'DD, d MM, yy',
    onSelect: function(a, b) {
      var diff = new Date() - $(this).datepicker("getDate");
      diff = Math.floor(diff / (1000 * 60 * 60 * 24) * -1) + 1;
      var value = a + '(' + diff + ' days)'
      $(this).val(value);
    }
  });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<input type="text" id="closedate" size='50'>

Fiddle demo

Comments