Maison > Article > interface Web > Comment sélectionner le contrôle du temps avec jquery

Comment sélectionner le contrôle du temps avec jquery

WBOYoriginal: 2023-05-23 20:47:062054parcourir

Avec le développement d'Internet, les contrôles de sélection temporelle sont de plus en plus couramment utilisés dans le développement Web. Parmi eux, le plug-in jQuery time picker présente des avantages évidents en termes de simplicité d'utilisation et d'effets esthétiques, et est largement bien accueilli et pris en charge par les développeurs. Cet article explique comment utiliser le plug-in de sélection de temps jQuery pour aider les développeurs à implémenter des contrôles de sélection de temps plus rapidement et plus facilement.

1. Introduction au plug-in de sélecteur de temps jQuery

Le plug-in de sélecteur de temps jQuery est un plug-in de sélecteur de date et d'heure multi-navigateurs rapide, flexible, qui s'appuie sur la bibliothèque jQuery et présente les caractéristiques d'adaptatif, facile à agrandir et beau style. Il est simple à utiliser, prend en charge plusieurs langues, peut être hautement personnalisé et fournit de riches fonctions de rappel d'événements. Les développeurs n'ont qu'à introduire les fichiers JS et CSS pertinents et à les appeler simplement pour implémenter le contrôle de sélection temporelle. Actuellement, il existe plusieurs versions du plug-in jQuery time picker. Cet article fait référence au plug-in portant le numéro de version 2.1.9.

2. Utilisation du plug-in jQuery time picker

Introduction des fichiers associés

Tout d'abord, vous devez présenter la bibliothèque jQuery et les fichiers JS et CSS pertinents du plug-in jQuery time picker dans le balise head du fichier HTML.

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.css">
</head>

Mise en page HTML

Ensuite, ajoutez une balise d'entrée à la page en tant que conteneur pour le sélecteur de temps.

<input type="text" class="timepicker" />

Parmi eux, la valeur de l'attribut de classe est timepicker, indiquant que cette balise d'entrée est un sélecteur de temps.

Initialisez le plug-in

Appelez la méthode timepicker() du plug-in jQuery time picker pour initialiser le time picker.

$(document).ready(function() {
  $('.timepicker').timepicker();
});

Parmi eux, la méthode ready() est utilisée pour s'assurer que le document a été entièrement chargé avant d'exécuter le code JavaScript. La méthode timepicker() est utilisée pour initialiser le sélecteur de temps, qui possède divers paramètres facultatifs et peut être hautement personnalisé.

Utilisation avancée des fonctionnalités

En plus de la sélection de l'heure de base, le plugin jQuery time picker fournit également de nombreuses fonctionnalités avancées, telles que la définition du format de l'heure, la définition des intervalles de minutes, l'ajout de limites de temps, le changement de langue, etc. Ci-dessous, la mise en œuvre de ces fonctions communes sera présentée respectivement.

(1) Définir le format de l'heure

En définissant l'attribut format, vous pouvez définir le format du sélecteur d'heure. Les options de formatage peuvent inclure le format de date, le format d'heure et l'heure initiale (si vous souhaitez afficher l'heure initiale, vous devez définir l'heure correspondante).

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm:ss",
    dateFormat: "yy-mm-dd",
    dateTimeFormat: "yy-mm-dd HH:mm:ss",
    initialValue: "09:00"
  });
});

Le code ci-dessus définit le format de l'heure du sélecteur d'heure sur "HH:mm:ss", le format de date sur "aa-mm-jj" et le format de date et d'heure sur "aa-mm-jj HH : mm:ss". L'heure initiale est "09:00".

(2) Définir l'intervalle des minutes

En définissant l'attribut step, vous pouvez définir l'intervalle des minutes et des secondes du sélecteur de temps, en prenant 15 minutes comme exemple :

$(function() {
  $("#timepicker").timepicker({
    step: 15 * 60  // 单位为秒
  });
});

Le code ci-dessus définit l'intervalle des minutes du temps sélecteur sur 15 minutes.

(3) Ajouter une limite de temps

En définissant les attributs minTime et maxTime, vous pouvez limiter la plage horaire du sélecteur d'heure, en prenant comme exemple 9h00 à 17h00 :

$(function() {
  $("#timepicker").timepicker({
    minTime: "9:00",
    maxTime: "17:00"
  });
});

Le code ci-dessus définit la date la plus précoce l'heure du sélecteur d'heure est 9h00 et la dernière heure est 17h00.

(4) Changer la langue

En définissant le pack de langue, vous pouvez changer la langue du sélecteur de temps.

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm",
    lang: "zh"
  });
});

Le code ci-dessus définit le format de l'heure du sélecteur d'heure sur "HH: mm" et la langue sur chinois.

3. Résumé

Cet article explique comment utiliser le plug-in de sélecteur de temps jQuery pour implémenter le contrôle de sélection de temps. En introduisant des fichiers pertinents, en ajoutant une mise en page HTML et en initialisant le plug-in, vous pouvez rapidement créer un sélecteur de temps beau et pratique. De plus, le sélecteur d'heure peut être personnalisé davantage en définissant des fonctionnalités avancées telles que le format de l'heure, les intervalles de minutes, les limites de temps et les modules linguistiques. Par conséquent, pour les développeurs qui développent des sélecteurs de temps, apprendre à utiliser le plug-in jQuery time picker est une compétence très nécessaire.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment écrire un jugement dans nodejsArticle suivant：Comment écrire un jugement dans nodejs

Articles Liés

Voir plus