bootstrap-datepicker中文文档

bootstrap-datepicker beforeShowMonth设置特殊月份

通过bootstrap-datepicker的beforeShowMonth的属性设置特殊月份,比如自定义1月份不允许选择并设置背景色和文字颜色

属性列表

返回值说明
undefined不受影响
Booleantrue可选false不能选择
String日期单元格样式
object{
 enabled:false,
 classes:'redcls',
 tooltip:'www.itxst.com上线的月份',
}

代码例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bootstrap-datepicker beforeShowMonth例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/jquery-3.5.1/jquery.min.js"></script>
    <script src="https://www.itxst.com/package/bootstrap-4.5.0/js/bootstrap.min.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-4.5.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://www.itxst.com/package/bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://www.itxst.com/package/bootstrap-datepicker-1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-datepicker-1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <style>
       
        .cs {
            background-color: red !important;
            color: #fff !important;
        }
    </style>
</head>
<body style="padding:10px;">
    <div class="container ">
        <input type="text" id="inputDate1" placeholder="选择日期" class="form-control">
    </div>
    <script>
        //初始化
        var ops = {
            language: 'zh-CN', //语言
            autoclose: true, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式
            beforeShowMonth: function (e) {
                //设置1月份也特殊月份,不允许选择
                if (e.getMonth()==1) {
                    return {
                        enabled: false,
                        classes: 'cs',
                        tooltip:'特殊月份,不允许选择'
                    }
                } 
            }
        };

        $("#inputDate1").datepicker(ops);
    </script>
</body>
</html>

在线试一试

Catalog
快速入门 属性 属性列表 beforeShowDay beforeShowMonth beforeShowYear calendarWeeks datesDisabled daysOfWeekDisabled defaultViewDate startDate & endDate format inputs language maxViewMode minViewMode multidate todayHighlight I18N语言 方法 setDaysOfWeekDisabled destroy show hide update setDate setUTCDate getDate getUTCDate clearDates setStartDate setEndDate setDatesDisabled setDaysOfWeekHighlighted 事件 show hide clearDate changeDate changeMonth changeYear changeDecade changeCentury