jquery ui date 日期插件使用自由规定日期选择 及改变日期样式 增加颜色标识

<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/buttons.css">

 <div>
 	<label>选择日期</label>
 	<input class="date-select1" type="text" readonly>
 	<button class="button button-pill button-primary btn-reservation" value="1">预约</button>
 </div>

<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
//显示中文
<script src="js/datepicker-zh-CN.js"></script>

<script>
    $(function () {
        //时间格式化问题
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "H+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        //抵押登记或解除抵押登记预约日期选择
        let dates1;
        let mindate1 = new Date();
        let fmtmindate1 = mindate1.Format("yyyy-MM-dd");//格式化日期
        let maxdate1 = "2025-01-01";
        getByTypeAndCurrentDateMonth(fmtmindate1.substring(0, 4), fmtmindate1.substring(5, 7), 1);

        $(".date-select1").datepicker({
            beforeShowDay: $.datepicker.noWeekends,//限制只能选择工作日
            constrainInput: false,//如果为true，则输入字段中的输入将限于当前dateFormat选项允许的那些字符。
            duration: "slow",//控制日期选择器出现的速度“慢”，“正常”，“快”" option", "duration", "slow"
            minDate: fmtmindate1,//最小日期
            maxDate: maxdate1,//最大日期
            defaultDate: fmtmindate1,//默认日期
            beforeShowDay: function (date) {//设置当前日是否可选，及类样式
                let d = new Date(date);
                //限制只能选择工作日
                if (d.getDay() === 0 || d.getDay() === 6 || d.getTime() < mindate1.getTime()) {
                    return [false, "red"];
                }

                if (dates1.length < 1) {
                    return [true, "green"];
                }

                if (d.getTime() > mindate1.getTime()) {
                    for (let i = 0, len = dates1.length; i < len; i++) {
                        if (d.getTime() === dates1[i].reservationTime) {
                            if (dates1[i].count < 2) {
                                return [true, "green"];
                            } else {
                                return [false, "red"];
                            }
                        }
                    }
                    return [true, "green"];
                }

            },
            beforeShow: function () {
            //显示之前
                let date = $(".date-select1").val();
                if (date == null || date == "") {
                    date = fmtmindate1;
                }
                dates1 = getByTypeAndCurrentDateMonth(date.substring(0, 4), date.substring(5, 7), 1);
            },
            onChangeMonthYear: function (year, month, inst) {
            //变化月时触发
                dates1 = getByTypeAndCurrentDateMonth(year, month, 1);
            }
        });
        
        function getByTypeAndCurrentDateMonth(year, month, type) {
            let data = [];
            //获取每天的名额数
            $.ajax({
                url: "[[@{api/getByTypeAndCurrentDateMonth}]]",
                type: "post",
                dataType: "json",
                async: false,//同步获取
                data: {
                    "type": type,
                    "year": year < 10 ? "0" + year : year,
                    "month": month < 10 ? "0" + month : month
                },
                success: function (msg) {
                    if (type == 1) {
                        dates1 = msg.data;
                        data = dates1;
                    } else if (type == 2) {
                        dates2 = msg.data;
                        data = dates2;
                    }


                }

            })
            return data;
        }

        $(".btn-reservation").click(function () {
            //发送ajax
        });
    });
</script>