日期选择器-beforeShowDay不起作用

问题描述

我正在尝试使用beforeShowDay阻止日历中的日期.我发现此小提琴代码可以正常工作.但是我无法弄清楚为什么我的代码对我不起作用.我没有收到错误消息.我可以在控制台中看到不是-1的日期，问题是日历不会阻止不可用的日期(返回-1的日期).用户可以选择他们想要的任何日期.

I'm trying to use beforeShowDay to block days from the calendar. I found this Fiddle code that works. But I can`t figure out why my code doesn't work for me. I get no error-messages. I can see the dates in console which are not -1, the problem is that the calendar doesn't block the dates that are unavailable (the dates that return -1). The user can pick whatever date they want.

这是我的html:

<div class="input-group input-append date" id="dateRangePicker">
    <input type="text" id="date" class="form-control" name="date" />
    <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

这是我的JQuery:

    availableDates = ['04-25-2015','04-27-2015','04-22-2015'];
    $('#date').datepicker({
    dateFormat: 'mm-dd-yy',
    startDate: "04-20-2015",
    endDate: "01-01-2016",
    beforeShowDay: function(d) {
        var dmy = (d.getMonth()+1)
        if(d.getMonth()<9)
            dmy="0"+dmy;
        dmy+= "-";

        if(d.getDate()<10) dmy+="0";
            dmy+=d.getDate() + "-" + d.getFullYear();

        console.log(dmy+' : '+($.inArray(dmy, availableDates)));

        if ($.inArray(dmy, availableDates) != -1) {
            return [true, "","Available"];
        } else{
             return [false,"","unAvailable"];
        }
    },
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
    });

推荐答案

我创建了一个小提琴，将您的代码和您提供的链接结合在一起，我认为它可以正常工作.我只是使用了他的initialize方法，并在其中调用了datepicker.检查 此演示

I created a fiddle combining your code and from the link you provided and I think its working. I just used his initialize method and called the datepicker inside that. Check THIS DEMO

编辑-对于您提到的版本，您需要为datepicker [和jquery-ui.js]添加外部资源.

EDIT - For the version you mentioned you need to add external resource for datepicker [jquery-ui.css and jquery-ui.js].

选中此更新 FIDDLE

Check this Updated FIDDLE

这篇关于日期选择器-beforeShowDay不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！