I am selecting a date in the Air Datepicker and trying to compare today's date to the selected date to determine the difference in days. So, for example, if today is 12/11/2016 and I select 12/20/2016, I want to get the difference, which is 9.

I keep running into the following error: "end.diff is not a function".

I've stripped the following code down to the essentials:

HTML

<form>
    <input id="datereq" name="datereq" type="text" class="dateReq" value="" />
</form>
<div id="selected"></div>

JQUERY

 var date = new Date(),
     disabledDays = [0, 6];

 $('.dateReq').datepicker({
     dateFormat: 'mm/dd/yyyy',
     minDate: new Date(),
     language: 'en',
     autoClose: true,
     onRenderCell: function(date, cellType) {
         if (cellType == 'day') {
             var day = date.getDay(),
                 isDisabled = disabledDays.indexOf(day) != -1;
             return {
                 disabled: isDisabled
             };
         }
     },

     // Display Appropriate Order Type Options
     onSelect: function onSelect(fd, date) {
         var now = moment(new Date()).format('MM/DD/YYYY'),
             end = fd,
             days = end.diff(now, 'days');
         $('#selected').html('now:' + now + 'end:' + end + 'diff:' + days);
         //console.log('end:' + end);
         //console.log('diff:' + days);
     }
 });

Fiddle

/

I am selecting a date in the Air Datepicker and trying to compare today's date to the selected date to determine the difference in days. So, for example, if today is 12/11/2016 and I select 12/20/2016, I want to get the difference, which is 9.

I keep running into the following error: "end.diff is not a function".

I've stripped the following code down to the essentials:

HTML

<form>
    <input id="datereq" name="datereq" type="text" class="dateReq" value="" />
</form>
<div id="selected"></div>

JQUERY

 var date = new Date(),
     disabledDays = [0, 6];

 $('.dateReq').datepicker({
     dateFormat: 'mm/dd/yyyy',
     minDate: new Date(),
     language: 'en',
     autoClose: true,
     onRenderCell: function(date, cellType) {
         if (cellType == 'day') {
             var day = date.getDay(),
                 isDisabled = disabledDays.indexOf(day) != -1;
             return {
                 disabled: isDisabled
             };
         }
     },

     // Display Appropriate Order Type Options
     onSelect: function onSelect(fd, date) {
         var now = moment(new Date()).format('MM/DD/YYYY'),
             end = fd,
             days = end.diff(now, 'days');
         $('#selected').html('now:' + now + 'end:' + end + 'diff:' + days);
         //console.log('end:' + end);
         //console.log('diff:' + days);
     }
 });

Fiddle

https://jsfiddle.net/qn530dpq/

• javascript
• jquery
• date
• datepicker
• momentjs

• 3 When you add .format() is added, the diff won't see it as an moment obj. – Ezrqn Kemboi Commented Oct 19, 2020 at 7:34

3 Answers 3

The diff function is only available on moment objects. Try this instead:

var now = moment(new Date()),
end = moment(fd),
days = end.diff(now, 'days');

the first argument of the onSelect function is the date as text - not a moment object. Try to call the diff function on a moment object representing the selected date and it will work. Also you'll have to specify the variable "end" which is probably your "fd". Check it out: https://jsfiddle.net/t9suf65p/

    // Initialize Datepicker
    var date = new Date(),
    disabledDays = [0, 6];

    $('.dateReq').datepicker({
        dateFormat: 'mm/dd/yyyy',
                minDate: new Date(),
        language: 'en',
        autoClose: true,
        onRenderCell: function (date, cellType) {
            if (cellType == 'day') {
                var day = date.getDay(),
                    isDisabled = disabledDays.indexOf(day) != -1;
                return {
                    disabled: isDisabled
                };
            }
        },

        // Display Appropriate Order Type Options
       onSelect: function onSelect(fd, date) {
           var selectedDate = moment(fd, 'MM/DD/YYYY');
           var now = moment(new Date());
           var days = selectedDate.diff(now, 'days');
                $('#selected').html('now: ' + now.format('MM/DD/YYYY') +  'end: ' + selectedDate.format('MM/DD/YYYY') + ' diff: ' + days);
                //console.log('end:' + end);
                //console.log('diff:' + days);
        }
    });

You can use something like this:

$('#datepickerId').datepicker({
    onSelect: function() {
        var date = $(this).datepicker('getDate');
        var today = new Date();
        var dayDiff = Math.ceil((today - date) / (1000 * 60 * 60 * 24));
    }
});