bootstrap-datepicker中文文档

bootstrap-datepicker hide控件隐藏事件

bootstrap-datepicker hide控件隐藏事件,当日期控件隐藏或执行hide方法事件将会回调该方法,这时你可以知道用户在何时隐藏了控件,与之对应的是show事件及日期控件展开时的事件。

hide事件

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

在线试一试

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bootstrap-datepicker hide事件例子</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 = {
            todayHighlight: true, //设置当天日期高亮
            language: 'zh-CN', //语言
            autoclose: true, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式
        };
        $("#itxst").datepicker(ops);
        //绑定hide隐藏事件
        $('#itxst').datepicker().on('hide', 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