在jQuery datepicker中从mysql分配获取的日期

时间:2014-07-02 16:21:11

标签: javascript jquery mysql datepicker jquery-ui-datepicker

我已date保存了MySQL,我希望在jQuery datepicker中启用这些日期并停用其余date

这是我的尝试:

mysql获取后的日期是: -

1)。从07-07-201415-07-2014

2)。 23-08-2014

3)。从25-08-201426-08-2014

并将其存储在jQuery datepicker中,下面是javascipt代码。

<script type="text/javascript">
    var availableDates = [9,14,15]; //desired Days
    var availableMonth = [1,5,7]; //desired Month
    var availableYear = [2014,2015]; //desired Year
    function available(date) {
       dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
       if (jQuery.inArray(date.getDate(), availableDates) != -1 && $.inArray((date.getMonth()+1), availableMonth) != -1 && $.inArray(date.getFullYear(), availableYear) != -1) {
          return [true, "","Available"];
       } else {
         return [false,"","unAvailable"];
       }
    }
    jQuery('#datepicker').datepicker({ beforeShowDay: available });
</script>

当前脚本仅在每个月启用上述日期,但我希望它是每个月的动态日期。为此我试图创建下面的对象,但不知道如何实现它。

var availableTime = {
    '2014' : {
        '07' : ['07', '08', '09', '10'],
        '08' : ['01', '02', '05']
    },
    '2015' : {
        '02' : ['11', '18', '19', '21'],
        '03' : ['21', '22', '25']
    }
};
jQuery(document).ready(function() {
    for(var j in obj )
    {
        for(var p in obj[j] )
        {
            for(var i = 0; i < obj[j][p].length; i++ )
            {
                 console.log(obj[j][p][i]);
            }
        }
    }
});

我该如何实施呢?

有问题的datepicker来自:http://api.jqueryui.com/datepicker/

由于

1 个答案:

答案 0 :(得分:0)

以你所做的为基础,你可以使你的可用功能看起来像这样:

availableTime是具有上述所有可用日期的数组。这个数组可以使用ajax调用构建,也可以在渲染视图时在服务器端构建。

一旦你在客户端有这个数组,下面的可用函数用于通过在availableTime数组中查找是否允许任何给定日期。

这是working example

// The map of specific available dates by month and year
var availableTime = {
    '2014': {
        '7': ['7', '8', '9', '10'],
        '8': ['1', '2', '5']
    },
    '2015': {
        '2': ['11', '18', '19', '21'],
        '3': ['21', '22', '25']
    }
};

function available(date) {
    var d, m, y, availableDates = [];
    d = date.getDate().toString();
    m = date.getMonth() + 1;
    y = date.getFullYear();
    if (availableTime[y] && availableTime[y][m]) {
        /* 
         * Get available dates of this specific month and year from
         * the map defined above
         */
        availableDates = availableTime[y][m];
    }

    // return true if that day is allowed in the specific dates
    var available = (jQuery.inArray(d, availableDates) > -1);
    if (available) {
        return [true, "", "Available"];
    } else {
        return [false, "", "unAvailable"];
    }
}

jQuery('#datepicker').datepicker({
    beforeShowDay: available
});

所以基本上特定(m)或那一年(y)的特定日期(d)不为空。它将返回true。