如何使用 jQuery 在文本框点击上打开 datetimepicker？

在本文中，我们将看到如何使用 jQuery 设置 datetimepicker 以在文本框单击或输入元素单击时选择日期和时间。

方法 1：使用 jQuery 中提供的datetimepicker插件。

• 有两个输入元素，每个元素都有一个datetimepicker 类。
• 我们使用 jQuery 类选择器选择这些元素 [$(“类名”)]。
• 使用 jQuery 中的 each() 方法将插件中的datetimepicker()方法应用于每个输入元素。
• jQuery 中的 this 对象用于引用这些输入元素，以便可以将datetimepicker()方法应用于每个元素。

CDN 链接：

注意：这些 CDN 链接必须包含在 head标签以利用datetimepicker插件的所有功能。

示例：以下代码演示了插件的日期选择器功能。

HTML

  
    
    
    
    
    
    
    
   
  
    
    
      body {
        text-align: center;
      }
      p {
        font-size: 25px;
        font-weight: bold;
      }
    
  
  
    GeeksforGeeks
    jQuery - Set datetimepicker on textbox click
  
    
    
      
    
      $(".datetimepicker").each(function () {
        $(this).datetimepicker();
      });
    
  

输出：

方法 2：将 Bootstrap datetimepicker插件与 jQuery 一起使用。

• 这种方法使用了一个不同的插件，它利用了 Bootstrap 框架以及Moment.js库。
• 以下示例中定义了一个输入元素，其 id 为date-time-picker 。我们使用 jQuery id 选择器[$(“#id”)]选择此元素，然后应用 Bootstrap datetimepicker插件中的datetimepicker()方法。

CDN 链接：

注意：这些 CDN 链接必须包含在头部 标记以利用 Bootstrap datetimepicker 插件的所有功能。

例子：

HTML

  
    
    
    
    
       
    
    
    
    
    
  
    
    
        
    
   
  
    
    
      body {
        text-align: center;
      }
  
      p {
        font-size: 25px;
        font-weight: bold;
      }
    
  
  
    
      GeeksforGeeks
    
    jQuery - Set datetimepicker on textbox click
    
      
        
      
    
    
      $("#date-time-picker").datetimepicker();
    
  

输出：