JavaScript 选择后关闭日历 - JavaScript

本文将介绍如何在 JavaScript 中选择一个日期并在选择后关闭日历。

HTML 代码

首先，在 HTML 中需要创建一个日期选择器。

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

JavaScript 代码

接下来，在 JavaScript 中需要使用一个库来创建日期选择器。在本文中，我们将使用 jQuery UI。

<!-- 加载 jQuery 和 jQuery UI 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$(function() {
  // 创建日期选择器
  $('#datepicker').datepicker({
    // 选择日期后关闭日历
    onSelect: function(dateText, inst) {
      $(this).datepicker('hide');
    }
  });
});
</script>

上述代码将会在页面加载完成后运行，并创建一个日期选择器。当用户选择一个日期后，将会调用 onSelect 回调函数，并在其中关闭日期选择器，使其消失。

总结

我们成功地使用了 jQuery UI 库创建日期选择器，并在选择日期后关闭了日历。在实际开发中，可以根据需求使用不同的库或原生 JavaScript 实现相同的效果。