bootstrap-datepicker clearDate事件例子
查看教程
运行代码
PC模式
平板模式
手机模式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>bootstrap-datepicker clearDate事件例子</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()); //绑定clearDate事件 $('#itxst').datepicker().on('clearDate', function (e) { console.log(e); $("#tips").html('你清空了日期'); }); </script> </body> </html>
