javascript - Jquery - Datepicker Calculating the days between two dates -

i using jquery datepicker , trying find days between 2 dates. however, dates not selectable according database, have unavailable dates.

what check selected date range if available (otherwise give error div) , calculate number of days.

i have come far; can disable days on calendar according database if booked. not able value(dates input) outside scope of code can check if there booked day between date range.

<div class="row">     <!-- date picker-->     <label for="from">from</label>     <input type="text" id="from" name="from">     <label for="to">to</label>     <input type="text" id="to" name="to">     <!-- /.date picker -->     <div id="combined-dates" style="display:none;">please select unbooked range..</div> </div> </div> <script>     $(function() {         $.ajax({             type: "get",             datatype: "json",             url: "/houses/<%= @house.id %>",             success: function(schedules) {                  var length = object.keys(schedules).length                   var array = []                 (var = 0; < length; i++) {                      if (schedules[i].status = " booked ") {                         array.push(schedules[i].date)                      }                  }                   $("#from").datepicker({                     defaultdate: "+1w",                     changemonth: true,                     numberofmonths: 1,                     dateformat: "dd/mm/yy",                     onclose: function(selecteddate) {                         $("#to").datepicker("option", "mindate", selecteddate);                         //var selected1 = selecteddate.split("/")                         //console.log(selected1)                     },                     beforeshowday: function(date) {                         var string = jquery.datepicker.formatdate('yy-mm-dd', date);                         return [array.indexof(string) == -1]                     }                 });                 $("#to").datepicker({                     defaultdate: "+1w",                     changemonth: true,                     numberofmonths: 1,                     dateformat: "dd/mm/yy",                     onclose: function(selecteddate) {                         $("#from").datepicker("option", "maxdate", selecteddate);                         //var selected2 = selecteddate.split("/")                         //console.log(selected2)                     },                     beforeshowday: function(date) {                         var string = jquery.datepicker.formatdate('yy-mm-dd', date);                         return [array.indexof(string) == -1]                      }                 });                 //non of them works!!                 //var d = $('#from').datepicker().val();                 //var d = $('#from').datepicker('getdate').val();                 //console.log(d);             }         });       }); </script> 

try - fiddle demo

you can loop through date range on select of to , validate if booked date encountered. below code.

$("#to").datepicker({         defaultdate: "+1w",         changemonth: true,         numberofmonths: 1,         dateformat: "dd/mm/yy",         beforeshowday: function (date) {             var string = jquery.datepicker.formatdate('yy-mm-dd', date);             return [array.indexof(string) == -1];          },         onselect: function (date) {             var isvalid = true;              var fromdate = $("#from").datepicker('getdate');             var todate = $("#to").datepicker('getdate');             var bookedates = [];             (var d = new date(fromdate); d <= todate; d.setdate(d.getdate() + 1)) {                 if (array.indexof(jquery.datepicker.formatdate('yy-mm-dd', d)) > -1) {                     isvalid = false;                     bookedates.push(jquery.datepicker.formatdate('yy-mm-dd', d));                 }             }             if (!isvalid) {                 alert('dates ' + bookedates.tostring() + ' within selected range booked');                 $("#to").val("");             }         }     });