bootstrap-datepicker中文文档

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>
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