📜  如何使用 jQuery UI 在页面中显示日期选择器?

📅  最后修改于: 2022-05-13 01:55:55.954000             🧑  作者: Mango

如何使用 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:              

       

输出: