如何使用jQuery在点击文本框时打开数据时间选择器

在这篇文章中，我们将看到如何使用jQuery设置一个datetimepicker来在点击文本框或输入元素时选择日期和时间。

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

有两个输入元素，每个都有一个datetimepicker的类。
我们使用jQuery类选择器[$(“class-name”)]选择这些元素。
使用jQuery中的each()方法，将插件中的datetimepicker()方法应用于每个输入元素。
jQuery中的this对象被用来指代这些输入元素，这样datetimepicker()方法就可以应用到每一个元素。

CDN Links:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css” /> _
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js”></script>

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

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

<!DOCTYPE html>
<html>
  <head>
    <!-- jQuery CDN -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <!-- CSS CDN -->
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css"
    />
    <!-- datetimepicker jQuery CDN -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js">
   </script>
  
    <!-- Basic inline styling -->
    <style>
      body {
        text-align: center;
      }
      p {
        font-size: 25px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <p>jQuery - Set datetimepicker on textbox click</p>
  
    <input type="text" 
           class="datetimepicker" />
    <input type="text"
           class="datetimepicker" />
      
    <script type="text/javascript">
      (".datetimepicker").each(function () {
        (this).datetimepicker();
      });
    </script>
  </body>
</html>

输出:

如何使用jQuery在点击文本框时打开数据时间选择器？

方法2：使用Bootstrap datetimepicker插件和jQuery。

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

CDN Links:

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet” />   
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js”></script>   
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>   
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js”></script>   
<link href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css” rel=”stylesheet”/>   
<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js”></script>

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

示例:

<!DOCTYPE html>
<html>
  <head>
    <!-- jQuery CDN -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <!-- Bootstrap CDN -->
    <link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
         rel="stylesheet"/>   
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
    <!-- Moment.js CDN -->
    <script type="text/javascript"
            src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">
    </script>
  
    <!-- CSS CDN -->
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"
          rel="stylesheet"/>
    <!-- Bootstrap datetimepicker CDN -->    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">
   </script>
  
    <!-- Basic inline styling -->
    <style>
      body {
        text-align: center;
      }
  
      p {
        font-size: 25px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 style="color:green; font-weight:bold">
      GeeksforGeeks
    </h1>
    <p>jQuery - Set datetimepicker on textbox click</p>
    <div class="container col-xs-2 col-xs-offset-5">
      <div style="position:relative">
        <input class="form-control" 
               type="text"
               id="date-time-picker" />
      </div>
    </div>
    <script type="text/javascript">
      $("#date-time-picker").datetimepicker();
    </script>
  </body>
</html>