Comment définir la date et l'heure dans jquery

Avec la popularité des applications Web, le traitement de la date et de l'heure est devenu un aspect très important dans le développement de sites Web. jQuery est une bibliothèque JavaScript populaire qui aide les développeurs à gérer facilement les dates et heures des sites Web. Cet article explique comment utiliser jQuery pour définir les sélecteurs de date et d'heure, et comment utiliser jQuery pour modifier dynamiquement la date et l'heure sur la page.

1. Sélecteur de date et d'heure

jQuery UI est une bibliothèque d'interface utilisateur (interface utilisateur) spécialement conçue pour les applications Web. En utilisant l'interface utilisateur jQuery, les développeurs peuvent facilement ajouter des sélecteurs de date et d'heure dans les pages Web.

L'ajout d'un sélecteur de date est facile avec jQuery UI. Tout d’abord, vous devez ajouter la bibliothèque jQuery et la bibliothèque jQuery UI à la page. Ensuite, ajoutez un élément d'entrée dans le code HTML et définissez son attribut type sur "date".

Créez un sélecteur de date en utilisant le code suivant :

<input type="date" id="datepicker">

Pour ajouter la bibliothèque jQuery UI à la page, utilisez le code suivant :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Ensuite, le sélecteur de date peut être initialisé à l'aide du code suivant :

$( function() {
  $( "#datepicker" ).datepicker();
});

Utilisez " datepicker" Une fois que la méthode a initialisé le sélecteur de date, un sélecteur de date sera automatiquement généré sous la zone de saisie.

Vous pouvez également utiliser le code suivant pour initialiser le sélecteur de temps :

$( function() {
  $( "#timepicker" ).timepicker();
});

Pour ajouter un sélecteur de temps, vous devez introduire la bibliothèque de plug-ins du sélecteur de temps. La bibliothèque de plugins Time Picker peut être trouvée sur https://github.com/jonthornton/jquery-timepicker.

2. Mettre à jour dynamiquement la date et l'heure sur la page

En plus d'utiliser la bibliothèque jQuery UI pour ajouter des sélecteurs de date et d'heure lors du chargement de la page, vous pouvez également utiliser le code jQuery pour mettre à jour dynamiquement la date et l'heure sur la page. .

Voici un exemple de code pour mettre à jour dynamiquement la date et l'heure à l'aide de jQuery :

$( function() {
//获取当前时间
  var date = new Date();
  //使用getFullYear()、getMonth()、getFullYear()等方法获取年、月、日等日期信息
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  //将日期信息赋值给页面元素
  $("#date").html(day + "/" + month + "/" + year);
  //使用getHours()、getMinutes()、getSeconds()等方法获取时、分、秒等时间信息
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  //将时间信息赋值给页面元素
  $("#time").html(hours + ":" + minutes + ":" + seconds);
  //使用setTimeout()函数每秒钟更新时间
  setTimeout( function() {
    updateTime();
  }, 1000);
});

function updateTime(){
  //获取当前时间
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  $("#date").html(day + "/" + month + "/" + year);
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  $("#time").html(hours + ":" + minutes + ":" + seconds);
  setTimeout( function() {
    updateTime();
  }, 1000);
}

Ce code mettra à jour dynamiquement un élément de page contenant les ID d'élément "date" et "heure". L'ID de l'élément peut être modifié selon les besoins.

3. Résumé

En utilisant la bibliothèque jQuery UI, vous pouvez facilement ajouter des sélecteurs de date et d'heure aux pages Web. Vous pouvez ajouter un sélecteur de date en utilisant la méthode "datepicker" et un sélecteur d'heure en utilisant la bibliothèque de plugins de sélecteur d'heure.

Utilisez le code jQuery pour mettre à jour dynamiquement la date et l'heure sur la page lors du chargement de la page. Vous pouvez utiliser des méthodes dans l'objet Date pour obtenir des informations sur la date et l'heure, puis utiliser jQuery pour les attribuer aux éléments de la page. Utilisez la fonction setTimeout() pour mettre à jour l'heure toutes les secondes.

Le code ci-dessus est un exemple de base que les développeurs de sites Web peuvent modifier et étendre en fonction de leurs besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!