layui日期控件，多选，禁选，自定义设置

最新推荐文章于 2025-06-26 13:03:27 发布

原创

最新推荐文章于 2025-06-26 13:03:27 发布 · 2w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#自定义layui日历控件 #layui日期控件多选、禁选

自定义layui，laydate日期控件，实现多选、禁止选效果

效果图：

在这里插入图片描述

以上图包括功能点：
1、控制周几不能选（示例图为：周六周天不可选）。
2、控制当前时间之前不能选。
3、控制可以选择多个日期（红色为选中效果）
4、单击某个日期可与后台做交互。

主要实现的几个方法：
0、初始化方法

//日历插件调用方法
        function loding_date(new_date, data) {
   
   

            laydate.render({
   
   
                elem: '#date-list'
                , type: 'date'
                , theme: 'grid'
                , max: '2099-06-16 23:59:59'
                , position: 'static'
                , range: false
                , value: new_date
                , min:getNowFormatDate()
                , isInitValue: false
                , calendar: false
                , btns: false
                , mark: data//重要json！
                , ready: function (value) {
   
   
                    disabled_date(value,$("#appointmentDate").val());
                    hide_mr(data);
                }
                , done: function (value, date) {
   
   
                    dateset(value,data);
                }
                , change: function (value, date) {
   
   
                    disabled_date(date,$("#appointmentDate").val());
                    hide_mr(data);
                }
            });
        }

1、设置不可选的星期：

/**
         *设置不可选择的星期
         *value:选中的值
         *appointmentDate星期：如1,2,3,4,5,6,7
         */
        function disabled_date(value,appointmentDate) {
   
   
            var mm = value.year + '-' + value.month + '-' + value.date;
            $('.laydate-theme-grid table tbody').find('[lay-ymd="' + mm + '"]').removeClass('layui-this');

            if(appointmentDate!=null && appointmentDate!=''){
   
   
                var dates = appointmentDate.split(",");
                for(var i=0;i<dates.length;i++){
   
   
                    if(dates[i]=="7"){
   
   
                        dates[i] = 0;
                    }
                    $("table>tbody>tr").find("td:eq("+dates[i]+")").addClass('ng-laydate-disabled');
                }
            }

        }

2、选中效果样式JS：

 /**
         *设置选中
         *
         */
        function hide_mr(markJson) {
   
   
            // keys = [];
            if(markJson!=null){
   
   
                for(var key in markJson){
   
   
                    var dates = key.split("-");
                    dates[1] = dates[1] * 1;
                    var mm = dates[0] + '-' + dates[1] + '-' + dates[2];
                    $('.laydate-theme-grid table tbody').find(<