bootstrap-datepicker中文文档

bootstrap-datepicker datesDisabled设置日期不可选

通过bootstrap-datepicker的datesDisabled属性可以简单快速的设置某些日期不可选,当然也可以通过beforeShowDay属性设置日期不可选,区别是beforeShowDay可顶制度更高。

代码例子

//设置'2020-06-25'号不可选
var ops = {
     language: 'zh-CN', //语言
     autoclose: true, //选择后自动关闭
     clearBtn: true,//清除按钮
     format: "yyyy-mm-dd",//日期格式
     datesDisabled:'2020-06-25'
 }; 
$("#inputDate1").datepicker(ops);

//设置2020-06-25和2020-06-28号不可选
var ops = {
     language: 'zh-CN', //语言
     autoclose: true, //选择后自动关闭
     clearBtn: true,//清除按钮
     format: "yyyy-mm-dd",//日期格式
     datesDisabled:[day.getYear()+'-'+(day.getMonth()+1)+'-'+day.getDate(),day.getYear()+'-'+(day.getMonth()+1)+'-'+(day.getDate()+2)]
 }; 
$("#inputDate1").datepicker(ops);

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bootstrap-datepicker datesDisabled例子</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 day=new Date();
        //初始化
        var ops = {
            language: 'zh-CN', //语言
            autoclose: true, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式
            datesDisabled:['2020-06-'+day.getDate(),'2020-06-'+ (day.getDate()+2)]
        };
        $("#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