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

标签 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 上激活的类(class)具有绿色背景颜色)。

任何关于如何解决这个问题的想法都会很棒。谢谢![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();
});

最佳答案

希望这有帮助!

在$('#end_date')的beforeShowDay函数中添加以下代码

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>

关于javascript - jQuery UI Datepicker - 在开始日期选择获取日期，然后在结束日期将类分配给具有开始日期的单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46014850/

上一篇：javascript - 自定义数组名称

下一篇：javascript - React，用 props 循环

相关文章：

javascript - 为什么 console.log(window) 有效但 JSON.stringify(window) 无效，我怎么能打败它？

javascript - 使用 php ajax 表单发送数据时 AJAX 请求失败

JavaScript:序列化后保留方法

javascript - jQuery 完整日历 : set a different color to each event from front-end

javascript - 检测私密浏览 - Safari 问题

php - 如何将简单的搜索查询传递到 URL 中？

sql - 扩大两个日期之间的月份

javascript nodeType 无论如何都是 1？

asp.net-mvc - 将默认日期格式应用于 ASP.NET MVC 3 应用程序中的所有此类字段的最佳方法是什么？

c - 如何检查 ANSI C 中的周数是偶数还是奇数？

©2024 IT工具网  联系我们