jQuery UI |日期选择器

jQuery UI 的日期选择器用于向用户提供日历以从日历中选择日期。此日期选择器通常连接到文本框，因此用户从日历中选择的日期可以传输到文本框。

我们将为不同的库和样式使用 CDN 链接。要显示任何 jQuery UI 小部件，我们必须使用 jQuery 和 jQuery UI 的链接。我们还将使用 style 属性并在我们的日历中使用 Cupertino 主题。您可以更改主题以符合您的风格要求。

示例 1：此示例显示日期选择器。

      

    
        jQuery UI | Date Picker
    
      
    
      
    
    
      
    
    

  

    Date: 
   
    
        $(document).ready(function() {
          
            $(function() {
                $( "#my_date_picker" ).datepicker();
            });
        })
    

  

输出：

默认选择日期：默认情况下，在日历中选择今天的日期。但是，我们可以通过将值分配给默认日期来更改默认日期。

示例 2：

      

    
        jQuery UI | Date Picker
    
      
    
      
    
    
      
    
    

  

    Date: 
   
    
        $(function() {
            $( "#my_date_picker" ).datepicker({
                defaultDate:"09/22/2019"
            });
        });
    

  

输出：

管理日期格式：在显示日历时，我们可以管理日期格式。我们可以在脚本部分使用以下 jQuery 代码来获取结果。

$(function() {
    $( "#my_date_picker" ).datepicker({
        dateFormat: 'dd-mm-yy',
        defaultDate:"24-09-2019"
    });
});

管理工作日：默认情况下，一周的第一天从星期日（ firstDay=0 ）开始显示。我们可以通过改变 firstDay 的值来改变开始日期。

$(function() {
    $( "#my_date_picker" ).datepicker({
        firstDay:2 // Tuesday is first day
    });
});

更新月和年：根据我们的要求，我们可以添加选项供用户选择月和年。

$(function() {
    $( "#my_date_picker" ).datepicker({
        changeMonth: true,
        changeYear: true
    });
});

要选择的最大和最小日期：我们可以通过分配最大和最小日期值来限制用户从日历中选择日期。

$(function() {
    $( "#my_date_picker" ).datepicker({
        maxDate:'+3d',
        minDate: '-4d'
    });
});

我们有两个日历，一个日历是选择开始日期，另一个是选择日历中的结束日期。它可用于我们必须选择入住日期和退房日期的酒店预订。此类安排必须满足以下条件。

• 选择开始日期后，结束日期不能早于开始日期
• 选择结束日期后，开始日期不能晚于结束日期
• 结束日期不能更改为开始日期之前
• 开始日期不能更改为结束日期之后。
• 在上述情况下，不能选择的日期应禁用选择。

联锁两个日期选择器

在使用两个互锁日历之前，我们将学习如何设置最小可选日期和最大可选日期。
minDate：最小可选日期。 maxDate：最大可选日期。上一篇关于 DatePicker 的文章末尾有一个例子。又来了。

两个日历的联锁
日历的更改函数：
我们将使用 change函数来触发事件。每当触发开始日历的更改函数时，我们将为结束日历设置minDate 。
同样，我们将在触发结束日历的更改函数时为开始日历设置 maxDate。
获取日期()
此方法返回日历的选定日期。这是一个例子

var my_date = $( "#my_calendar" ).datepicker( "getDate" );

我们将使用它来获取用户选择的日期。
现在我们将为用户提供两个日历来选择开始日期和结束日期。

  

    
    
        .ui-datepicker {
            width: 12em; 
        }
        h1{
            color:green;
        }
    

  

    
        GeeksforGeeks 
          Start Date:
         
          End Date:
        
        
        
        
        
        
            $(document).ready(function() {
  
                $(function() {
                    $("#my_date_picker1").datepicker({});
                });
  
                $(function() {
                    $("#my_date_picker2").datepicker({});
                });
  
                $('#my_date_picker1').change(function() {
                    startDate = $(this).datepicker('getDate');
                    $("#my_date_picker2").datepicker("option", "minDate", startDate);
                })
  
                $('#my_date_picker2').change(function() {
                    endDate = $(this).datepicker('getDate');
                    $("#my_date_picker1").datepicker("option", "maxDate", endDate);
                })
            })
        
    

  

输出：

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。