📌  相关文章
📜  如何使用 jQuery UI 制作基本的 Datepicker？(1)

📅  最后修改于: 2023-12-03 15:38:03.861000             🧑  作者: Mango

如何使用 jQuery UI 制作基本的 Datepicker？

jQuery UI 是一个基于 jQuery 的 UI 组件库，其中包括了常用的一些 UI 组件，如日历、拖拽、选项卡等等。其中 Datepicker 组件是用来创建一个日期选择器的。

步骤
  1. 引入 jQuery 和 jQuery UI 库

首先需要在 HTML 页面中引入 jQuery 和 jQuery UI 库。你可以在官网下载这两个库，也可以使用 CDN 链接。

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
</head>
  1. 创建一个文本框

接下来需要在 HTML 页面中创建一个文本框，用来显示日期选择器的值。

<input type="text" id="datepicker">
  1. 使用 jQuery UI 创建 Datepicker 组件

使用 jQuery UI 的 datepicker() 方法来创建一个 Datepicker 组件。将 datepicker() 方法作用于文本框元素上，并将 Datepicker 组件挂载到文本框元素上。

<script>
  $(function() {
    $("#datepicker").datepicker();
  });
</script>

这样就完成了一个基本的 Datepicker 组件的创建。

选项

你可以使用不同的选项来配置 Datepicker 组件，如选择日期的格式、语言、最小和最大日期等等。下面是一些常用的选项：

dateFormat

设置选择的日期格式。

$("#datepicker").datepicker({
  dateFormat: "yy-mm-dd"
});
minDate 和 maxDate

设置可选择的最小和最大日期。日期格式为字符串或 Date 类型。

$("#datepicker").datepicker({
  minDate: "-1M",
  maxDate: "+1M"
});
defaultDate

设置默认选择的日期。

$("#datepicker").datepicker({
  defaultDate: "+1w"
});
showButtonPanel

设置是否显示底部的按钮面板。

$("#datepicker").datepicker({
  showButtonPanel: true
});
改变样式

如果需要改变 Datepicker 组件的样式，可以通过 CSS 文件来修改。你可以在 jQuery UI 官网下载相应的 CSS 文件，也可以使用 CDN 链接。

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">

然后在 CSS 文件中修改样式即可。

总结

使用 jQuery UI 创建一个基本的 Datepicker 组件，只需要三步：

  1. 引入 jQuery 和 jQuery UI 库
  2. 创建一个文本框
  3. 使用 jQuery UI 的 datepicker() 方法来创建 Datepicker 组件，并进行各种配置

如果需要改变样式，可以通过 CSS 来修改。