除非更改月份,否则显示日期前的嵌入式日期选择器不会触发

时间:2018-08-06 08:50:40

标签: jquery datepicker jquery-ui-datepicker

我已经阅读了一些有关内联日期选择器和beforeshowday问题的类似问题,但是我还没有找到解决我特定问题的确切方法。

我有一个available函数,该函数可以设置某些可用日期,但是直到您实际更改月份后该函数才会运行。

$( function() {

        $( "#whats-on-calendar" ).datepicker({
            numberOfMonths: 3,
            dateFormat: "dd/mm/yy",
            beforeShowDay: available,
            todayHighlight: true
        });

        var availableDates = ["9-9-2018","14-9-2018","15-9-2018"];

        function available(date) {
            dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
            if ($.inArray(dmy, availableDates) != -1) {
                return [true, "","Available"];
            } else {
                return [false,"","unAvailable"];
            }
        }
    } );

https://jsfiddle.net/kwjxv5ot/4/

我在文档中已经读到,要在初始化后设置选项,您需要使用option()方法。

$("#whats-on-calendar").datepicker('option', 'beforeShowDay', available);

但这给了我同样的问题。除非我更改月份,否则它不会触发。

1 个答案:

答案 0 :(得分:0)

您应该在初始化日期选择器之前声明该方法,否则它将是未定义的。

$( function() {
    var availableDates = ["9-9-2018","14-9-2018","15-9-2018"];
    function available(date)
    {
        dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
        return [$.inArray(dmy, availableDates) != -1]
    }
    $( "#whats-on-calendar" ).datepicker({
        numberOfMonths: 3,
        dateFormat: "dd/mm/yy",
        beforeShowDay: available,
        todayHighlight: true
    });
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="whats-on-calendar"></div>