Jquery UI Datepicker:首先突出显示

时间:2016-08-29 08:53:59

标签: jquery user-interface datepicker

如果var express为true,我想在前3个可选日中添加一个类。

以下代码有效但如果我选择了一个日期,那么正在删除的类

$datepicker.datepicker({
        dayNamesMin: ["S", "M", "D", "M", "D", "F", "S"],
        beforeShowDay:$.datepicker.noWeekends,
        firstDay: 1,
        minDate: d,
        dateFormat: "dd.mm.yy",
        onSelect: function (dateText, inst) {

            $('.delivery-date').text(dateText);

            var printReleaseDateParts =dateText.split('.');
            var printReleaseDate = new Date(printReleaseDateParts[2],printReleaseDateParts[1]-1,printReleaseDateParts[0]);
            printReleaseDate.setDate(printReleaseDate.getDate() - printRelease);
            $('.print-release-date').text($.datepicker.formatDate('dd.mm.yy', printReleaseDate));
            $datepicker.removeClass('express');
            if (express) {
                $datepicker.addClass('express');
                $('*[data-handler="selectDay"]:lt(3)').addClass('express');
            } else {
                $datepicker.removeClass('express');
                $('*[data-handler="selectDay"]:lt(3)').removeClass('express');

            }

        },
        onChangeMonthYear: function(){
            console.log('onChangeMonthYear');

        }
    });

var express由复选框设置。最后,如果选中该复选框,则用户应该能够选择突出显示的快递日期。快递日期是常规首次选择日前3天。第一个可选日期由更改

上的复选框更改
$('input:checkbox[name=option-express]').change(function () {
            if ($(this).prop("checked") == true) {
                $datepicker.addClass('express');
                var d = calculateMinDate(deliveryExpress);
                $datepicker.datepicker("option", "minDate", d);
                $('*[data-handler="selectDay"]:lt(3)').addClass('express');

                express = true;


            } else {
                $datepicker.removeClass('express');
                var d = calculateMinDate(deliveryRegular);
                $datepicker.datepicker("option", "minDate", d);
                $('*[data-andler="selectDay"]:lt(3)').removeClass('express');

                express = false;
            }
        });

应突出显示工作日。

那么突出头几天的最佳做法是什么?

修改

现在我为beforeShowDay实现了一个自定义函数,但没有运气。

表示,console.log被触发了四次,但是没有添加类。

var expressDates = ["08/29/2016", "08/30/2016", "08/31/2016", "09/01/2016"];
function expressDays(date) {
            var noWeekend = $.datepicker.noWeekends(date);
            if (noWeekend[0] && express) {
                for (var i = 0; i < expressDates.length; i++) {
                    if (new Date(expressDates[i]).toString() == date.toString()) {
                        console.log('express day!')
                        return [true, 'express', 'Express'];
                    }
                }
                return [true, ''];
            } else {
                return noWeekend;
            }
        }

1 个答案:

答案 0 :(得分:0)

好吧,我自己想通了。我修改了beforeShowDay的函数。我把我的快递日期放在一个数组中并用$ .inArray()

检查
function expressDays(date) {
            var noWeekend = $.datepicker.noWeekends(date);
            var expressDates = [];
            for (var i = 0; i < deliveryExpress-1; i++) {
                expressDates.push(moment($datepicker.datepicker("option", "minDate")).businessAdd(i).format('L'))
            }

            if (noWeekend[0] && express) {
                var dateString = $.datepicker.formatDate('mm/dd/yy', date);
                if($.inArray(dateString,expressDates) >=0){
                    return [true, 'express', 'Express'];
                }else{
                    return [true, 'noexpress'];
                }
            } else {
                return noWeekend;
            }
        }