使用 Bootstrap Material DatePicker 获取更改的选定值

Bootstrap Material DatePicker 是一个基于 Bootstrap 的日期选择器插件。它允许用户从日历中选择日期，并使用简单的 JavaScript 代码轻松地获取所选日期。

下面，我将向您展示如何使用 Bootstrap Material DatePicker 获取更改的选定值。

步骤 1：链接 Bootstrap Material DatePicker 库

要使用 Bootstrap Material DatePicker，您需要连接它的库。您可以从下面链接下载最新版本的库。

<link rel="stylesheet" href="path/to/bootstrap-material-datepicker/css/bootstrap-material-datepicker.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap-material-datepicker/js/bootstrap-material-datepicker.js"></script>

步骤 2：创建日期选择器

创建一个日期选择器只需要在 HTML 中创建一个文本框。然后，在文本框上调用bootstrapMaterialDatePicker()方法。

<input type="text" id="datepicker">

$(document).ready(function(){
    $('#datepicker').bootstrapMaterialDatePicker();
});

步骤 3：获取更改的选定值

如果您需要获取用户选择的日期值，可以使用change事件。当用户更改日期时，change事件将触发。

$(document).ready(function(){
    $('#datepicker').bootstrapMaterialDatePicker().on('change', function(e, date){
        console.log(date);
    });
});

在上面的代码中，我们使用console.log()方法将所选日期打印到浏览器的控制台中。

结论

通过Bootstrap Material DatePicker，您可以轻松地为您的网站或应用程序添加一个美观而易于使用的日期选择器。使用change事件，您可以获取用户选择的日期并将其用于您的应用程序。