如何使用 jQuery UI 在页面中显示日期选择器?
每当我们想向用户询问日期时,都需要 DatePickers。我们可以存储数据并将其用于未来用途。 jQuery 提供了一种简单的方法来创建我们的 DatePicker。 jQuery 的 DatePicker 是内联的,所以 UI 非常简单但很吸引人。
句法:
我们需要一个输入元素,然后我们将调用 jQuery DatePicker函数。
在代码的脚本部分,调用datepicker()函数来实例化 datepicker 小部件。
项目设置:
DatePicker 和类似的 UI 可从 jQuery UI 获得。我们需要下载它们,然后将它们存储在项目目录中。将其解压到项目目录中的“jqueryui”文件夹中。项目结构将如下所示。
在 head 标签内按如下方式导入以下文件。
示例 1:以下代码演示了一个简单的 DatePicker。我们将从输入元素启动日期选择器。
HTML
Welcome to GeeksforGeeks
Date of Birth:
HTML
Welcome to GeeksforGeeks
Date of Birth:
输出:
示例 2:以下代码演示了自定义的 DatePicker。我们的 DatePicker 没有更改年份或月份按钮。此外,格式看起来不太好。所以我们改变它们如下。
- changeMonth:它是布尔类型,如果设置为true ,我们可以更改月份。
- changeYear:它是布尔类型,如果设置为true ,我们可以更改年份。
- minDate:设置最小日期。
- maxDate:设置最大日期。设置为 +1 表示明天,或 -1 表示昨天。如果要将日期设置为明年,请使用 +1y,反之亦然。
- dateFormat:设置日期格式。 “dd/mm/yy”将日期设置为日期,然后是月份,然后是年份。
HTML
Welcome to GeeksforGeeks
Date of Birth:
输出: