bootstrap-datepicker中文文档

bootstrap-datepicker changeDate日期变更事件

bootstrap-datepicker changeDate日期变更事件,当用户重新选择一个日期时就会触发changeDate事件,使用场景比如用户选择了日期后需要将该条件立即发送到服务器筛选新的查询结果,这时就需要changeDate事件。

changeDate事件

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

在线试一试

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bootstrap-datepicker changeDate事件例子</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 ">
        <div id="tips"></div>
        <input type="text" id="itxst" placeholder="点击输入框看看效果" class="form-control" autocomplete="off">
    </div>
    <script>
        //日期控件初始化
        var ops = {
            todayHighlight: true, //设置当天日期高亮
            language: 'zh-CN', //设置语言
            autoclose: true, //设置选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式
        };
        $("#itxst").datepicker(ops);
        $('#itxst').datepicker('setDate', new Date());
        //绑定changeDate事件
        $('#itxst').datepicker().on('changeDate', 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