jQuery UI Datepicker - 在开始日期选择获取日期，然后在结束日期分配一个类与开始日期单元

Question

我期待从开始日期输入日期选择日期输入到结束日期输入，以便我可以突出显示在开始日期选择的单元格。

目前，我的代码如下：

var yourGlobalVariable; 
var dateselected = ''; 

$('#start_date').datepicker({ 
    beforeShow:function(textbox, instance){ 
     $('#date-picker-box').append($('#ui-datepicker-div')), 

     setTimeout(function() { 
      instance.dpDiv.css({ 
       top: 30, 
       left: 0 
      }); 
     }, 0); 
     $("#ui-datepicker-div").addClass("ui-calendar-one"); 
    }, 
    beforeShowDay: function(date){ 
     var string = jQuery.datepicker.formatDate('yy-mm-dd', date); 
     return [ calendar.unavailable_dates.indexOf(string) == -1 ] 
    }, 
    minDate: 0, 
    onSelect: function (dateText, inst) { 

     yourGlobalVariable = $(this).datepicker("getDate"); 
     dateselected = dateText; 




     var start = $("#start_date").datepicker("getDate"); 
     var end = $("#end_date").datepicker("getDate"); 
     var currentDate = new Date(start); 
     var between = []; 

     while (currentDate <= end) { 
      between.push(new Date(currentDate)); 
      currentDate.setDate(currentDate.getDate() + 1); 
     } 

     var test = calendar.unavailable_dates; 

     let myDate = []; 
     for (let i = 0; i < test.length; i++) { 
      var newDate = new Date(test[i]); 
      newDate.setHours(newDate.getHours() - 1); 
      myDate.push(newDate); 

     } 

     let arrayBetween = []; 
     for (let i = 0; i < between.length; i++) { 
      var stringBetween = between[i].toString(); 
      arrayBetween.push(stringBetween); 
     } 

     let arrayMyDate = []; 
     for (let i = 0; i < myDate.length; i++) { 
      var stringMyDate = myDate[i].toString(); 
      arrayMyDate.push(stringMyDate); 
     } 

     var atleastOne = arrayMyDate.some(function(item){ 
      return arrayBetween.indexOf(item) > -1; 
     }); 

     if (atleastOne == true) { 
      $("#start_date").addClass("taken-range"); 
      $("#end_date").addClass("taken-range"); 
      $(".disabled-dates-error").show(); 
      $(".cta button.btn").prop('disabled', true); 
     } 

     console.log(this); 
    }, 
    /*altField: '#start_date', 
    altFormat: 'dd M yy',*/ 
    dateFormat: 'dd M yy' 
}); 


$('#end_date').datepicker({ 
    beforeShow:function(textbox, instance){ 
     $('#date-picker-box').append($('#ui-datepicker-div')), 

     setTimeout(function() { 
      instance.dpDiv.css({ 
       top: 30, 
       left: 0 
      }); 
     }, 0); 
     $("#ui-datepicker-div").addClass("ui-calendar-two"); 
     if(dateselected != '') { 
      $("#end_date").datepicker('setDate',dateselected); 
     } 
    }, 
    minDate: 0, 

    onSelect: function (dateText, inst) { 

     var start = $("#start_date").datepicker("getDate"); 
     var end = $("#end_date").datepicker("getDate"); 
     var currentDate = new Date(start); 
     var between = []; 

     while (currentDate <= end) { 
      between.push(new Date(currentDate)); 
      currentDate.setDate(currentDate.getDate() + 1); 
     } 

     var test = calendar.unavailable_dates; 

     let myDate = []; 
     for (let i = 0; i < test.length; i++) { 
      var newDate = new Date(test[i]); 
      newDate.setHours(newDate.getHours() - 1); 
      myDate.push(newDate); 

     } 

     let arrayBetween = []; 
     for (let i = 0; i < between.length; i++) { 
      var stringBetween = between[i].toString(); 
      arrayBetween.push(stringBetween); 
     } 

     let arrayMyDate = []; 
     for (let i = 0; i < myDate.length; i++) { 
      var stringMyDate = myDate[i].toString(); 
      arrayMyDate.push(stringMyDate); 
     } 

     var atleastOne = arrayMyDate.some(function(item){ 
      return arrayBetween.indexOf(item) > -1; 
     }); 

     if (atleastOne == true) { 
      $("#start_date").addClass("taken-range"); 
      $("#end_date").addClass("taken-range"); 
      $(".disabled-dates-error").show(); 
      $(".cta button.btn").prop('disabled', true); 
     } 


    }, 
    beforeShowDay: function(date){ 
     /*var newGlobalVarDate = yourGlobalVariable.datepicker.formatDate('yy-mm-dd', date);*/ 

     console.log(yourGlobalVariable); 
     var string = jQuery.datepicker.formatDate('yy-mm-dd', date); 

     return [ calendar.unavailable_dates.indexOf(string) == -1 ]; 


    }, 
    /*altField: '#end_date', 
    altFormat: 'dd M yy'*/ 
    dateFormat: 'dd M yy' 

}); 

在所附截图，你可以看到一个开始日期已经选定，但不是活跃在结束日期日历（类活跃于TD有绿色背景颜色）。

任何想法如何处理这将是很大的。由于] 1

编辑：该代码（这是必要的，以防止含禁用天范围内选择）似乎防止活动类加法：

function removeDisabledUnselectable() { 
    $("#start_date").removeClass("taken-range"); 
    $("#end_date").removeClass("taken-range"); 
    $(".disabled-dates-error").hide(); 
    $(".cta button.btn").prop('disabled', false); 
} 

$("#start_date").on('click', function() { 
    $(this).datepicker('setDate', null); 
    removeDisabledUnselectable(); 
}); 
$("#end_date").on('click', function() { 
    $(this).datepicker('setDate', null); 
    removeDisabledUnselectable(); 
}); 

Answer 1

希望这有助于！

添加以下代码在$('#end_date')

var final=new Date(yourGlobalVariable).getDate(); 
if (date.getDate()==final) { 
    return [true, "active",""]; 
} 

$(function() { 
 
var yourGlobalVariable; 
 
var dateselected = ''; 
 
var calendar=[{ 
 
"unavailable_dates": [ 
 
"2017-09-14", 
 
"2017-09-15", 
 
"2017-09-16" 
 
] 
 
}] 
 

 
$('#start_date').datepicker({ 
 
beforeShow:function(textbox, instance){ 
 
$('#date-picker-box').append($('#ui-datepicker-div')), 
 

 
setTimeout(function() { 
 
instance.dpDiv.css({ 
 
top: 30, 
 
left: 0 
 
}); 
 
}, 0); 
 
$("#ui-datepicker-div").addClass("ui-calendar-one"); 
 
}, 
 
beforeShowDay: function(date){ 
 
var string = jQuery.datepicker.formatDate('yy-mm-dd', date); 
 
return [ calendar[0].unavailable_dates.indexOf(string) == -1 ] 
 
}, 
 
minDate: 0, 
 
onSelect: function (dateText, inst) { 
 

 
yourGlobalVariable=$(this).datepicker("getDate"); 
 
dateselected = dateText; 
 

 

 

 

 
var start = $("#start_date").datepicker("getDate"); 
 
var end = $("#end_date").datepicker("getDate"); 
 
var currentDate = new Date(start); 
 
var between = []; 
 

 
while (currentDate <= end) { 
 
between.push(new Date(currentDate)); 
 
currentDate.setDate(currentDate.getDate() + 1); 
 
} 
 

 
var test = calendar[0].unavailable_dates; 
 

 
let myDate = []; 
 
for (let i = 0; i < test.length; i++) { 
 
var newDate = new Date(test[i]); 
 
newDate.setHours(newDate.getHours() - 1); 
 
myDate.push(newDate); 
 

 
} 
 

 
let arrayBetween = []; 
 
for (let i = 0; i < between.length; i++) { 
 
var stringBetween = between[i].toString(); 
 
arrayBetween.push(stringBetween); 
 
} 
 

 
let arrayMyDate = []; 
 
for (let i = 0; i < myDate.length; i++) { 
 
var stringMyDate = myDate[i].toString(); 
 
arrayMyDate.push(stringMyDate); 
 
} 
 

 
var atleastOne = arrayMyDate.some(function(item){ 
 
return arrayBetween.indexOf(item) > -1; 
 
}); 
 

 
if (atleastOne == true) { 
 
$("#start_date").addClass("taken-range"); 
 
$("#end_date").addClass("taken-range"); 
 
$(".disabled-dates-error").show(); 
 
$(".cta button.btn").prop('disabled', true); 
 
} 
 

 
console.log(this); 
 
}, 
 
/*altField: '#start_date', 
 
altFormat: 'dd M yy',*/ 
 
dateFormat: 'dd M yy' 
 
}); 
 

 

 
$('#end_date').datepicker({ 
 
beforeShow:function(textbox, instance){ 
 
$('#date-picker-box').append($('#ui-datepicker-div')); 
 
setTimeout(function() { 
 
instance.dpDiv.css({ 
 
top: 30, 
 
left: 0 
 
}); 
 
}, 0); 
 
$("#ui-datepicker-div").addClass("ui-calendar-two"); 
 
if(dateselected != '') { 
 
$("#end_date").datepicker('setDate',dateselected); 
 
} 
 
}, 
 
minDate: 0, 
 

 
onSelect: function (dateText, inst) { 
 

 
var start = $("#start_date").datepicker("getDate"); 
 
var end = $("#end_date").datepicker("getDate"); 
 
var currentDate = new Date(start); 
 
var between = []; 
 

 
while (currentDate <= end) { 
 
between.push(new Date(currentDate)); 
 
currentDate.setDate(currentDate.getDate() + 1); 
 
} 
 

 
var test = calendar[0].unavailable_dates; 
 

 
let myDate = []; 
 
for (let i = 0; i < test.length; i++) { 
 
var newDate = new Date(test[i]); 
 
newDate.setHours(newDate.getHours() - 1); 
 
myDate.push(newDate); 
 

 
} 
 

 
let arrayBetween = []; 
 
for (let i = 0; i < between.length; i++) { 
 
var stringBetween = between[i].toString(); 
 
arrayBetween.push(stringBetween); 
 
} 
 

 
let arrayMyDate = []; 
 
for (let i = 0; i < myDate.length; i++) { 
 
var stringMyDate = myDate[i].toString(); 
 
arrayMyDate.push(stringMyDate); 
 
} 
 

 
var atleastOne = arrayMyDate.some(function(item){ 
 
return arrayBetween.indexOf(item) > -1; 
 
}); 
 

 
if (atleastOne == true) { 
 
$("#start_date").addClass("taken-range"); 
 
$("#end_date").addClass("taken-range"); 
 
$(".disabled-dates-error").show(); 
 
$(".cta button.btn").prop('disabled', true); 
 
} 
 

 

 
}, 
 
beforeShowDay: function(date){ 
 
/*var newGlobalVarDate = yourGlobalVariable.datepicker.formatDate('yy-mm-dd', date);*/ 
 

 
console.log(yourGlobalVariable); 
 
var final=new Date(yourGlobalVariable).getDate(); 
 
if (date.getDate()==final) { 
 
return [true, "active",""]; 
 
} 
 
var string = jQuery.datepicker.formatDate('yy-mm-dd', date); 
 

 
return [ calendar[0].unavailable_dates.indexOf(string) == -1 ]; 
 

 

 
}, 
 
/*altField: '#end_date', 
 
altFormat: 'dd M yy'*/ 
 
dateFormat: 'dd M yy' 
 

 
}); 
 
});

td.active.ui-datepicker-current-day a{ 
 
background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<input name="startDate" id="start_date" class="date-picker" /> 
 
<input name="startDate" id="end_date" class="date-picker" /> 
 
<div id="date-picker-box"> 
 
</div>