la zone de texte jquery change le format de l'heure

jQuery est un framework open source basé sur le langage JavaScript, qui fournit un moyen simple, efficace et rapide de traiter le code JavaScript. Dans le processus de développement Web, la zone de texte est l'un des éléments de formulaire couramment utilisés, et il est généralement nécessaire de limiter ou de convertir le format d'heure saisi dans la zone de texte. Cet article explique comment utiliser jQuery pour modifier le format de l'heure dans une zone de texte.

Tout d'abord, ajoutez un élément de zone de texte à la page HTML et attribuez-lui un attribut id.

<input type="text" id="mydate" />

Ensuite, écrivez du code dans le fichier JavaScript pour gérer le format de l'heure dans la zone de texte. Nous pouvons utiliser la fonction val() de jQuery pour obtenir la valeur dans la zone de texte, puis utiliser l'objet Date de JavaScript pour convertir le format. Le code spécifique est le suivant :

$(document).ready(function() {
  // 监听文本框改变事件
  $('#mydate').on('change', function() {
    // 获取文本框中的值
    var dateString = $(this).val();
    // 将字符串转换为Date对象
    var dateObj = new Date(dateString);
    // 转换为指定格式的字符串
    var newDateString = dateObj.getFullYear() + '-' + (dateObj.getMonth()+1) + '-' + dateObj.getDate();
    // 在文本框中显示转换后的值
    $(this).val(newDateString);
  });
});

Expliquez le processus spécifique du code. Tout d’abord, utilisez la fonction ready() de jQuery pour spécifier quoi faire une fois le chargement de la page terminé. Ensuite, écoutez l'événement de modification de la zone de texte, qui est un événement déclenché lorsque l'utilisateur saisit ou modifie une valeur dans la zone de texte. Dans la fonction de gestion des événements, utilisez la fonction val() pour obtenir la valeur dans la zone de texte et la convertir en objet Date. Ce qu'il faut noter ici, c'est que le format des paramètres de l'objet Date doit être le format de date correct, sinon la conversion échouera. Ensuite, convertissez l'objet Date en chaîne selon le format d'heure requis et réaffectez-le à la zone de texte à l'aide de la fonction val().

Dans le développement réel, vous pouvez rencontrer de nombreux formats et exigences horaires différents. À l’heure actuelle, nous pouvons étendre le code ci-dessus et ajouter davantage de fonctions de conversion de format. Ce qui suit est un exemple pour convertir le format d'heure sous la forme « Année-Mois-Jour Heure : Minute : Seconde ».

$(document).ready(function() {
  $('#mydate').on('change', function() {
    var dateString = $(this).val();
    var dateObj = new Date(dateString);
    var year = dateObj.getFullYear();
    var month = addLeadingZero(dateObj.getMonth()+1);
    var date = addLeadingZero(dateObj.getDate());
    var hours = addLeadingZero(dateObj.getHours());
    var minutes = addLeadingZero(dateObj.getMinutes());
    var seconds = addLeadingZero(dateObj.getSeconds());
    var newDateString = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
    $(this).val(newDateString);
  });
  
  // 日期、月份、小时、分钟、秒钟前面加0
  function addLeadingZero(num) {
    return (num < 10) ? '0' + num : num;
  }
});

Dans le code ci-dessus, nous définissons une autre fonction appelée addLeadingZero, qui est utilisée pour formater les nombres en deux chiffres. Cette fonction peut être utilisée pour formater les mois, les dates, les heures, les minutes et les secondes.

Pour résumer, utiliser jQuery pour changer le format de l'heure dans une zone de texte nécessite les étapes suivantes : écoutez d'abord l'événement de changement de la zone de texte, puis récupérez la valeur dans la zone de texte et convertissez-la en un objet Date, puis l'objet Date est converti en chaîne selon le format requis, et enfin la chaîne est réattribuée à la zone de texte. Si vous souhaitez effectuer une conversion de format plus complexe, vous pouvez utiliser l'objet Date intégré de JavaScript et certaines fonctions personnalisées pour la compléter.

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!