ASP.NET MVC日期选择器选中日期与非预约日期着色调整

要实现选中日期红色、无预约日期绿色的效果，我们通过CSS定义样式+修改jQuery UI Datepicker的beforeShowDay回调来完成，同时修正现有代码的异步数据加载问题：

1. 添加CSS样式 #

在页面的<head>中添加以下样式，定义不同状态日期的颜色：

/* 无预约可选择日期 - 绿色 */
.available-date {
    color: #008000 !important;
    font-weight: bold;
}

/* 已预约/忙碌日期 - 灰色（不可选） */
.busy-date {
    color: #808080 !important;
    cursor: not-allowed;
}

/* 选中的日期 - 红色 */
.ui-datepicker .ui-state-active {
    color: #ff0000 !important;
    /* 可选：去掉默认选中背景，只保留文字红色 */
    background-color: transparent !important;
    border-color: transparent !important;
}

/* 周日节假日样式（保留原需求） */
.markholiday {
    color: #dc3545 !important;
}

2. 修正#datetimepicker12日期选择器代码 #

修改日期格式化逻辑（补零保证格式统一），并在beforeShowDay中返回对应样式类：

var today = new Date();
var today_formatted = today.getFullYear() + '-' + 
                     ('0' + (today.getMonth() + 1)).slice(-2) + '-' + 
                     ('0' + today.getDate()).slice(-2);
var user_busy_days = ['2017-12-09', '2017-12-16', '2017-12-19'];

$('#datetimepicker12').datepicker({
    inline: true,
    sideBySide: true,
    beforeShowDay: function (date) {
        // 统一日期格式为YYYY-MM-DD（补零）
        var calender_date = date.getFullYear() + '-' + 
                           ('0' + (date.getMonth() + 1)).slice(-2) + '-' + 
                           ('0' + date.getDate()).slice(-2);

        var isBusy = $.inArray(calender_date, user_busy_days) > -1;

        if (isBusy) {
            return { 
                classes: 'busy-date', 
                tooltip: '用户已预约，不可选择' 
            };
        } else {
            return { 
                classes: 'available-date', 
                tooltip: '无预约，可选择' 
            };
        }
    }
});

3. 修正#TxtBasTar日期选择器代码 #

重点解决异步加载预约数据的问题（将日期选择器初始化移到请求回调内），并完善beforeShowDay逻辑：

$(document).ready(function() {
    $(function () {
        var array = [];
        var dateToday = new Date();

        // 异步获取预约日期列表
        $.get('@Url.Action("Kontrol", "Randevu")').done(function (data) {
            if (data) {
                array = data; // 直接赋值数组，避免push导致的二维数组问题
                console.log(array);

                // 确保数据加载完成后再初始化日期选择器
                $("#TxtBasTar").datepicker({
                    monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
                    dayNamesMin: ["Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct"],
                    dateFormat: 'dd.mm.yy',
                    beforeShowDay: function (date) {
                        var day = date.getDay();
                        var string = jQuery.datepicker.formatDate('d.m.yy', date);
                        var isReserved = array.indexOf(string) > -1;

                        if (day == 0) {
                            // 周日标记为节假日，不可选
                            return [false, "markholiday", "周日不可预约"];
                        } else if (isReserved) {
                            // 已预约日期，不可选
                            return [false, "busy-date", "已被预约"];
                        } else {
                            // 无预约日期，可选绿色
                            return [true, "available-date", "可预约"];
                        }
                    },
                    minDate: dateToday,
                });
            }
        });
    });
});

关键说明 #

• 选中日期的红色通过重写jQuery UI内置的.ui-state-active类实现，无需额外JS逻辑；
• 日期格式化必须补零（如01月、09日），保证和后台返回的日期格式完全匹配，避免indexOf查询失败；
• #TxtBasTar的初始化必须放在$.get的回调内，否则异步加载的预约数据还未返回，array为空会导致所有日期被判定为无预约。

内容的提问来源于stack exchange，提问作者ferhatbngl