jQuery UI Datepicker - 在开始日期选择获取日期，然后在结束日期将类分配给具有开始日期的单元格

时间：2017-09-02 14:36:02

标签： javascript jquery date datepicker

我希望将日期选择中的日期从开始日期输入传递到结束日期输入，以便我可以突出显示在开始日期选择的单元格。

目前，我的代码如下：

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上的活动类具有绿色背景颜色）。

任何关于如何处理这个问题的想法都会很棒。感谢![enter image description here] 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();
});

1 个答案:

答案 0 :(得分：0)

希望这有帮助！

在beforeShowDay

的$('#end_date')函数中添加以下代码 
var final=new Date(yourGlobalVariable).getDate();
if (date.getDate()==final) {
  return [true, "active",""];
}

＆＃13;
＆＃13; 
$( 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'

});
});
＆＃13; 
td.active.ui-datepicker-current-day a{
 background: green;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题