Show day total count using jQuery UI datepicker

Question

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)

3 days in bracket is a count from current date

@Arun P Johny the day count from current date, today is 27 and I have selected 30 so 30-27=3 — Suresh Karia, Apr 12 '16 at 07:42

DDan · Answer 1 · 2016-04-12T09:55:08.293

3

You count calculate on change event of datepicker input.

See example Code:

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

See it working:

https://jsfiddle.net/ddan/jvxz6g4c/

EDIT

Edited version after your comment:

Added some extra string formatting and date utils:

$('#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();

  return days[dayOfWeek] + ', ' + day + ' ' + monthNames[monthIndex] + ', ' +  year;
}

See it working:

https://jsfiddle.net/ddan/jvxz6g4c/2/

EDIT

Small edits based on comment

https://jsfiddle.net/ddan/jvxz6g4c/4/

Slightly closer: https://jsfiddle.net/ddan/jvxz6g4c/6

edited Apr 12 '16 at 09:55

answered Apr 12 '16 at 07:48

DDan

8,068
5
33
52

this is great!! But I have date in this `Wednesday, 30 April, 2016 (n Days)` in this format – Suresh Karia Apr 12 '16 at 07:57
1

Edited based on your example. I hope it helps. – DDan Apr 12 '16 at 08:14
hey can you look at the image I have attached, so you can better understand, You have did great job but i want to print that value inside input – Suresh Karia Apr 12 '16 at 09:32
Sure thing! See edited. You can add some nice styling to it. – DDan Apr 12 '16 at 09:36
1

I'm glad I could help, see version 5, it's a bit closer to what you planned to get. – DDan Apr 12 '16 at 09:44
Nice effort BUT look at my clean and compressed code – Jubin Patel Apr 12 '16 at 09:47

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

This may help: Get difference between 2 dates in javascript?

Essentially convert the value returned from the datepicker in to a standard JS date.

var date1 = new Date("7/13/2010");
var date2 = new Date("12/15/2010");
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
alert(diffDays);

edited May 23 '17 at 12:16

Community

1
1

answered Apr 12 '16 at 07:44

Oam Psy

8,555
32
93
157

I dont want to use two dates and datepicker, I want to use only one date picker and first date will be current date and other date will be selected date – Suresh Karia Apr 12 '16 at 07:45

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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

score 1 · Answer 4 · answered Apr 12 '16 at 09:50

CODE: https://jsfiddle.net/5pr7uhc0/

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

Jquery:

$('#date1').datepicker({ dateFormat: 'DD, d MM, yy' });

$('#date1').change(function() {
    var date = $(this).datepicker('getDate');
    var today = new Date();
    var dayDiff = Math.ceil((today - date) / (1000*60*60*24) * -1);
    $('#date1').val($.datepicker.formatDate('DD, d MM, yy', date) + ' ( ' + dayDiff + ' Days )');
});

Just cleaned code from @DDan.

Show day total count using jQuery UI datepicker

4 Answers4

Fiddle demo