1

我创建了一个代码来禁用从数据库中检索到的某些日期。

在 getDates 脚本中，我只是从数据库中检索日期，返回它们并将它们分配给数组不可用日期。

<script>
var unavailableDates;

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

$(document).ready(function()
{
    $("#datepicker").datepicker({
        dateFormat: 'yy-mm-dd',  
        beforeShowDay: unavailable, 
        minDate: 0,
        firstDay: 1, // rows starts on Monday
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        altField: '#date_due',
        altFormat: 'yy-mm-dd'
        });

    $('#datepicker').focus(function(){
        //alert($('#name').html());
         $.ajax({                                      
        url: 'getDates.php',                  
        data: "artist_id="+$('#name').html(),                       
        dataType: 'json',                     
        success: function(data)          
        {
                   unavailableDates = data;
        } 
        });
    })

});
</script>

它工作正常，但只有当我点击 datepicker 两次时。当我第一次单击时，它会显示所有日期（无论它们是否可用）。当我再次单击时，它会显示不可用的日期。

有谁知道为什么？谢谢

4

3 回答 3

1

因为您在显示日期选择器时启动获取不可用日期的请求。您必须提前执行此操作。在后端请求的回调中，您可以显示日期选择器。

于 2013-08-09T21:11:03.363 回答
1

将 async: false 添加到您的 ajax 调用中，以便应用程序在继续之前等待响应，就像这样

$('#datepicker').focus(function(){
    //alert($('#name').html());
     $.ajax({                                      
    url: 'getDates.php',                  
    data: "artist_id="+$('#name').html(),                       
    dataType: 'json', 
    async: false,            
    success: function(data)          
    {
               unavailableDates = data;
    } 
    });

另一个想法，您可以将此 ajax 调用直接添加到不可用的函数中，而不是先运行两个东西，onFocus 和 beforeShowDay（尽管我对 beforeShowDay 函数不是很熟悉）

不过，这可能会减慢日期选择器的打开速度，因为它必须等待服务，因此这取决于您的服务有多快以及您有什么性能要求。如果这可能会变慢，其他选项是弹出“获取日期”消息或在页面向上时每 X 秒拉一次服务器（尽管这可能会增加很多额外的服务调用......）

编辑：在此评论之后...

"basically when user selects an option (here they want to book artists so \
when user selects an artist), the unavailable dates of datepicker are 
updated   automatically."

似乎在选择艺术家时加载列表会更有意义，除非您担心页面打开时的变化。在那种情况下，我会做类似的事情......

On Artist Changed
    -Disable date picker, possibly add a small note next to it / under it / 
       over it that it is loading
    -Start ajax call with async true
    -In ajax success function, re-enable the picker and remove the message.

这将允许 UI 保持活动状态，允许用户在加载日期时输入其他信息，并且如果服务足够快，甚至一秒钟都不会知道它已被禁用。你的约会不会像其他方式那样“现场”，但听起来他们不需要那样现场。无论如何，您都需要重新检查提交表格的日期。

于 2013-08-09T21:22:07.327 回答
0 
var data = $.getJSON($url, function (data) {
         //your logic

}).success(function (data) {
        //Trigger the first click
        $('.datepicker').trigger('click');
});

$(".div_fader").on('click','.datepicker', function () {

        $(this).datepicker();

});
于 2016-07-12T11:32:02.237 回答