Latest web development tutorials

API jQuery UI - le membre du sélecteur de date (Datepicker Widget)

catégorie

Widgets (Widgets)

usage

Description: Dans la boîte de pop-up ou un calendrier en ligne pour sélectionner une date.

Nouvelle Version: 1.0

jQuery UI date de sélecteur (Datepicker) Sélectionnez la date à ajouter de la hauteur à la page pour configurer le plug-in. Vous pouvez personnaliser le format de la date et de la langue, de restreindre la plage de dates sélectionnables, ajouter des boutons et d'autres options de navigation.

Par défaut, lorsque le focus du champ de texte associé, dans une petite superposition date d'ouverture sélecteur. Pour un calendrier en ligne, il suffit de sélectionner la date est fixée à la div ou la durée.

Clavier interaction

Lorsque le sélecteur de date est ouverte, les commandes clavier suivantes sont disponibles:

  • PAGE UP: passer au mois précédent.
  • PAGE SUIVANTE: Déplacer vers le mois prochain.
  • CTRL + PAGE UP: Déplacer l'année précédente.
  • CTRL + PAGE DOWN: Déplacer à l'année prochaine.
  • CTRL + HOME: Déplacer le mois en cours. Si le sélecteur de date est fermé est ouvert.
  • CTRL + GAUCHE: passage à la journée.
  • CTRL + DROITE: déplacer le lendemain.
  • CTRL + UP: passage à la semaine précédente.
  • CTRL + BAS: Déplacer vers la semaine prochaine.
  • ENTRER: Sélectionnez la date de mise au point.
  • CTRL + END: Fermer sélecteur de date, et effacer la date.
  • ESCAPE: Fermer sélecteur de date, sans aucun choix.

Caractéristiques utiles

$ .datepicker.setDefaults (Paramètres)

Modifiez les paramètres par défaut pour tous les sélecteur de date.

Utilisez l' option() méthode pour modifier les paramètres de cas individuels.

Les exemples de code:

Réglez tout le sélecteur de date ou cliquez sur l'icône ouvre lorsque le focus.

$ .datepicker.setDefaults ({
  showOn: «les deux»,
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendrier"
});

Réglez tous sélecteur de date a le texte français.

$ .datepicker.setDefaults (.datepicker.regional $ [ "Fr"]);

$ .datepicker.formatDate (Format, date, réglages)

Formatage d'une date à une valeur de chaîne avec le format spécifié.

Format peut être les combinaisons suivantes:

  • d - jour du mois (aucun des zéros à gauche)
  • dd - jour du mois (deux chiffres)
  • o - le jour de l'année (sans zéro)
  • oo - le jour de l'année (trois chiffres)
  • Nom court jour - D
  • Nom Longue journée - DD
  • m - les premiers mois de l'année (sans zéro)
  • mm - les premiers mois de l'année (deux chiffres)
  • Nom court du mois - M
  • Mois nom long - MM
  • y - Année (deux chiffres)
  • yy - Année (quatre chiffres)
  • @ - Unix timestamp (ms depuis 01/01/1970)
  • ! - De Windows Watch (100ns depuis 01/01/0001)
  • '...' - Texte
  • '' - Apostrophes
  • Autres - texte

Il y a aussi quelques $.datepicker format de date standard prédéfini:

  • ATOM - 'yy-mm-dd' (et RFC 3339 / même ISO 8601)
  • COOKIE - 'D, dd M yy'
  • ISO_8601 - 'yy-mm-dd'
  • RFC_822 - 'D, d M y' (voir RFC 822)
  • RFC_850 - 'DD, dd-Ma' (voir RFC 850)
  • RFC_1036 - 'D, d M y' (voir RFC 1036)
  • RFC_1123 - 'D, d M yy' (voir RFC 1123)
  • RFC_2822 - 'D, d M yy' (voir RFC 2822)
  • RSS - 'D, J M' (identique à la RFC 822)
  • TICKS - '!'
  • TIMESTAMP - '@'
  • W3C - 'yy-mm-dd' (le même que ISO 8601)
Les exemples de code:

format ISO pour afficher la date. Produire «2007-01-26».

$ .datepicker.formatDate ( "Yy-mm-dd", new Date (2007, 1 - 1, 26));

Français pour étendre le format d'affichage de la date. Produire "Samedi, Juillet 14, 2007".

$ .datepicker.formatDate ( "DD, MM d, yy", new Date (2007, 7 - 1, 14), {
  dayNamesShort: .datepicker.regional $ [ "fr"] .dayNamesShort,
  dayNames: .datepicker.regional [ "fr"] .dayNames $,
  monthNamesShort: .datepicker.regional $ [ "fr"] .monthNamesShort,
  MonthNames: .datepicker.regional $ [ "fr"] .monthNames
});

$ .datepicker.parseDate (Format, valeur, paramètres)

Extraire une valeur de chaîne à partir d'un format de date spécifié.

Format peut être les combinaisons suivantes:

  • d - jour du mois (aucun des zéros à gauche)
  • dd - jour du mois (deux chiffres)
  • o - le jour de l'année (sans zéro)
  • oo - le jour de l'année (trois chiffres)
  • D - nom court de la semaine
  • DD - semaine nommer que quelques-uns à long
  • m - les premiers mois de l'année (sans zéro)
  • mm - les premiers mois de l'année (deux chiffres)
  • Nom court du mois - M
  • Mois nom long - MM
  • y - Année (deux chiffres)
  • yy - Année (quatre chiffres)
  • @ - Unix timestamp (ms depuis 01/01/1970)
  • ! - De Windows Watch (100ns depuis 01/01/0001)
  • '...' - Texte
  • '' - Apostrophes
  • Autres - texte

Certaines exceptions peuvent être jetés:

  • «Les arguments non valides» - ou si le format est null Cette exception est levée.
  • «Numéro manquant à la position nn '- si le format pour afficher une valeur non trouvée Cette exception est levée.
  • «Nom inconnu à la position nn '- si le format ne se trouve pas quelques semaines ou noms de mois noms Cette exception est levée.
  • «Unexpected littérale à la position nn '- si la valeur d'un format de texte non trouvé Cette exception est levée.
  • 'Date non valide "- la date est pas valable si cette exception est levée, comme '31 / 02/2007'.
Les exemples de code:

Extraire une date au format ISO.

$ .datepicker.parseDate ( "Yy-mm-dd", "2007-01-26");

Extraction d'un format de date que l'étendue française.

$ .datepicker.parseDate ( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
  shortYearCuroff: 20,
  dayNamesShort: .datepicker.regional $ [ "fr"] .dayNamesShort,
  dayNames: .datepicker.regional [ "fr"] .dayNames $,
  monthNamesShort: .datepicker.regional $ [ "fr"] .monthNamesShort,
  MonthNames: .datepicker.regional $ [ "fr"] .monthNames
});

$ .datepicker.iso8601Week (Date)

Déterminer une date donnée des premières semaines de l'année: 1-53.

Cette fonction utilise la définition ISO 8601 d'une semaine: une semaine à partir de lundi, la première semaine de chaque année contient 4ème Janvier. Cela signifie que l'année précédente peut inclure jusqu'à trois jours dans la première semaine de l'année, l'année peut contenir jusqu'à trois jours dans la dernière semaine de l'année précédente.

Cette fonction est calculateWeek implémentation par défaut.

Les exemples de code:

Trouvez la date des premières semaines de l'année.

$ .datepicker.iso8601Week (Nouvelle date (2007, 1 - 1, 26));

$ .datepicker.noWeekends

Réglage de cette fonction de beforeShowDay, ce qui empêche la sélection du week-end.

Nous pouvons beforeShowDay fournir des options noWeekends() fonction permet de calculer tous travaillant pour fournir un true / false Tableau des valeurs utilisées pour indiquer la date est sélectionnable.

Les exemples de code:

Réglez DatePicker, laissez le week-end en option.

$ ( "#datepicker") .datepicker ({
  beforeShowDay: $ .datepicker.noWeekends
});

limite

Le sélecteur de date prévue pour répondre aux différentes langues et formats de date pris en charge par un contenu localisé. Chaque code de langue localisée contenue dans le joint après le nom du fichier, par exemple, le français est jquery.ui.datepicker-fr.js . les fichiers de localisation obligatoires doivent être inclus dans le dos du code date de sélection principale. Chaque fichiers localisés à ajouter à son propre ensemble de disponible ensemble de localisation, toutes les instances appliquent automatiquement ces paramètres pour les paramètres par défaut.

$.datepicker.regional Propriété contient un tableau de localisée au code de la langue en tant que pré, pré-défaut est "" , exprimé en anglais. Chaque entrée est un objet avec les propriétés suivantes: closeText , prevText , nextText , currentText , monthNames , monthNamesShort , dayNames , dayNamesShort , dayNamesMin , weekHeader , dateFormat , firstDay , isRTL , showMonthAfterYear et yearSuffix .

Vous pouvez restaurer le code de localisation par défaut ci-dessous:

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );

Vous pouvez remplacer le sélecteur de date à un endroit précis en suivant les codes:

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

theming

membre Date de sélecteur (Datepicker Widget) en utilisant framework jQuery UI CSS pour définir l'aspect et la convivialité de son style. Si vous avez besoin d'utiliser la date de style sélecteur spécifié, vous pouvez utiliser le nom de la classe CSS suivante:

  • ui-datepicker : sélecteur de date conteneur extérieur. Si le sélecteur de date est en ligne, les éléments sont en outre fourni avec un ui-datepicker-inline en ui-datepicker-inline , classe. Si les isRTL des options, cet élément sera en outre avec un ui-datepicker-rtl , classe.
    • ui-datepicker-header : sélecteur de date conteneur de tête.
      • ui-datepicker-prev : le contrôle est utilisé pour sélectionner le mois précédent.
      • ui-datepicker-next : le contrôle est utilisé pour sélectionner le mois prochain.
      • ui-datepicker-title : date titre picker contient le mois et l' année de conteneur.
        • ui-datepicker-month : mois d'affichage de texte, si vous définissez changeMonth option <select> élément.
        • ui-datepicker-year : texte à l'écran, si vous définissez changeYear option <select> élément.
    • ui-datepicker-calendar : contient la forme de calendrier.
      • ui-datepicker-week-end : cellules de fin de semaine. : Les cellules contenant jours de week-end.
      • ui-datepicker-other-month : dans un mois, mais pas le mois en cours le nombre de jours , les cellules.
      • ui-datepicker-unselectable : l'utilisateur ne peut pas sélectionner la cellule.
      • ui-datepicker-current-day : selected Date de cellule.
      • ui-datepicker-today : Date cellule d'aujourd'hui.
    • ui-datepicker-buttonpane : Lors de la configuration showButtonPanel utilisent le panneau de bouton (buttonpane) lorsque l'option.
      • ui-datepicker-current : sélectionner le bouton pour la date d'aujourd'hui.

Si numberOfMonths option pour afficher plusieurs mois, utilisez une classe supplémentaire:

  • ui-datepicker-multi : mois pièces Date picker de la couche la plus externe du récipient. Cet élément sera affiché en fonction du nombre de mois avec supplémentaire ui-datepicker-multi-2 , ui-datepicker-multi-3 ou ui-datepicker-multi-4 , nom de classe.
    • ui-datepicker-group : regroupement au sein d' un seul sélecteur. Cet élément en fonction de sa position dans le paquet avec plus ui-datepicker-group-first , ui-datepicker-group-middle ou ui-datepicker-group-last , le nom de la classe.

Fiez

informations complémentaires

  • La partie exige une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.
  • Les composants à manipuler par programme la valeur de l'élément, de sorte que lorsque la valeur de l'élément change ne déclenchent pas les natifs change événements.
  • Il ne supporte pas <input type="date"> Créer un sélecteur de date, car il provoque un conflit avec le sélecteur de l' interface utilisateur locale.

Exemples

Un sélecteur de date simple, jQuery UI (Datepicker).

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> membre sélecteur de date (Datepicker Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div id = "datepicker"> </ div>
 
<Script>
$ ( "#datepicker") .datepicker ();
</ Script>
 
</ Body>
</ Html>

la