bootstrap-datepicker setEndDate方法设置日期控件可选结束日期

bootstrap-datepicker setStartDate方法设置日期控件起始日期及可选日期,比如设置为2020-7-2号则只能选择该日期及之后的日期,一般和setEndDate配合使用。

setEndDate

//初始化
var ops = {
    multidate: true,//同时可以选中多个日期
    todayHighlight: true, //设置当天日期高亮
    language: 'zh-CN', //语言
    autoclose: true, //选择后自动关闭
    clearBtn: true,//清除按钮
    format: "yyyy-mm-dd",//日期格式
};
$("#itxst").datepicker(ops);
//设置当天日期起之后的第1天开始才能选择
function setStartDate() {
    var dt = new Date(new Date().setDate(new Date().getDate() + 1));
    $('#itxst').datepicker('setStartDate', dt);
}
//设置当天日期起之后的第5天之前的日期才能选择
function setEndDate() {
    var dt = new Date(new Date().setDate(new Date().getDate() + 5));
    $('#itxst').datepicker('setEndDate', dt);
}

在线试一试

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bootstrap-datepicker setEndDate方法例子</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">
</head>
<body style="padding:10px;">
    <div class="container ">
        <input type="text" id="itxst" placeholder="选择日期" class="form-control" autocomplete="off">
    </div>
    <script>
        //初始化
        var ops = {
            multidate: true,//同时可以选中多个日期
            todayHighlight: true, //设置当天日期高亮
            language: 'zh-CN', //语言
            autoclose: true, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式
        };
        $("#itxst").datepicker(ops);
        //设置当天日期起之后的第1天开始才能选择
        function setStartDate() {
            var dt = new Date(new Date().setDate(new Date().getDate() + 1));
            $('#itxst').datepicker('setStartDate', dt);
        }
        //设置当天日期起之后的第5天之前的日期才能选择
        function setEndDate() {
            var dt = new Date(new Date().setDate(new Date().getDate() + 5));
            $('#itxst').datepicker('setEndDate', dt);
        }
        setStartDate();
        setEndDate();
    </script>
</body>
</html>