bootstrap-datepicker中文文档

bootstrap-datepicker show控件展开事件

用户点击bootstrap-datepicker控件时,会执行show控件展开事件,你可以通过该事件知道用户什么时候展开了控件。

show事件

//日期控件初始化
var ops = {
    multidate: true,//同时可以选中多个日期
    todayHighlight: true, //设置当天日期高亮
    language: 'zh-CN', //语言
    autoclose: true, //选择后自动关闭
    clearBtn: true,//清除按钮
    format: "yyyy-mm-dd",//日期格式
};
$("#itxst").datepicker(ops);
//show展开事件
$('#itxst').datepicker().on('show', function (e) {
    console.log(e);
    $("#tips").html('你展开日期控件');
});

在线试一试

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bootstrap-datepicker show事件例子</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>
        .btn {
            margin-top: 6px;
        }
    </style>
</head>
<body style="padding:10px;">
    <div class="container ">
        <input type="text" id="itxst" placeholder="选择日期" class="form-control" autocomplete="off">
        <div id="tips"></div>
    </div>
    <script>
        //日期控件初始化
        var ops = {
            multidate: true,//同时可以选中多个日期
            todayHighlight: true, //设置当天日期高亮
            language: 'zh-CN', //语言
            autoclose: true, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式
        };
        $("#itxst").datepicker(ops);
        //show展开事件
        $('#itxst').datepicker().on('show', function (e) {
            console.log(e);
            $("#tips").html('你展开日期控件');
        });
    </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