Calendrier jQuery léger multi-navigateurs AIR DATEPICKER. Widget de sélecteur de date jQuery UI Datapicker Jquery datepicker sous forme de sélection

Widget de sélection de dates

Cet article concerne le widget Datepicker - un calendrier interactif pratique qui facilite la saisie des dates. Recevoir des informations de calendrier sous forme de texte de la part des utilisateurs est toujours un défi car il existe de nombreux formats différents pour exprimer les dates. Le widget Datepicker facilite la sélection d'une date et la présente de manière cohérente, réduisant ainsi le risque d'erreurs.

Il existe deux manières principales de créer un widget Datepicker. La manière la plus courante de l'attacher à un élément d'entrée consiste à utiliser la méthode datepicker(). Cela ne change pas immédiatement l'apparence de l'élément, mais dès que l'élément reçoit le focus de saisie (en cliquant dessus ou en y accédant depuis d'autres éléments à l'aide de la touche ), un calendrier s'affichera à côté de lui, avec lequel vous pourrez sélectionnez la date souhaitée.

Les calendriers du type décrit sont appelés calendriers pop-up. Un exemple de création d'un tel calendrier est donné ci-dessous :

entrée de l'interface utilisateur jQuery (largeur : 200 px ; alignement du texte : gauche) $(function() ( $("#datep").datepicker(); )); Date de:

L'image montre ce qui se passe lorsque vous déplacez le focus sur un champ de saisie :

L'utilisateur peut soit saisir la date manuellement, soit la sélectionner à l'aide du calendrier. Une fois que l'élément d'entrée perd le focus ou que l'utilisateur appuie sur la touche (ou), le calendrier disparaît.

Comme vous pouvez le constater, dans l'exemple présenté, le calendrier est affiché en anglais. Le widget jQuery UI Datepicker fournit une prise en charge assez complète des différentes normes de formatage de date utilisées dans le monde, y compris 61 options de localisation. Pour y accéder, vous devez importer un script d'assistance JavaScript dans votre document et indiquer au widget Datepicker quelle option de localisation utiliser. Un exemple correspondant est donné ci-dessous :

... ... $(function() ( $("#datep").datepicker($.datepicker.regional["ru"]); )); ...

Le fichier jquery-ui-i18n.js se trouve dans le dossier development-bundle/ui/i18n du fichier d'archive de la bibliothèque jQuery UI, que vous auriez dû télécharger depuis jqueryui.com. Copiez-le dans le même dossier où se trouve le fichier source et ajoutez-le au document comme indiqué dans le code. Le résultat est présenté sur la figure :

La deuxième façon d'utiliser le widget Datepicker consiste à l'intégrer dans un document. Pour ce faire, sélectionnez un élément div ou span à l'aide de jQuery et appelez la méthode datepicker(). Le calendrier intégré est affiché tant que l'élément HTML sur lequel il est basé est visible. Un exemple de création d'un calendrier intégré est donné ci-dessous :

Étiquette de l'interface utilisateur jQuery (marge-droite: 12px; ) entrée (largeur: 200px; alignement du texte: gauche; marge droite: 10px) #wrapper > * (float: gauche) $(function() ( $("#inline" ).datepicker($.datepicker.regional["ru"]); )); Date de:

Cet exemple utilise un élément span comme élément HTML de base pour créer un widget Datepicker. Le résultat est présenté sur la figure :

Le calendrier intégré peut être utile si vous ne souhaitez pas travailler avec des objets contextuels. Bien sûr, il existe des applications dans lesquelles le travail avec les dates est si intense qu'il est logique d'avoir toujours un calendrier à portée de main. Mais dans la plupart des cas, il est judicieux de laisser le calendrier masqué jusqu’à ce que vous en ayez besoin.

La difficulté de masquer et d'afficher le widget Datepicker intégré est que son ajout à un document nécessite de modifier la mise en page, ce qui peut entraîner des problèmes de présentation. De mon point de vue, dans la plupart des situations, il est beaucoup plus pratique d'utiliser un widget contextuel.

Si vous avez déjà traité du traitement de données, vous savez à quel point il est difficile de travailler avec cette catégorie de données. Un reflet de cette complexité est la variété des propriétés prises en charge par le widget Datepicker. Les sections suivantes sont consacrées à une description des groupes de propriétés associées avec lesquels ce widget est configuré.

Plusieurs options de configuration sont utilisées pour configurer les propriétés de base des calendriers contextuels et intégrés. Ces propriétés sont très importantes car elles permettent de contrôler la manière dont le widget est intégré au document. Leur liste est donnée dans le tableau ci-dessous :

Le réglage le plus simple est aussi le plus utile. À l'aide de l'option defaultDate, vous pouvez spécifier une date qui sera automatiquement mise en surbrillance lorsque vous ouvrirez le calendrier.

Si l’option defaultDate n’est pas définie, la date actuelle est utilisée à la place. (Bien sûr, cela fait référence à la date définie sur le système de l'utilisateur. Les fuseaux horaires, l'heure d'été ou des erreurs de configuration peuvent tous faire en sorte que la date affichée à l'utilisateur ne soit pas celle attendue.)

Cette option n'est utilisée que s'il n'y a pas d'attribut value dans l'élément d'entrée. Si cet attribut est présent (qu'il soit inclus dans le document par vous ou qu'il soit le résultat d'une présélection par l'utilisateur), alors le widget Datepicker utilisera sa valeur.

Si vous souhaitez que le calendrier s'ouvre avec une date de début différente, vous pouvez la définir en utilisant l'une des méthodes décrites dans le tableau ci-dessous :

Un exemple d’utilisation de l’option defauitDate pour spécifier une date dans cinq ans est donné ci-dessous :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y" )); ));

Supposons que la date actuelle soit décembre 2013. Ensuite, comme le montre la figure ci-dessous, la date déterminée par la valeur de l'option defauitDate correspond à décembre 2018 :

Vous rencontrerez le format décrit pour indiquer des dates relatives plus d'une fois. Il s'agit d'un format très flexible qui offre la précision nécessaire. De la même manière que dans l'exemple, vous pouvez omettre tout intervalle que vous n'avez pas l'intention de modifier. Par exemple, à la place de la valeur "+0d +0w +0m +5y" il est tout à fait possible d'utiliser la valeur "+5y". L'avantage de ce format est qu'il vous permet de mélanger des valeurs positives et négatives pour différents intervalles, ce qui vous permet de déterminer avec précision la date souhaitée.

L'option showOn vous permet de contrôler l'événement en réponse auquel le calendrier contextuel doit être affiché. Cette option peut prendre l'une des trois valeurs suivantes :

Le calendrier contextuel s'ouvre lorsque l'élément d'entrée reçoit le focus. Ceci est la valeur par défault.

Le calendrier contextuel s'ouvre en cliquant sur le bouton.

Le calendrier contextuel apparaît à la fois lorsque vous cliquez sur le bouton et lorsque l'élément d'entrée reçoit le focus.

Si vous utilisez le bouton ou les deux valeurs, le widget Datepicker crée un élément bouton et le place dans le document immédiatement après l'élément d'entrée. Un exemple d'utilisation de l'option showOn est donné ci-dessous :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both" )); ));

Comme le montre la figure, un bouton est apparu dans le document. Étant donné que l'option showOn est définie sur les deux dans cet exemple, le calendrier contextuel sera affiché à la fois lorsque vous cliquez sur le bouton et lorsque l'élément d'entrée reçoit le focus.

Le bouton ajouté par le widget Datepicker n'est pas un widget bouton jQuery UI. Si vous souhaitez que tous les boutons soient du même type, sélectionnez un élément de bouton et appelez la méthode jQuery UI button().

L’élément bouton peut être stylisé à l’aide des options boutonImage et boutonText. Si vous définissez l'option buttonImage sur l'URL d'une image, le widget Datepicker placera cette image sur le bouton. De plus, le texte par défaut associé à un bouton (points de suspension) peut être remplacé par un autre texte à l'aide de l'option buttonText, comme indiqué dans l'exemple ci-dessous :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both", buttonText: "Select" )); ) );

En utilisant ensemble les options ButtonImage et ButtonImageOnly, vous pouvez supprimer complètement le bouton et le remplacer par une image. Un exemple correspondant est donné ci-dessous :

Étiquette de l'interface utilisateur jQuery (marge-droite : 12 px) entrée (largeur : 200 px ; alignement du texte : gauche) #dpcontainer * (alignement vertical : milieu) #dpcontainer img (largeur : 35 px ;) $(function() ( $.datepicker .setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn : "both", boutonImage : "right.png", boutonImageOnly : vrai )); )); Date de:

Cet exemple définit l'image sur right.png et définit l'option buttonImageOnly sur true. De plus, plusieurs styles CSS ont été ajoutés au document pour contrôler le placement de l'image par rapport aux éléments d'étiquette et d'entrée. Le widget Datepicker ne peut pas déterminer exactement où placer l'élément img, des styles CSS ont donc dû être appliqués pour positionner correctement l'élément img dans le document. Le résultat de l'utilisation d'une image au lieu d'un bouton est illustré dans la figure :

Le but d'un widget Datepicker est de permettre à l'utilisateur de sélectionner une date, mais dans de nombreux cas, certaines restrictions doivent être imposées à ce processus. Le tableau ci-dessous décrit les paramètres qui vous permettent de définir des restrictions qui obligent l'utilisateur à sélectionner uniquement des dates valides :

En définissant l'option constrainInput sur true, vous pouvez limiter la saisie de caractères dans un champ de texte aux seuls caractères conformes à un format strictement défini. Le jeu de caractères autorisé est déterminé par les paramètres de localisation décrits ci-dessus. Si le widget Datepicker n'a pas été localisé, vous pouvez vous attendre à ce que les caractères autorisés incluent uniquement des chiffres et la barre oblique (/).

L'utilisation de la valeur spécifiée pour l'option constrainInput ne signifie pas que l'utilisateur ne pourra pas saisir une date non valide, telle que 99/99/99, mais cela réduit considérablement le risque d'erreurs. Ce paramètre est encore plus important si l'option showOn est définie sur bouton, car le calendrier contextuel ne s'ouvrira pas automatiquement lorsque le champ de saisie recevra le focus.

Les utilisateurs sont généralement disposés à utiliser un calendrier pour sélectionner une date, mais ils doivent le voir pour ce faire. Si le calendrier n'est pas affiché à l'écran, tous les utilisateurs ne se rendront pas compte que pour ouvrir le calendrier, il suffit de cliquer sur un bouton. Toute option que vous offrez à l'utilisateur pour saisir directement une date dans un champ de texte augmente la probabilité que le format de la date saisie soit incorrect. Un exemple d'utilisation de l'option constrainInput est donné ci-dessous :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput : true, minDate : "-3", maxDate : "+ 1" )); ));

Ici, la valeur true est attribuée à l'option constrainInput pour plus de clarté uniquement, puisqu'il s'agit de la valeur par défaut de cette option. Les deux options restantes vous permettent de limiter la plage de dates disponibles pour la sélection à une date minimale et maximale.

Comme pour l'option defaultDate évoquée précédemment, les valeurs des options minDate et maxDate peuvent être null (une date non définie), un objet JavaScript Date, un nombre de jours et une chaîne de date relative. Dans cet exemple, la représentation numérique est sélectionnée pour indiquer le nombre de jours par rapport à la date actuelle.

Dans la figure, vous pouvez voir que Datepicker désactive les cellules du calendrier qui ne sont pas sélectionnables :

Veuillez noter que les boutons du mois sont automatiquement désactivés s'ils ne sont pas nécessaires. Ces boutons sont situés en haut à gauche et à droite du calendrier et permettent de passer rapidement au mois suivant ou précédent. Comme le montre la figure, toutes les dates sélectionnables se trouvent dans le mois en cours et les deux boutons sont donc désactivés. Dans de telles situations, ces boutons peuvent être complètement masqués si nécessaire en définissant l’option hideIfNoPrevNext sur true.

La valeur minDate ne doit pas nécessairement être dans le passé et la valeur maxDate dans le futur, ni les deux valeurs en même temps. Pour permettre à l'utilisateur de sélectionner des dates dans une plage précédée d'une période "préparatoire", vous pouvez définir l'option minDate sur une valeur future, empêchant ainsi l'utilisateur de sélectionner des dates dans cette période, comme indiqué dans l'exemple ci-dessous. :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4" )); ))

Dans cet exemple, nous avons précisé que l'utilisateur ne doit pas pouvoir sélectionner des dates antérieures à 4 jours après la date actuelle. L'option maxDate n'est pas définie, ce qui signifie que l'utilisateur pourra sélectionner n'importe quelle date après la « période de délai » spécifiée. Le résultat est présenté sur la figure :

Notez que le bouton du mois suivant est activé dans cette situation, tandis que le bouton du mois précédent est désactivé (en raison du manque de dates passées disponibles pour que l'utilisateur puisse les sélectionner).

Les options minDate et maxDate fonctionnent conjointement avec l'option defaultDate, ce qui signifie que la liaison des plages à la date actuelle est facultative.

Le widget Datepicker vous permet de définir le nombre de mois qui doivent être affichés simultanément dans le calendrier à l'aide de l'option numberOfMonths. Cela peut être fait en spécifiant soit le nombre de mois requis, soit un tableau de deux éléments définissant les dimensions de la grille du calendrier mensuel.

L'exemple ci-dessous implémente une approche basée sur des tableaux, que je trouve la mieux adaptée aux widgets Datepicker intégrés, car la taille de la grille est souvent trop grande pour les widgets contextuels (nous y reviendrons plus tard).

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( numberOfMonths: )); ));

Cet exemple spécifie une grille de calendrier d'une hauteur d'un mois et d'une largeur de trois mois. Le résultat est présenté sur la figure :

Un tableau de deux éléments équivaut à la valeur numérique 3. Si la valeur de l'option numberOfMonths est spécifiée sous forme de nombre, alors le widget affiche le nombre de mois correspondant sur une ligne.

La raison pour laquelle j'utilise rarement cette approche lorsque je travaille avec des calendriers contextuels est qu'avec de grandes grilles, vous devez faire certaines hypothèses concernant la fenêtre du navigateur et la taille de l'affichage. La fenêtre du widget contextuel Datepicker n'est pas une boîte de dialogue du système d'exploitation. Il s'agit d'un élément HTML intelligemment stylé qui apparaît dans le cadre d'un document HTML. Cela signifie que lorsque de grandes grilles de calendrier sont affichées sur un petit écran ou dans une petite fenêtre de navigateur, une grande partie du reste des informations contenues dans le document apparaîtra hors écran.

Au lieu d'afficher simplement les mois et les années dans l'en-tête du calendrier, vous pouvez fournir un accès direct aux périodes pertinentes à l'aide de listes déroulantes. Cette fonctionnalité permet aux utilisateurs de sélectionner des dates parmi un large éventail de dates possibles et est implémentée à l'aide des options changeMonth et changeYear.

La définition de l’une de ces options sur true activera la liste déroulante correspondante et vous pourrez contrôler indépendamment si les listes sont activées. Un exemple d’utilisation de ces options est donné ci-dessous :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( changeMonth : true, changeYear : true, yearRange : "-1:+ 2" )); ));

Dans ce scénario, les deux listes déroulantes sont activées. De plus, l'option yearRange est utilisée pour limiter la plage d'années entre lesquelles l'utilisateur est autorisé à effectuer une transition. La plage requise est spécifiée à l'aide de la valeur "-1:+2", ce qui signifie que le calendrier permet à l'utilisateur de reculer d'un an et de deux ans en avant par rapport à l'année en cours.

Les listes déroulantes et la plage d'années spécifiée sont présentées dans la figure :

Lors de la définition de plages d’années, vous pouvez utiliser l’option yearRange pour spécifier les années réelles. Ainsi, dans cet exemple, vous pouvez spécifier la valeur : "2012:2015".

Il existe un certain nombre de propriétés qui vous permettent de personnaliser l'apparence du widget Datepicker lorsqu'il est affiché à l'utilisateur. Pour les tâches courantes de sélection de dates, vous pouvez vous contenter de l'apparence du calendrier par défaut que vous connaissez déjà dans les exemples précédents, mais la possibilité de personnaliser l'apparence en fonction des besoins de votre application Web spécifique est extrêmement utile.

Les propriétés qui vous permettent de modifier l'apparence du widget Datepicker sont présentées dans le tableau ci-dessous :

Dans certaines applications, il est important de connaître le numéro de la semaine de l'année dans laquelle tombe une date particulière. Par exemple, cela est requis dans de nombreux programmes de comptabilité. Dans le widget Datepicker, vous contrôlez l'affichage des informations sur la semaine à l'aide des options showWeek et weekHeader, comme indiqué dans l'exemple ci-dessous :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true, weekHeader: "Semaine n°." )); ) ) ;

Si l'option showWeek est vraie, une colonne avec les numéros de semaine s'affiche dans le calendrier. L'en-tête par défaut de cette colonne est "Semaine", mais il peut être modifié à l'aide de l'option weekHeader. L'exemple montre la colonne des semaines, qui est renommée "Semaine #" :

Par défaut, le calendrier affiche uniquement les dates comprises dans le mois en cours. Cela signifie qu'il peut y avoir des cellules vides dans la grille du calendrier. Vous pouvez autoriser le remplissage de cellules vides avec des dates des mois précédents et suivants en définissant l'option showOtherMonths sur true, comme indiqué dans l'exemple ci-dessous :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: true )); ));

Le résultat est présenté dans la figure ci-dessous. Dans ce cas, les dates appartenant à d'autres mois deviennent disponibles si l'option selectOtherMonths est définie sur true :

La définition de l’option showButtonBar sur true entraîne l’ajout d’une barre de boutons supplémentaires au bas de la fenêtre du widget Datepicker. Dans le cas d'un calendrier pop-up, le panneau contient deux boutons : « Aujourd'hui » et « Fermer ». Le bouton Aujourd'hui permet de revenir à la date actuelle et le bouton Fermer ferme la fenêtre du calendrier. Le texte utilisé pour ces boutons peut être modifié à l'aide des options currentText et closeText.

Si l'option goToCurrent est définie sur true, le calendrier reviendra à la date sélectionnée plutôt qu'à la date actuelle. Cette fonctionnalité est utile si le widget Datepicker est configuré avec une valeur d'option defaultDate spécifique. Si le but du choix d’une date est lié à des événements passés ou futurs, revenir à la date actuelle n’est pas toujours approprié. Un exemple correspondant est donné ci-dessous :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel : true, currentText : "Go", gotoCurrent : true, defaultDate : "+1m +1a" )).val("20/12/2014"); ));

Notez que l'utilisation de l'option goToCurrent entraîne l'appui sur le bouton pour passer à la date sélectionnée. Dans cet exemple, la date sélectionnée est l'attribut value de l'élément d'entrée, mais si l'utilisateur sélectionne une date différente puis rouvre le calendrier, cliquer sur le bouton ramènera le calendrier à la date sélectionnée par l'utilisateur plutôt qu'à la date que vous avez spécifiée.

Les méthodes prises en charge par le widget Datepicker sont répertoriées dans le tableau ci-dessous :

Les moments les plus courants où j'utilise les méthodes getDate et setDate sont lorsque je souhaite donner aux utilisateurs la possibilité de sélectionner des plages de dates entières à l'aide de plusieurs widgets Datepicker. Dans de telles situations, je préfère ne pas afficher les dates sélectionnées dans les champs de texte et afficher uniquement le nombre de jours entre les dates limites spécifiées. Un exemple correspondant est donné ci-dessous :

Étiquette jQuery UI (marge : 12 px) entrée (largeur : 200 px ; alignement du texte : gauche) #wrapper > * (float : gauche) #result (marge : auto ; remplissage : 10 px ; largeur : 200 px ; clair : gauche) $( function() ( $("#result").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker(( minDate : "-7d", maxDate : "+7d", onSelect : function(date, datepicker) ( if (datepicker.id == "dateStart") ( $("#dateEnd").datepicker("setDate", date) . datepicker("enable").datepicker("option", "minDate", date) ) if (!$("#dateEnd").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate"); var endDate = $("#dateEnd").datepicker("getDate"); var diff = endDate.getDate() - startDate.getDate(); $("#dayCount").text( diff).parent().show(); ) ) )).filter("#dateEnd").datepicker("disable"); )); Début : Fin : Nombre de jours :

Cet exemple crée deux calendriers, dont l'un est désactivé immédiatement après le chargement du document. Pour répondre à la sélection de dates par l'utilisateur, l'événement onSelect est utilisé (dont nous parlerons plus en détail plus tard).

Une fois que l'utilisateur sélectionne une date dans le premier calendrier, nous utilisons la méthode setDate pour préparer le deuxième calendrier, et la méthode getDate pour récupérer les dates des deux calendriers, puis calculer la différence en jours entre la première et la deuxième date (pour plus de simplicité, nous supposons que les deux dates datent du même mois). La vue du document dans la fenêtre du navigateur est illustrée dans la figure :

Comme tous les widgets jQuery UI, le widget Datepicker prend en charge un ensemble d'événements qui vous permettent d'être averti des changements importants dans l'état de l'application. Ces événements sont présentés dans le tableau ci-dessous :

Je ne démontrerai pas à nouveau le fonctionnement de la méthode onSelect car elle a déjà été utilisée dans quelques exemples, dont celui évoqué dans la section précédente. La seule chose que je tiens à souligner est que les arguments transmis au gestionnaire d'événements sont des représentations sous forme de chaîne de la date sélectionnée et de l'instance Datepicker qui a déclenché l'événement.

L'événement onChangeMonth vous permet de répondre à l'événement qui se produit lorsque l'utilisateur sélectionne un mois ou une année différent, que ce soit via des listes déroulantes activées via l'utilisation des options changeMonth et changeYear ou des boutons de la page du mois.

En utilisant la méthode onClose, vous pouvez répondre à la fermeture d'un calendrier contextuel. Cet événement se déclenche même si l'utilisateur n'a pas sélectionné de date dans le calendrier. Les arguments du gestionnaire d'événements sont une représentation sous forme de chaîne de la date (ou une chaîne vide si l'utilisateur a fermé la fenêtre sans effectuer de sélection) et de l'instance Datepicker qui a déclenché l'événement.

20/08/2012 Romchik

Bonne journée. L'autre jour, j'ai rencontré un problème : l'utilisateur doit spécifier une date dans un certain format dans la saisie. Sans me creuser la tête longtemps, j'ai décidé de faire en sorte que lorsque je clique sur saisie, un calendrier apparaisse. Ce n’est pas difficile à mettre en œuvre, mais pourquoi ? S'il existe un merveilleux widget de calendrier jQuery - datepicker. Nous parlerons ensuite de l'installation, de la configuration et de la connexion de datepicker.

Tout d'abord, je vais donner un exemple clair de ce que je veux faire :

Eh bien, il est clair qu'après avoir sélectionné une date, le calendrier disparaît et la date sélectionnée apparaît dans le champ de texte.
Commençons la mise en œuvre.

Accédez au site Web officiel de jQueryUI. Pour éviter de télécharger quoi que ce soit d'inutile, cliquez sur « Désélectionner tous les composants »

Et sélectionnez « Core » :

C'est essentiellement tout. Mais ce widget a des affichages prédéfinis (thèmes)
Dans le coin supérieur droit, vous pouvez sélectionner un thème approprié, sélectionner la version du widget et cliquer sur « Télécharger » :

À l'étape suivante, décompressez l'archive.
Mettons-nous tout de suite d'accord sur la structure de notre page :

Nous plaçons maintenant les fichiers jquery-1.8.0.min.js et jquery-ui-1.8.23.custom.min.js de l'archive téléchargée dans le dossier js. Maintenant, nous plaçons le dossier avec le nom du thème pour datepicker (dans mon cas, c'est ui-lightness) du dossier css de l'archive téléchargée dans le dossier css de notre page. Ceci termine l'installation du widget de calendrier jQuery Datepicker.
Commençons à connecter Datepicker. Comme je l'ai déjà dit, je souhaite appeler le calendrier en cliquant sur un champ de texte. Ajoutons id=”datepicker” à notre entrée afin que nous puissions y accéder facilement.

Écrivons maintenant un petit script jQuery qui appellera le calendrier lorsque vous cliquerez sur ce champ de test :

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

Nous sauvegardons et vérifions.

La première chose que nous définirons est un thème pour notre calendrier. Ci-dessous, je fournirai un tableau avec le nom du thème pour Datepicker et son affichage :

Comme vous pouvez le voir, il y a suffisamment de thèmes pour choisir le bon, mais si, pour une raison quelconque, vous n'avez pas trouvé un tel thème, vous pouvez facilement modifier l'un des thèmes standard en modifiant le fichier de style du sélecteur de date.
Les paramètres de datepicker ne s'arrêtent pas là, et lors de l'appel de la fonction datepicker, nous pouvons transmettre des paramètres supplémentaires :

Ici, je n'ai fourni que les paramètres de base qui peuvent vous être utiles. Si vous souhaitez voir la liste complète des paramètres, rendez-vous sur la documentation officielle
Regardons maintenant les valeurs que prend le paramètre dateFormat

C'est tout maintenant.
Nous avons examiné l'installation, la connexion et la configuration de l'un des merveilleux widgets jQuery - le widget de calendrier datepicker.
J'espère que vous avez aimé l'article. Si vous avez des questions, écrivez dans les commentaires.
Et sur ce, je vous dis au revoir et au développement Web réussi.

Je réserve tout de suite que la série de ces articles n'est pas destinée aux professionnels aguerris, c'est juste un élan de développement, une sorte de petite excursion dans les possibilités pour les débutants, pour ceux qui n'ont aucune idée de l'UI et de jQuery dans général.
Allons-y!

Télécharger : http://jqueryui.com/download
Nous connectons le cadre chamanique, la localisation pour le calendrier et la feuille de style :

Voilà, les préparatifs sont terminés.

Pour créer un calendrier, vous n'avez besoin que d'une seule ligne HTML :

Ou si vous souhaitez intégrer un calendrier dans le site en tant qu'élément de page :

Et quelques lignes js :

$(function())( $.datepicker.setDefaults($.extend($.datepicker.regional["ru"])); $("#datepicker").datepicker(); ));

Nous avons donc un calendrier entièrement fonctionnel en russe, mais que se passe-t-il si nous créons un site Web en anglais ou en ukrainien ? Pour changer la situation en notre faveur, il suffit de modifier un paramètre, et cela peut se faire de manière dynamique :

$("#datepicker").datepicker("option", $.datepicker.regional["uk"]));

La fonctionnalité standard « par défaut » n’est pas toujours suffisante pour effectuer certaines tâches. Modifions donc un peu les paramètres :

$("#datepicker").datepicker(( minDate: "-30", //Date minimale pouvant être sélectionnée, soit -30 jours à partir de "maintenant" maxDate: "+1m +1w +3d" //Maximum une date sélectionnable, soit + 1 mois, 1 semaine et 3 jours à partir de « maintenant » ));

Dans la liste ci-dessus, nous avons trois options contenant des rappels.
beforeShow est la fonction qui sera appelée avant l'affichage du calendrier.
En utilisant les options CSS, l'entrée sera définie sur un fond jaune.
OnSelect définit une fonction qui sera appelée lorsqu'une date est sélectionnée ; elle affichera la date sélectionnée dans une alerte et transmettra une valeur d'option CSS vide, qui renverra l'entrée à sa forme précédente.
onClose est une fonction qui fonctionnera lorsque le calendrier sera fermé, c'est-à-dire qu'elle renverra un fond blanc à l'entrée.

• altField est un sélecteur jQuery pour un autre champ qui doit être mis à jour dès qu'une date est sélectionnée dans le Datepicker. Le format de date dans ce champ supplémentaire est défini à l'aide de l'option altFormat.
• altFormat - format de date qui sera utilisé pour l'option altField. Ces paramètres permettent d'afficher un format de date à l'utilisateur tandis qu'un format différent peut être utilisé pour les calculs. Une liste complète des formats possibles est disponible sur http://api.jqueryui.com/datepicker/
• appendText - Le texte qui sera affiché après chaque champ de sélecteur de date. Peut être utilisé, par exemple, pour marquer un champ comme requis.
• buttonImage — adresse de l'image qui sera affichée sur le bouton pouvant être utilisé pour appeler le calendrier. Utilisé conjointement avec l'option showOn lorsqu'elle prend la valeur « bouton » ou « les deux ». Si du texte a été spécifié dans l'option ButtonText, il devient la valeur de l'attribut alt de l'image.
• buttonImageOnly - si vous définissez cette option sur true, alors l'image dont l'adresse est définie dans l'option buttonImage ne sera pas affichée sur le bouton, mais par elle-même.
• ButtonText - texte affiché sur le bouton qui peut être utilisé pour ouvrir le calendrier. Utilisé conjointement avec l'option showOn lorsqu'elle prend la valeur « bouton » ou « les deux ».
• changeMonth - si vous passez la valeur true dans cette option, il sera possible de sélectionner le mois dans la liste déroulante.
• changeYear - si vous passez la valeur true dans cette option, il sera possible de sélectionner l'année dans la liste déroulante.
• closeText - Cette option est utilisée conjointement avec showButtonPanel si cette dernière est vraie. La valeur de l'option closeText est définie dans le fichier de localisation si celui-ci est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement.
• constrainInput - par défaut, l'option est vraie et force le format de date défini dans les options du widget à être strictement respecté dans le champ de saisie de texte. Pour ne pas suivre ce format, vous devez définir l'option sur false.
• currentText - Cette option est utilisée conjointement avec showButtonPanel si cette dernière est vraie. La valeur de l'option currentText est définie dans le fichier de localisation si celui-ci est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement.
• dateFormat - définit le format de date. La valeur de l'option dateFormat est définie dans le fichier de localisation si celui-ci est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement. Une liste complète des formats possibles est disponible sur
  http://docs.jquery.com/UI/Datepicker/formatDate
• dayNames est un tableau contenant les noms complets des jours de la semaine, en commençant par dimanche. Défini dans le fichier de localisation s'il est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement.
• dayNamesMin est un tableau contenant l'abréviation à 2 lettres des noms des jours de la semaine, commençant par dimanche. Défini dans le fichier de localisation s'il est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement.
• dayNamesShort - un tableau contenant l'abréviation à 3 lettres des noms des jours de la semaine, commençant par dimanche. Défini dans le fichier de localisation s'il est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement.
• defaultDate - Définit la date qui sera mise en surbrillance lors de la première ouverture si le champ du sélecteur de date est vide. L'option peut être spécifiée via un objet Date, soit sous la forme d'un nombre de jours à partir de la période actuelle (par exemple +7 ou -15), soit sous la forme d'une chaîne de valeurs spécifiant la période (« y » pour les années, « m ' pour les mois, 'w' pour les semaines, 'd' pour les jours, par exemple '+1m +7d'), et enfin comme null pour le jour en cours.
• durée — durée de l'effet d'animation lors de l'ouverture (fermeture) du calendrier. Peut prendre des valeurs sous forme de chaîne - « rapide », « normal » (par défaut), « lent » ou sous forme de nombre en millisecondes. Si vous passez une chaîne vide, le calendrier s'ouvrira et se fermera sans aucun effet d'animation.
• firstDay - l'option définit le premier jour de la semaine : dimanche - 0, lundi - 1,... Défini dans le fichier de localisation, si utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement.
• gotoCurrent - si vous définissez la valeur de l'option sur true, le bouton Aujourd'hui (disponible lorsque showButtonPanel : true) pointera vers la date sélectionnée au lieu de la date actuelle.
• hideIfNoPrevNext - si vous limitez la plage de dates disponibles à l'aide des options minDate et maxDate, lorsque vous atteignez la fin de la plage, les flèches Précédent et Suivant deviennent inactives. Mais vous pouvez les masquer complètement en passant la valeur true à l'option hideIfNoPrevNext.
• isRTL - Cette option doit être définie sur true si une langue s'écrivant de droite à gauche est utilisée. Défini dans le fichier de localisation, s'il est utilisé.
• maxDate - définit la date maximale sélectionnable via l'objet Date soit comme le nombre de jours à partir de celui en cours (par exemple +7) soit comme une chaîne de valeurs définissant la période (« y » pour les années, « m » pour les mois , 'w' pour les semaines, 'd' pour les jours, par exemple '+1y +1m'), ou null pour aucune limite.
• minDate - définit la date minimale sélectionnable via l'objet Date soit comme le nombre de jours à partir de la date actuelle (par exemple -7) soit comme une chaîne de valeurs définissant la période (« y » pour les années, « m » pour les mois , 'w' pour les semaines, 'd' pour les jours, par exemple '-1y -1m'), ou null pour aucune limite.
• MonthNames est un tableau contenant les noms complets des mois. Défini dans le fichier de localisation s'il est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement.
• MonthNamesShort - un tableau contenant une abréviation de 3 lettres pour le nom du mois. Défini dans le fichier de localisation s'il est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement.
• navigationAsDateFormat - par défaut, l'option est false. Si elle est définie sur true, la fonction dateFormat sera appliquée aux valeurs des options nextText, prevText et currentText pour afficher, par exemple, les noms des mois précédent et suivant lors de la navigation.
• nextText est le texte affiché sous forme de lien vers le mois suivant. Défini dans le fichier de localisation s'il est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement. Si le fichier de style de ThemeRoller est utilisé, cette valeur est remplacée par l'icône.
• numberOfMonths - cette option détermine combien de mois doivent être affichés à la fois. La valeur de l'option peut être un simple nombre ou un tableau de deux éléments qui définissent respectivement le nombre de lignes et de colonnes. Par exemple, la valeur affichera un calendrier sur deux lignes de trois mois.
• prevText - texte affiché sous forme de lien vers le mois précédent. Défini dans le fichier de localisation s'il est utilisé, mais cette valeur peut être remplacée en la spécifiant explicitement. Si le fichier de style de ThemeRoller est utilisé, cette valeur est remplacée par l'icône.
• shortYearCutoff - valeur par défaut +10. Cette option n'est utilisée que si dateFormat utilise une notation d'année à deux chiffres et agit comme un compensateur pour déterminer le siècle. Si la valeur est transmise sous forme de nombre, elle est utilisée telle quelle. Si la valeur est transmise sous forme de chaîne, elle est convertie en nombre et ajoutée à la valeur de l'année en cours. Une fois la valeur déterminée, toutes les données servant de valeur à l'année, qu'elles soient inférieures ou égales à celle-ci, sont considérées comme des années du siècle en cours. Les grandes valeurs sont considérées comme des années du siècle précédent.
• showAnim - détermine le type d'animation lors de l'ouverture du calendrier. La valeur par défaut est show (hide sera utilisé lors de la fermeture). Sans connecter de fichiers supplémentaires, les effets « slideDown » et « fadeIn » peuvent être utilisés (lors de la fermeture, les effets « slideUp » et « fadeOut » seront utilisés respectivement). Il est également possible d'utiliser n'importe quel effet jQuery UI, à condition qu'il soit en outre connecté.
• showButtonPanel - Définir cette option sur true entraînera l'affichage d'un panneau avec deux boutons - accédez à la date du jour et fermez le calendrier.
• showCurrentAsPos - lors de l'affichage de plusieurs mois à la fois, le nombre transmis dans cette option détermine la position du mois en cours. La valeur par défaut est 0 et le mois en cours est affiché dans le coin supérieur gauche.
• showMonthAfterYear - la valeur par défaut est false et le nom du mois précède l'année dans l'en-tête. Lorsqu'il est défini sur true, le nom du mois suivra l'année.
• showOn - Cette option est par défaut « focus », ce qui entraîne l'ouverture du calendrier lorsque vous cliquez sur le champ de saisie. Les autres valeurs possibles sont « bouton » et « les deux ». Un bouton apparaîtra à côté du champ de saisie. Dans le premier cas, le calendrier s'ouvrira lorsque vous cliquerez sur le bouton, et dans le second cas, à la fois lorsque vous cliquerez sur le bouton et lorsque le champ de saisie recevra le focus.
• showOptions - Si vous utilisez l'un des effets jQuery UI, vous pouvez lui transmettre des paramètres supplémentaires à l'aide de cette option. Par exemple : showOptions : (direction : « haut »).
• showOtherMonths - par défaut, false. Si c'est vrai, le calendrier affichera les jours du mois précédent et/ou suivant sans possibilité de les sélectionner.
• stepMonths - détermine de combien de mois déplacer le calendrier lorsque vous cliquez sur les liens Suivant et Précédent. La valeur par défaut est 1.
• yearRange - contrôle la plage d'années affichée dans la liste déroulante (lors de l'utilisation de l'option changeYear).

• beforeShow - ici vous pouvez définir une fonction qui sera appelée avant d'ouvrir le calendrier. La fonction prend en argument un objet caractérisant le champ de saisie de texte avec lequel fonctionne le widget.
• beforeShowDay - dans cette option, vous pouvez définir une fonction personnalisée qui prendra la date sélectionnée comme argument. La fonction doit renvoyer un tableau, où l'élément d'index - vrai ou faux indique si la sélection de cette date est possible ou non. L'élément index contient le nom de la ou des classes pour afficher la date. Élément avec index (facultatif) – texte d'info-bulle pour la date. La fonction sera appelée pour chaque date du calendrier lorsque la souris sera survolée.
• onChangeMonthYear - ici vous pouvez définir une fonction qui sera appelée lorsque le mois ou l'année du calendrier change. La fonction prend trois arguments. Les deux premiers arguments sont les nouvelles valeurs de l'année et du mois, le troisième argument est un objet datepicker.
• onClose - Cette option définit une fonction qui sera appelée lorsque le calendrier sera fermé sans sélectionner de date.
• onSelect - cette option définit une fonction qui sera appelée lorsqu'une date est sélectionnée dans le calendrier.

• destroy - .datepicker('destroy') supprime complètement toutes les fonctionnalités du widget Datepicker. Ramène les éléments à leur état de pré-initialisation.
• désactiver — .datepicker('disable') désactive temporairement toutes les fonctionnalités du widget. Vous pouvez réactiver son utilisation à l'aide de la méthode d'activation.
• activer - .datepicker('enable') permet l'utilisation de toutes les fonctionnalités du widget si elles ont été précédemment désactivées à l'aide de la méthode de désactivation.
• option - .datepicker('option', optionName, ) en utilisant cette méthode, vous pouvez obtenir ou définir la valeur de n'importe quelle option de widget après l'initialisation.
• dialog - .datepicker('dialog', dateText, , , ) ouvre le widget Datepicker en mode dialogue. L'argument dateText transmet la date à laquelle le calendrier doit être ouvert. Les arguments restants sont facultatifs. Dans l'argument onSelect, vous pouvez transmettre une fonction qui sera appelée lorsque vous sélectionnez une date dans le calendrier, dans l'argument settings, vous pouvez transmettre un objet avec de nouveaux paramètres de widget, dans l'argument pos, vous pouvez transmettre les coordonnées dans lesquelles la boîte de dialogue sera ouvert. Ici, vous pouvez utiliser les événements de la souris pour déterminer les coordonnées.
• isDisabled - La méthode .datepicker('isDisabled') renvoie true si la méthode de désactivation a été appliquée au widget et false sinon.
• hide - .datepicker('hide', ) masque le calendrier précédemment ouvert.
• show - .datepicker('show') ouvre le calendrier.
• getDate - La méthode .datepicker('getDate') renvoie la date sélectionnée dans le calendrier.
• setDate - La méthode .datepicker('setDate', date) vous permet de définir une date dans le calendrier. La valeur de l'argument date peut être une chaîne (par exemple : 25/10/1917)

En contact avec

Incluez les styles et les scripts du dossier /dist :

Le calendrier est automatiquement initialisé sur les éléments avec la classe .datepicker-here et les options peuvent être transmises via les attributs de données.

Passez le paramètre (multipleDates : true) pour sélectionner plusieurs dates. Si vous devez limiter le nombre de dates sélectionnées, transmettez le nombre requis (plusieursDates : 3).

Initialisez le plugin sur un élément qui n'est pas un champ de texte, par exemple sur ..., ou passez le paramètre (inline: true) .

Pour limiter la sélection de date, utilisez minDate et maxDate , qui doivent recevoir un objet date.

$("#minMaxExample").datepicker(( // Vous pouvez sélectionner uniquement les dates après aujourd'hui, y compris aujourd'hui minDate: new Date() ))

Utilisez le paramètre (range: true) pour sélectionner une plage. multipleDatesSeparator sera utilisé comme séparateur de date

Afin de pouvoir sélectionner la même date, vous devez définir (toggleSelected: false) .

Pour rendre impossible la sélection de jours spécifiques de la semaine, vous pouvez utiliser la méthode onRenderCell.

// Rendre le dimanche et le samedi inactifs var DisabledDays = ; $("#disabled-days").datepicker(( onRenderCell: function (date, cellType) ( if (cellType == "day") ( var day = date.getDay(), isDisabled = handicapésDays.indexOf(day) ! = -1 ; retour ( désactivé : isDisabled ) ) ) ))

Air Datepicker vous permet de modifier le contenu des cellules à votre guise. Vous pouvez également utiliser la méthode onRenderCell pour cela. Ajoutons des assistants à quelques dates et affichons un texte aléatoire lorsque ces dates sont sélectionnées :

Var eventDates = , $picker = $("#custom-cells"), $content = $("#custom-cells-events"), phrases = [ … ]; $picker.datepicker(( onRenderCell: function (date, cellType) ( var currentDate = date.getDate(); // Ajoutez un élément d'assistance si le nombre est contenu dans `eventDates` if (cellType == "day" && eventDates. indexOf( currentDate) != -1) ( return ( html: currentDate + "" ) ) ), onSelect : function onSelect(fd, date) ( var title = "", content = "" // Si une date avec un événement est sélectionné, puis affichez son if (date && eventDates.indexOf(date.getDate()) != -1) ( title = fd; content = sentences; ) $("strong", $content).html(title) $ ("p", $content).html(content) ) )) // Sélectionnez immédiatement une date dans `eventDates` var currentDate = currentDate = new Date(); $picker.data("datepicker").selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))

Pour ajouter des actions depuis le début ou à la fin de l'animation, utilisez les options onShow et onHide

$("#example-show-hide-callbacks").datepicker(( onShow: function(dp, animationCompleted)( if (!animationCompleted) ( log("commencer l'affichage") ) else ( log("terminé l'affichage") ) ), onHide : function(dp, animationCompleted)( if (!animationCompleted) ( log("commencer à se cacher") ) else ( log("terminé à se cacher") ) ) ))

Pour sélectionner l'heure, utilisez l'option (timepicker : true) - elle ajoutera l'heure et quelques curseurs avec lesquels vous pourrez régler les heures et les minutes.

Par défaut, l'heure actuelle sur l'ordinateur de l'utilisateur sera définie ; cette valeur peut être modifiée à l'aide du paramètre startDate.

Vous pouvez en savoir plus sur les paramètres de sélection de l'heure dans .

Le format de l'heure est spécifié dans l'objet de localisation ou dans le paramètre timeFormat. La valeur par défaut est le format 24 heures. Pour sélectionner un format de 12 heures, vous devez ajouter le caractère aa ou AA à timeFormat. Après cela, le widget affichera les désignations « AM » ou « PM », selon la période horaire sélectionnée.

Pour définir les valeurs maximales/minimales possibles pour les heures ou les minutes, utilisez les paramètres maxHours, minHours, maxMinutes, minMinutes. Vous pouvez également spécifier l'heure dans les paramètres minDate et maxDate

Créons un calendrier où l'utilisateur peut sélectionner l'heure de 09h00 à 18h00, et le samedi et le dimanche de 10h00 à 16h00.

// Définit la date de début var start = new Date(), prevDay, startHours = 9; // 09h00 start.setHours(9); start.setMinutes(0); // Si aujourd'hui c'est samedi ou dimanche - 10h00 if (.indexOf(start.getDay()) != -1) ( start.setHours(10); startHours = 10 ) $("#timepicker-actions-exmpl" ) .datepicker(( timepicker : true, startDate : start, minHours : startHours, maxHours : 18, onSelect : function(fd, d, picker) ( // Ne rien faire si la sélection a été désélectionnée if (!d) return; var day = d.getDay(); // Met à jour l'état du calendrier uniquement si la date a été modifiée if (prevDay != undefined && prevDay == day) return; prevDay = day; // Si le jour sélectionné est samedi ou dimanche, puis on fixe // les heures du week-end , sinon on restaure les valeurs initiales if (day == 6 || day == 0) ( picker.update(( minHours: 10, maxHours: 16 )) ) else ( picker .update((minHeures : 9, maxHeures : 18 )) ) ) ))

Vous pouvez ajouter votre localisation à l'objet $.fn.datepicker.langue["my-lang"] et lors de l'appel du calendrier, passer le nom de la langue au paramètre langue

$.fn.datepicker.langue["my-lang"] = (...) $(".my-datepicker").datepicker(( langue : "my-lang" ))

Vous pouvez également transmettre l'objet de localisation directement à la langue

$(".my-datepicker").datepicker(( langue: ( jours: [...] ... ) ))

S'il manque certains champs dans votre localisation, ils seront extraits de la langue par défaut (russe).

Tapez la chaîne

Valeur par défaut ""

Cours supplémentaires pour le calendrier.

Tapez booléen

La valeur par défaut est fausse

Si c'est vrai, le calendrier sera visible en permanence.

Tapez chaîne|objet

Valeur par défaut "ru"

Langue du calendrier. Si une chaîne est passée, alors la recherche de langue sera effectuée dans l'objet Datepicker.langue. Si un objet est passé, alors les données en seront extraites.

S'il manque certains champs à l'objet de localisation, ils seront extraits de la langue par défaut.

Type de date

Valeur par défaut de new Date()

La date qui sera affichée lors de l'initialisation du calendrier.

Numéro de type

Valeur par défaut ""

L'index du jour où commence la semaine. Les valeurs possibles vont de 0 à 6, où 0 correspond au dimanche et 6 au samedi. Par défaut, elle est issue de la localisation ; si la valeur est passée ici, elle aura une priorité plus élevée.

type de tableau

Valeur par défaut

Tapez la chaîne

Valeur par défaut ""

Format de date souhaité, combinaison de j, m, aaaa, D, M, etc. Par défaut, elle est issue de la localisation ; si vous transmettez la valeur ici, elle aura une priorité plus élevée.

• @ - temps en millisecondes
• j - date
• jj - date avec un zéro non significatif
• D - nom abrégé du jour
• DD - nom complet du jour
• m - numéro de viande
• mm - numéro du mois avec zéro non significatif
• M - nom abrégé du mois
• MM - nom complet du mois
• aa - numéro d'année abrégé
• aaaa - numéro de l'année complète
• aaaa1 - la première année de la décennie qui comprend l'année en cours
• aaaa2 - la dernière année de la décennie qui comprend l'année en cours

Tapez la chaîne|jQuery

Valeur par défaut ""

Un champ d'eau alternatif dont la valeur inclura les dates sélectionnées au format altFieldDateFormat.

Tapez la chaîne

La valeur par défaut est "@"

Format de date pour le champ alternatif.

Tapez booléen

La valeur par défaut est vraie

Si c'est vrai, cliquer sur la date sélectionnée la désélectionnera.

Tapez booléen

La valeur par défaut est vraie

Si c'est vrai, le calendrier peut être parcouru à l'aide du clavier.

Raccourcis clavier:

• Ctrl + → | - avancer d'un mois
• Ctrl + ← | ↓ - remonte un mois en arrière
• Maj + → | - avancer d'un an
• Maj + ← | ↓ - remonte un an en arrière
• Alt + → | - avancer de 10 ans
• Alt + ← | ↓ - remonter 10 ans en arrière
• Ctrl + Maj + - passer à la vue suivante
• Echap - ferme le calendrier

Tapez la chaîne

La valeur par défaut est "en bas à gauche".

Positionnement du calendrier par rapport au champ de texte. La première valeur précise l'axe de positionnement principal, la deuxième valeur précise la position sur cet axe. Par exemple (position : "right top") - définit la position du client en haut à droite du champ de texte.

Numéro de type

Valeur par défaut 12

Décalage par rapport à l'axe de positionnement principal.

Tapez la chaîne

La valeur par défaut est "jours"

Vue initiale du calendrier. Valeurs possibles:

• jours - affiche les jours du mois
• mois - affiche les mois d'une année
• années - affiche les années d'une décennie

Tapez la chaîne

La valeur par défaut est "jours"

Une vue minimale du calendrier, sur laquelle la sélection d'une cellule l'activera, plutôt que de passer à la vue suivante. Les valeurs possibles sont les mêmes que pour le paramètre view.

Tapez booléen

La valeur par défaut est vraie

Si c'est vrai, les jours des autres mois seront affichés.

Tapez booléen

La valeur par défaut est vraie

Si c'est vrai, vous pouvez sélectionner des jours d'autres mois.

Tapez booléen

La valeur par défaut est vraie

Si c'est vrai, lors de la sélection de jours d'autres mois, la transition vers ce mois sera effectuée.

Tapez booléen

La valeur par défaut est vraie

Si c'est vrai, lors de l'affichage d'une décennie, les années des autres décennies seront affichées.

Tapez booléen

La valeur par défaut est vraie

Si c'est vrai, vous pouvez sélectionner des années parmi d'autres décennies

Tapez booléen

La valeur par défaut est vraie

Si cela est vrai, lors de la sélection d’une année dans une autre décennie, la transition se fera vers cette décennie.

Type de date

Valeur par défaut ""

Date minimale de sélection. Toutes les dates antérieures ne peuvent pas être activées.

Type de date

Valeur par défaut ""

Date maximale de sélection. Toutes les dates ultérieures ne peuvent pas être sélectionnées.

Tapez booléen

La valeur par défaut est vraie

Si c'est vrai, alors lorsqu'une date se produit qui est inférieure au minimum possible ou supérieure au maximum possible, les boutons de navigation « avant » et « arrière » seront désactivés.

Tapez booléen|nombre

La valeur par défaut est fausse

Si c'est vrai, vous pouvez sélectionner un nombre illimité de dates. Si vous transmettez un numéro, le nombre de dates sélectionnées sera limité à ce nombre.

Tapez la chaîne

Valeur par défaut ","

Séparateur de date à utiliser lors de la combinaison de plusieurs dates en une seule chaîne.

Tapez booléen

La valeur par défaut est fausse

Si c’est vrai, le mode de sélection de plage de dates sera activé. multipleDatesSeparator sera utilisé comme séparateur

Tapez booléen|Date

La valeur par défaut est fausse

Si c'est vrai, le bouton Aujourd'hui sera affiché. Si vous passez un objet date, alors lorsque vous cliquerez sur le bouton, une transition sera effectuée et la sélection ultérieure de cette date sera effectuée.

// Sélectionnez le jour d'aujourd'hui $(".datepicker").datepicker(( TodayButton: new Date() ))

Tapez booléen

La valeur par défaut est fausse

Si c'est vrai, le bouton Effacer sera affiché.

Tapez la chaîne

La valeur par défaut est "focus"

Le type d'événement à l'occasion duquel le calendrier sera affiché.

Tapez booléen

La valeur par défaut est fausse

Si c'est vrai, lorsque la date est activée, le calendrier se fermera.

Tapez la chaîne

Valeur par défaut

Contenu du bouton "mois|année|décennie précédente".

Tapez la chaîne

Valeur par défaut

Contenu du bouton "mois prochain | année | décennie".

Saisir un objet

Valeur par défaut

NavTitles = (jours : "MM, aaaa", mois : "aaaa", années : "aaaa1 - aaaa2" );

La valeur du titre du calendrier dépend de la vue actuelle, vous pouvez utiliser la même notation que dans dateFormat . Les champs manquants seront repris de la valeur par défaut. Vous pouvez également utiliser des balises html.

$("#my-datepicker").datepicker(( navTitles: ( jours : "Sélectionnez une date d'arrivée MM, aaaa") ))

Tapez la chaîne

La valeur par défaut est "monthsShort"

Quel champ de l'objet de localisation doit être utilisé comme nom de mois lorsque view = "months" .

Tapez booléen

La valeur par défaut est fausse

Si c'est vrai, alors la possibilité de sélectionner l'heure sera ajoutée.

Tapez la chaîne

Valeur par défaut " "

Séparateur entre la date et l'heure.

Tapez la chaîne

La valeur par défaut est nulle

Format de l'heure. Par défaut, il est extrait de la localisation. Si vous transmettez une valeur ici, elle aura une priorité plus élevée. Pour activer le mode 12 heures, ajoutez par exemple « aa » ou « AA » au paramètre timeFormat (timeFormat : « hh:ii AA ») Options possibles :

• h - heures
• hh - heures, avec zéro non significatif
• je - minutes
• ii - minutes, avec zéro non significatif
• aa - période de la journée - "am" ou "pm"
• AA - période de la journée en majuscules

Numéro de type

Valeur par défaut 0

La valeur horaire minimale est comprise entre 0 et 23. Vous ne pouvez pas sélectionner une heure de moins que la valeur transmise.

Numéro de type

Valeur par défaut 23

La valeur horaire maximale est comprise entre 0 et 23. Vous ne pouvez pas sélectionner une heure supérieure à la valeur transmise.

Numéro de type

Valeur par défaut 0

La valeur horaire minimale est comprise entre 0 et 59. Vous ne pouvez pas définir une valeur de minute inférieure à la valeur transmise.

Numéro de type

Valeur par défaut 59

La valeur maximale des minutes est comprise entre 0 et 59. Vous ne pouvez pas définir une valeur de minutes supérieure à la valeur transmise.

Numéro de type

Valeur par défaut 1

Étape de sélection des heures.

Numéro de type

Valeur par défaut 1

Étape de sélection minute.

Type de fonction

La valeur par défaut est nulle

Fonction de rappel lors de la sélection d'une date.

• Date formatée chaîne- date formatée.
• date Date|tableau- Objet Date de la date sélectionnée, si (multipleDates: true) , alors un tableau de ces objets sera transmis.
• inst objet- instance de plugin.

Type de fonction

La valeur par défaut est nulle

Fonction de rappel lorsque le calendrier apparaît.

• inst Objet- une copie du calendrier.
• animationTerminé booléen

Type de fonction

La valeur par défaut est nulle

Fonction de rappel lors du masquage du calendrier.

• inst Objet- une copie du calendrier.
• animationTerminé booléen- indicateur d'état de l'animation. si faux, alors l'animation vient de commencer, si vrai, alors elle est déjà terminée.

Type de fonction

La valeur par défaut est nulle

Fonction de rappel lorsque le mois change.

• mois nombre- numéro du mois (de 0 à 12) vers lequel le passage a été effectué.
• année nombre- le numéro de l'année vers laquelle la transition a été effectuée.

Type de fonction

La valeur par défaut est nulle

Fonction de rappel lorsque l'année change.

• année nombre- numéro de l'année vers laquelle la transition a été effectuée

Type de fonction

La valeur par défaut est nulle

Fonction de rappel lorsque la décennie change.

• décennie tableau- un tableau composé du numéro de l'année à partir de laquelle la décennie commence et de l'année au cours de laquelle elle se termine.

Type de fonction

La valeur par défaut est nulle

Fonction de rappel lorsque la vue du calendrier change

• voir chaîne- le type vers lequel le passage a été effectué (jours, mois, années).

Type de fonction

La valeur par défaut est nulle

Fonction de rappel lors du dessin d'une cellule de calendrier.

• date Date- objet de date de cellule actuel
• Type de cellule chaîne- type de cellule courante (jour, mois, année).

La fonction doit renvoyer un objet, qui peut être composé de trois champs :

( html : "", // Classes de contenu de cellule personnalisées : "", // Classes supplémentaires pour la cellule désactivées : "" // vrai/faux, si vrai, alors la cellule ne peut pas être sélectionnée)

L'accès à une instance de plugin est fourni via l'attribut data.

Var myDatepicker = $("#my-elem").datepicker().data("datepicker"); monDatepicker.show();

Affiche le calendrier.

Masque le calendrier.

Supprime le calendrier.

Passe au mois suivant si le type est jours, à l'année suivante s'il s'agit de mois et à la décennie suivante s'il s'agit d'années.

Va au mois précédent si le type est jours, à l'année précédente si mois et à la décennie précédente si années.

• date Date|Tableau- date au format JavaScript, ou un tableau de dates

Sélectionne la date passée ou plusieurs dates si un tableau de dates est passé. Si (multipleDates : false) et qu'il y a déjà une date active, elle sera désactivée. Si (multipleDates : true), alors une autre date active sera ajoutée.

• date Date- date au format JavaScript Date()

Désélectionne la date passée.

Supprime la sélection de toutes les dates actives.

• champ chaîne|objet- le nom du champ dont la valeur doit être mise à jour.
• champ chaîne|*- nouvelle valeur du paramètre

Mettez à jour les options du calendrier ; après avoir appelé la méthode, elle sera automatiquement redessinée. Vous pouvez mettre à jour plusieurs paramètres à la fois, pour cela, vous devez passer un objet avec les champs obligatoires.

Var datepicker = $("#my-elem").datepicker().data("datepicker"); // Mettre à jour un paramètre datepicker.update("minDate", new Date()) // Mettre à jour plusieurs paramètres datepicker.update(( position: "top right", maxDate: new Date(), TodayButton: true ))

Définit une nouvelle vue pour le calendrier.

Datepicker.view = "mois" ;

Définit la nouvelle date d'affichage, doit être transmise à JavaScript Date()

Dans l'une des leçons, nous avons appris comment connecter la bibliothèque jQuery UI de différentes manières. Aujourd'hui, le sujet de la leçon sera le widget de sélection de date - jQuery UI Datapicker.

Pourquoi ce widget est-il nécessaire ? Pour fournir à l'utilisateur un calendrier lors de la saisie d'une date, lors du remplissage du formulaire, il n'a pas besoin de réfléchir au format dans lequel saisir les dates. À son tour, l'administrateur des ressources reçoit les données dans le même format.

A cette adresse : https://jqueryui.com/datepicker/ Vous verrez plusieurs options pour le widget datapicker, nous examinerons uniquement les deux principales.

Lorsque l'utilisateur clique dans le champ de texte de saisie, un calendrier apparaît avec une sélection de date et un menu supplémentaire avec une sélection de mois et d'année. L'option avec une date convient aux sites où le client indique par exemple la date de sa visite.

Le code HTML se compose d'une seule balise d'entrée avec l'identifiant "datapicker" enveloppé dans un paragraphe - la balise p. Au lieu d'un paragraphe, cette entrée peut être placée dans n'importe quel élément de bloc du site.

Date:

Le code jQuery doit être copié (voir la source) et collé dans votre site, comme dans l'exemple. Après avoir chargé l'arborescence DOM, nous recevrons l'élément par ID #datapicker dans le champ de texte et appellerons la méthode .datepicker. Vous devez maintenant transmettre un objet à la méthode dans laquelle décrire les paramètres supplémentaires : changeMonth: true, changeYear: true . Il est désormais possible de sélectionner le mois et l'année via une liste déroulante ; c'est un peu plus pratique que de faire un choix similaire via le calendrier.

$(fonction() (
$("#datepicker").datepicker((
changementMois : vrai,
changementAnnée : vrai
});
});

Le widget Datapicker avec une sélection de plage de dates Date Range convient aux sites dotés d'un système de réservation. L'utilisateur spécifie la date de début dans le premier calendrier et la date de fin dans le deuxième calendrier. Créons deux champs de texte de saisie avec les identifiants « de » et « à » et deux étiquettes liées à leurs champs de texte.

Depuis

à

Nous obtenons un élément avec l'identifiant #from - le premier champ de texte et y appelons la méthode datapicker.

$(fonction() (
var dateFormat = "mm/jj/aa",
de = $("#de")
.sélecteur de date((

Fixons la date par défaut plus une semaine.

Date par défaut : "+1w",

Possibilité de changer le mois à l'aide d'une liste déroulante.

ChangementMois : vrai,
nombre de mois : 3 ))

Lorsque l'événement on se produit, c'est-à-dire que l'utilisateur sélectionne quelque chose dans la liste déroulante, puis lorsque la date sélectionnée change, nous trouvons le deuxième sélecteur de date et définissons la date minimale égale à celle sélectionnée.

On("changement", fonction() (
to.datepicker("option", "minDate", getDate(this));
}),
à = $("#à").datepicker

Lors de la modification de la date sélectionnée, nous trouvons le premier sélecteur de date et fixons la date maximale égale à celle sélectionnée.

On("changement", fonction() (
from.datepicker("option", "maxDate", getDate(this));
});

Tous les exemples de code et visuels de toutes les options avec différents paramètres du widget jQuery Datapicker sont sur le site Web jqueryui.com.

Par défaut, le calendrier est affiché en anglais, mais cela peut être modifié ; la bibliothèque jQuery UI prend en charge plusieurs langues.

Téléchargez le fichier de langue requis sur Github

Nous incluons le module de langue requis dans la balise head.

Nous créons un champ de texte pour le calendrier et une liste déroulante avec l'identifiant "locale" répertoriant les langues requises.

Date:

Anglais
russe (russe)

Après avoir chargé l'arborescence DOM, recherchez l'objet datapicker. Nous modifions les paramètres de tous les sélecteurs de date.

$(fonction() (
$("#datepicker").datepicker($.datepicker.regional[ "ru" ]);

Changement de localisation pour "datepicker" .

$("#locale").on("change", function() (

Modifiez la localisation lors de la sélection d'une nouvelle valeur dans la liste déroulante.

$("#datepicker").datepicker("option",
$.datepicker.regional[ $(this).val() ]);