Avancer avec bootstrap pdf documentation [Eng]


Télécharger Avancer avec bootstrap pdf documentation [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Avancer avec bootstrap pdf documentation [Eng]

...

4.1 Balisage

Voici des exemples de balisage pris en charge. À eux seuls, ils ne fourniront pas de widget datepicker; vous devrez instancier le datepicker sur le balisage

4.1.1 entrée

Le cas le plus simple: focaliser l'entrée (cliquer ou taper dessus) fera apparaître le sélecteur.

<input type = "text" value = "02-16-2012">

4.1.2 composant

L'ajout de la classe de date à un composant d'amorçage de groupe d'entrée permettra aux éléments d'entrée-groupe-addon de déclencher le sélecteur.

<div class = "date du groupe d'entrée">

<input type = "text" value = "12-02-2012">

<div class = "input-group-addon"> <span class = "glyphicon glyphicon-th" aria-hidden = "true"> </ span> </ div>

</ div>

4.1.3 plage de dates

L'utilisation de la construction input-daterange avec plusieurs entrées enfants instanciera un sélecteur par entrée et les reliera pour permettre la sélection de plages.

<div class = "input-daterange">

<input type = "text" class = "input-small" value = "2012-04-05" />

<span class = "add-on"> à </ span>

<input type = "text" class = "input-small" value = "2012-04-19" />

</ div>

Notez que cette entrée-plage ne met pas en œuvre les méthodes de datepicker. Les méthodes doivent être directement appelées aux entrées. Par exemple:

$ (‘. Input-daterange input’). Each (function () {$ (this) .datepicker («clearDates»);

});

4.1.4 inline ou embedded

Instancier le sélecteur de date sur un simple div donnera un sélecteur intégré qui est toujours visible.

<div data-date = "12/03/2012"> </ div>

Exemple pour enregistrer la valeur Datepicker incorporée dans un champ masqué

<div id = "datepicker" data-date = "12/03/2012"> </ div>

<input type = "hidden" id = "my_hidden_input" />

$ ('# datepicker'). datepicker ();

$ ("# datepicker"). on ("changeDate", function (event) {

$ ("# my_hidden_input"). val (

$ ("# datepicker"). datepicker ('getFormattedDate')

4.1. Balisage 11

)

});

4.2 Options

Toutes les options qui prennent une "Date" peuvent gérer un objet Date; une chaîne formatée selon le format donné; ou un timedelta par rapport à aujourd'hui, par exemple «-1d», «+ 6m + 1y», etc., où les unités valides sont «d» (jour), «w» (semaine), «m» (mois) et «y " (année). Utilisez "0" comme aujourd'hui.

La plupart des options peuvent être fournies via des attributs de données. Une option peut être convertie en un attribut de données en prenant son nom, en remplaçant chaque lettre majuscule par son équivalent en minuscule précédé d'un tiret, et en ajoutant le mot «date-donnée» au début du résultat.

Par exemple, startDate serait data-date-start-date, le format serait data-date-format et daysOfWeekDisabled serait data-date-days-of-week-disabled.

4.2.1 autoclose

Booléen Par défaut: false

S'il faut ou non fermer le sélecteur de date immédiatement lorsqu'une date est sélectionnée.

4.2.2 avantShowDay

Fonction (date). Par défaut: $ .noop

Une fonction qui prend une date en tant que paramètre et renvoie l'une des valeurs suivantes:

  • non défini pour n'avoir aucun effet
  • un booléen indiquant si cette date est sélectionnable ou non
  • Une chaîne représentant des classes CSS supplémentaires à appliquer à la cellule de date.
  • Un objet avec les propriétés suivantes:

- enabled: identique à la valeur booléenne ci-dessus

- classes: identique à la valeur de chaîne ci-dessus

- infobulle: infobulle à appliquer à cette date, via l'attribut HTML title

4.2.3 beforeShowMonth

Fonction (date). Par défaut: $ .noop

Une fonction qui prend une date en tant que paramètre et renvoie un booléen indiquant si ce mois est sélectionnable ou non

4.2.4 avantShowYear

Fonction (date). Par défaut: $ .noop

Une fonction qui prend une date en tant que paramètre et renvoie l'une des valeurs suivantes:

  • non défini pour n'avoir aucun effet
  • un booléen indiquant si cette année est sélectionnable ou non
  • Une chaîne représentant des classes CSS supplémentaires à appliquer à la cellule de l’année.
  • Un objet avec les propriétés suivantes:

- enabled: identique à la valeur booléenne ci-dessus

- classes: identique à la valeur de chaîne ci-dessus

- info-bulle: une info-bulle à appliquer à cette année, via l'attribut HTML title

4.2.5 calendarWeeks

Booléen Par défaut: false

Indiquer ou non les numéros de semaine à gauche de

4.2.9 daysOfWeekDisabled

Chaîne, tableau. Défaut: []

Jours de la semaine qui devraient être désactivés. Les valeurs sont comprises entre 0 (dimanche) et 6 (samedi). Les valeurs multiples doivent être séparées par des virgules.

Exemple: désactivez les week-ends: 06 ou ’0,6’ ou [0,6].

4.2.10 daysOfWeekHighlighted

Chaîne, tableau. Défaut: []

Jours de la semaine qui devraient être mis en évidence. Les valeurs sont comprises entre 0 (dimanche) et 6 (samedi). Plusieurs valeurs doivent être séparées par des virgules. Exemple: mettez en surbrillance les week-ends: 06 ou ’0,6’ ou [0,6].

4.2.11 defaultViewDate

Objet avec clé année, mois et jour. Défaut: aujourd'hui

Date à voir lors de la première ouverture du calendrier. La valeur interne de la date reste aujourd'hui par défaut, mais lorsque le sélecteur de date est ouvert pour la première fois, le calendrier s'ouvre à defaultViewDate plutôt qu'à aujourd'hui. Si cette option n'est pas utilisée, «aujourd'hui» reste la date d'affichage par défaut. Si l'une des clés requises manque à l'objet donné, leurs valeurs par défaut sont les suivantes:

  • année: l'année en cours
  • mois: 1
  • jour: 1

4.2.12 disableTouchKeyboard

Booléen Par défaut: false

Si true, aucun clavier ne s'affichera sur les appareils mobiles

4.2.13 enableOnReadonly

Booléen Par défaut: true

Si elle est fausse le datepicker ne sera pas affiché sur un champ DatePicker en lecture seule.

4.2.14 date de fin

Rendez-vous amoureux. Par défaut: fin du temps

La date la plus récente pouvant être sélectionnée; toutes les dates ultérieures seront désactivées.

<input type = "text" bootstrap-datepicker data-date-fin-date = "0d" />

Désactiveront toutes les dates après aujourd'hui.

4.2.15 forceParse

Booléen Par défaut: true

4.2. Options 15

Indique s'il faut forcer l'analyse de la valeur d'entrée lorsque le sélecteur est fermé. En d’autres termes, lorsqu’une date non valide est laissée dans le champ de saisie par l’utilisateur, le sélecteur analyse de force cette valeur et définit la valeur de l’entrée sur la nouvelle date valide, conforme au format indiqué.

4.2.16 format

Chaîne. Par défaut: “mm / jj / aaaa”

Le format de la date, combinaison de d, jj, j, j, j, m, mm, mm, aa, y

4.2.18 entrées

Tableau. Par défaut: aucun

Une liste des entrées à utiliser dans un sélecteur de gamme, qui sera fixé à l'élément sélectionné. Permet de créer explicitement un sélecteur de plage sur un élément non standard.

<Div class = "formulaire rempli groupe-form-groupe" id = "event_period">

<input type = "text" class = "actual_range">

<input type = "text" class = "actual_range">

</ div>



$ ('# event_period'). datepicker ({

entrées: $ ('. actual_range'). toArray ()

});

4.2.19 keyboardNavigation

Booléen Par défaut: true

Autoriser ou non la navigation par date avec les touches de direction.

4.2.20 langue

Chaîne. Par défaut: "en"

Le code IETF (par exemple "en" pour l'anglais, "pt-BR" pour le portugais brésilien) de la langue à utiliser pour les noms de mois et de jours. Celles-ci seront également utilisées comme valeur d’entrée (et ensuite envoyées au serveur dans le cas des soumissions de formulaire).

Si un code complet (par exemple, «de-DE») est fourni, le sélecteur vérifiera d'abord si la langue est «de-DE» et, s'il n'est pas trouvé, se repliera et recherchera une langue «de». Si un code de langue inconnu est donné, l'anglais sera utilisé. Voir I18N.

4.2. Options 17

4.2.21 maxViewMode

Nombre, chaîne. Valeur par défaut: 2 ans

Définissez une limite maximale pour le mode d'affichage. Accepte: “jours” ou “0”, “mois” ou 1, et “années” ou 2. Donne la possibilité de choisir un jour ou un mois. Le jour est défini au 1er pour «mois» et le mois à Janvier pour «années».

4.2.22 minViewMode

Nombre, chaîne. Par défaut: 0, "jours"

Définissez une limite minimale pour le mode d'affichage. Accepte: “jours” ou 0, “mois” ou 1, et “années” ou 2. Donne la possibilité de choisir un mois ou une année. Le jour est défini au 1er pour «mois» et le mois à Janvier pour «années».

4.2.23 multidates

Booléen, Nombre. Par défaut: false

Activer la sélection multidate. Chaque date dans la vue mensuelle agit comme un bouton bascule, en gardant une trace des dates que l'utilisateur a sélectionnées dans l'ordre. Si un nombre est donné, le sélecteur limitera le nombre de dates pouvant être sélectionnées à ce nombre, en supprimant les dates les plus anciennes de la liste lorsque le nombre est dépassé. true équivaut à aucune limite. La valeur de l’entrée (si présente) est définie sur une chaîne générée en joignant les dates, formatée avec multidateSeparator.

Pour sélectionner 2 dates dans une plage, veuillez consulter la plage de dates.

4.2.24 MultidateSeparator

Chaîne. Défaut: ","

La chaîne qui apparaîtra entre les dates lors de la génération de la valeur de l’entrée. Lors de l’analyse de la valeur de l’entrée d’un sélecteur à états multiples, elle sera également utilisée pour scinder la chaîne entrante afin de séparer plusieurs dates formatées. Par conséquent, il est vivement recommandé de ne pas utiliser une chaîne qui pourrait être une chaîne d’une date formatée (par exemple, utilisez "-" pour séparer les dates lorsque votre format est "aaaa-mm-jj").

4.2.25 orientation

Chaîne. Par défaut: "auto"

Une chaîne séparée par des espaces consistant en un ou deux caractères «gauche» ou «droit», «haut» ou «bas» et «auto» (peut être omis);

par exemple, “en haut à gauche”, “en bas” (l'orientation horizontale sera par défaut sur “auto”), “à droite” (l'orientation verticale sera par défaut sur “auto”), “auto en haut”. Permet un placement fixe du menu contextuel du sélecteur.

"Orientation" désigne l'emplacement de "l'ancre" de la fenêtre de sélection; vous pouvez également le considérer comme l'emplacement de l'élément déclencheur (entrée, composant, etc.) par rapport au sélecteur.

"Auto" déclenche "l'orientation intelligente" du sélecteur. L'orientation horizontale sera par défaut «gauche» et le décalage gauche sera modifié pour que le sélecteur reste dans la fenêtre de visualisation du navigateur. l’orientation verticale choisira simplement “haut” ou “bas”, selon le choix qui affichera le plus de sélecteur dans la fenêtre.

4.2.26 showOnFocus

Booléen Par défaut: true

Si la valeur est false, le sélecteur de date ne pourra pas apparaître lorsque le champ de saisie qui lui est associé reçoit le focus.

4.2.27 date de début

Rendez-vous amoureux. Par défaut: début du temps

La date la plus ancienne pouvant être sélectionnée; toutes les dates antérieures seront désactivées.

4.2. Options 19

4.2.28 startView

Nombre, chaîne. Par défaut: 0, "mois"

La vue que le sélecteur de date doit afficher lorsqu’il est ouvert. Accepte les valeurs 0 ou «mois» pour la vue mensuelle (par défaut), 1 ou «année» pour l'aperçu 12 mois et 2 ou «décennie» pour l'aperçu 10 ans. Utile pour les datepickers date-de-naissance.

Titre 4.2.29

Chaîne. Défaut: ""

La chaîne qui apparaîtra en haut du sélecteur de date. Si vide, le titre sera caché.

4.2.30 aujourd'huiBtn

Booléen, “lié”. Par défaut: false

Si vrai ou «lié», affiche un bouton «Aujourd'hui» au bas du sélecteur de date pour sélectionner la date actuelle. Si vrai, le

Le bouton «Aujourd'hui» ne fera que déplacer la date actuelle dans la vue; si «lié», la date du jour sera également sélectionnée.

4.2.31 todayHighlight

Booléen Par défaut: false

Si vrai, met en surbrillance la date actuelle.

4.2.32 toggleActive

Booléen Par défaut: false

Si la valeur est true, la sélection de la date actuellement active dans le sélecteur de date annule la date correspondante. Cette option est toujours vraie lorsque l'option multidates est utilisée.

4.2.33 WeekStart

Entier. Par défaut: 0

Jour de la semaine commence. 0 (dimanche) à 6 (samedi)

4.2. Options 21

4.2.34 zIndexOffset

Entier. Défaut: 10

Le z-index CSS du datepicker ouvert est le z-index maximal de l’entrée et de tous ses ancêtres DOM, plus le

zIndexOffset.

4.3 Méthodes

Les méthodes sont appelées sur un sélecteur de date en appelant la fonction datepicker avec un premier argument de chaîne, suivi de tout argument pris par la méthode:

$ ('. datepicker'). datepicker ('méthode', arg1, arg2);

4.3.1 supprimer

Arguments: aucun

Retirez le sélecteur de date. Supprime les événements attachés, les objets attachés internes et les éléments HTML ajoutés.

4.3.2 spectacle

Arguments: aucun

Montrer le sélecteur.

4.3.3 masquer

Arguments: aucun

Cache le sélecteur.

4.3.4 mise à jour

Arguments:

  • date (String | Date, facultatif)

Mettez à jour le sélecteur de date avec l'argument donné ou la valeur d'entrée actuelle.

Si date est fourni et est un objet Date, il est supposé être un objet Date «local» et sera converti en UTC pour un usage interne.

$ ('. datepicker'). datepicker ('update');

$ ('. datepicker'). datepicker ('update', '2011-03-05');

$ ('. datepicker'). datepicker ('update', nouvelle date (2011, 2, 5));

Pour réinitialiser le sélecteur de date et effacer la date sélectionnée, transmettez une chaîne vide avec update:

$ ('. datepicker'). datepicker ('update', '');

4.3.5 setDate

Arguments:

  • date (date)

Définit la date interne. date est supposé être un objet de date «local» et sera converti en UTC pour un usage interne.

4.3.6 setUTCDate

Arguments:

  • date (date)

Définit la date interne. date est supposé être un objet de date UTC et ne sera pas converti.

4.3.7 setDates

Arguments:

  • date [, date [, ...]] (date)

ou

  • [date [, date [, ...]]] (tableau)

Définit la liste de dates interne; accepte plusieurs dates ou un seul tableau de dates comme arguments. Chaque date est supposée être un objet de date «local» et sera convertie en UTC pour un usage interne. À utiliser avec les sélecteurs multidates.

4.3.8 clearDates

Arguments: aucun

Effacer les dates.

4.3.9 setUTCDates



Arguments:

  • date [, date [, ...]] (date)

ou

  • [date [, date [, ...]]] (tableau)

Définit la liste de dates interne. Chaque date est supposée être un objet de date UTC et ne sera pas convertie. À utiliser avec les sélecteurs multidates.

4.3.10 getDate

Arguments: aucun

Renvoie un objet de date localisé représentant l'objet de date interne du premier datepicker de la sélection. Pour les sélecteurs multidates, renvoie la dernière date sélectionnée.

4.3. Méthodes 23

4.3.11 getUTCDate

Arguments: aucun

Renvoie l'objet de date UTC interne, tel quel et non converti en heure locale, du premier datepicker de la sélection. Pour les sélecteurs multidates, renvoie la dernière date sélectionnée.

4.3.12 getDates

Arguments: aucun

Retourne une liste d'objets date localisés représentant les objets date internes du premier datpicker de la sélection. À utiliser avec les sélecteurs multidates.

4.3.13 getUTCDates

Arguments: aucun

Renvoie la liste interne des objets de date UTC, tels qu'ils sont et non convertis en heure locale, du premier datepicker de la sélection. À utiliser avec les sélecteurs multidates.

4.3.14 setStartDate

Arguments:

  • date de début (date)

Définit une nouvelle date limite inférieure pour le sélecteur de date. Voir showOnFocus pour les valeurs valides.

Omettez startDate (ou fournissez une valeur sinon falsey) pour annuler la limite.

4.3.15 setEndDate

Arguments:

  • endDate (Date)

Définit une nouvelle limite de date supérieure sur le sélecteur de date. Voir disableTouchKeyboard pour les valeurs valides.

Omettez endDate (ou indiquez une valeur falsey sinon) pour désactiver la limite.

4.3.16 setDatesDisabled

Arguments:

  • datesDisabled (String | Array)

Définit les jours devant être désactivés. Voir defaultViewDate pour les valeurs valides.

Omettez datesDisabled (ou fournissez une valeur sinon falsey) pour annuler la définition des jours désactivés.

4.3.17 setDaysOfWeekDisabled

Arguments:

  • daysOfWeekDisabled (String | Array)

Définit les jours de la semaine à désactiver. Voir datesDisabled pour les valeurs valides.

Omettre daysOfWeekDisabled (ou fournir une valeur Falsey sinon) pour annuler la définition des jours désactivés.

4.4 Événements

Datepicker déclenche un certain nombre d'événements dans certaines circonstances. Tous les événements ont des données supplémentaires attachées à l'objet d'événement qui sont transmises à tous les gestionnaires d'événements:

$ ('. datepicker'). datepicker ()

.on (picker_event, function (e) {

# `e` contient ici les attributs supplémentaires

});

  • date: l'objet Date pertinent, dans le fuseau horaire local. Pour un sélecteur à plusieurs états, ce sera la dernière date choisie.
  • dates: un tableau d'objets Date, dans le fuseau horaire local, lorsque vous utilisez un sélecteur à plusieurs états.
  • format ([ix], [format]): une fonction facilitant le formatage de la date. ix peut être l'index d'une Date dans le tableau de dates à formater; en cas d'absence, la dernière date sélectionnée sera utilisée. Le format peut être n’importe quelle chaîne de format prise en charge par datepicker; s'il est absent, le format défini sur le sélecteur de date sera utilisé. Les deux arguments sont optionnels.

4.4.1 spectacle

Déclenché lorsque le sélecteur de date est affiché.

4.4.2 cacher

Renvoyé lorsque le sélecteur de date est masqué.

4.4.3 clearDate

Se déclenche lorsque la date est effacée, normalement lorsque vous appuyez sur le bouton «Effacer» (activé avec l’option clearBtn).

4.4.4 changeDate

Renvoyé lorsque la date est changée.

4.4.5 changeYear

Renvoyé lorsque l'année d'affichage est modifiée par rapport à l'affichage de la décennie.

4.4.6 changementMois

Déclenché lorsque le mois de la vue est modifié depuis la vue de l'année.

4.4. Événements 25

4.5 Prise en charge du clavier

Le datepicker inclut la navigation au clavier. La «date focalisée» est conservée et mise en surbrillance (comme avec le survol de la souris) lors de la navigation au clavier, et est effacée lorsqu'une date est basculée ou que le sélecteur est masqué.

4.5.1 flèches haut, bas, gauche, droite

Par eux-mêmes, gauche / droite déplacera la mise au point en arrière / en avant un jour, le haut / bas en déplacera la mise au point en arrière / une semaine.

Avec la touche Shift, haut / gauche déplace la mise au point d'un mois vers l'arrière, alors que vers le bas / droite déplace la mise au point d'un mois.

Avec la touche Ctrl, haut / gauche déplacera le focus d'une année à l'autre, bas / droite fera avancer le focus d'une année.

Maj + Ctrl se comporte de la même manière que Ctrl - en d’autres termes, il ne change pas simultanément le mois et l’année, mais uniquement l’année.

4.5.2 entrer

Lorsque le sélecteur est visible, entrez pour basculer la date sélectionnée (s’il en existe une). Lorsque le sélecteur n'est pas visible, entrez aura des effets normaux - soumission du formulaire actuel, etc.

Lorsque la date est désélectionnée, l'événement clearDate est déclenché; sinon, l'événement changeDate est déclenché. Si la fermeture automatique est activée, le sélecteur sera masqué après la sélection ou la désélection.

4.5.3 échapper

La touche Échap peut être utilisée pour effacer la date sélectionnée et pour masquer et afficher à nouveau le sélecteur de date. masquer le sélecteur est nécessaire si l'utilisateur souhaite modifier manuellement la valeur.

4.6 I18N

Le plugin prend en charge i18n pour les noms de mois et de jour de semaine et pour l’option weekStart. Le défaut est l'anglais

(“En”); les autres traductions disponibles sont disponibles dans le répertoire js / locales /, indiquez simplement les paramètres régionaux de votre choix après le plugin. Pour ajouter plus de langues, ajoutez simplement une clé à $ .fn.datepicker.dates, avant d'appeler

.sélecteur de date(). Exemple:

$ .fn.datepicker.dates ['en'] = {

jours: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],

daysShort: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],

daysMin: ["Su", "Mo", "Tu", "Nous", "Th", "Fr", "Sa"],

mois: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ],

monthsShort: ["Jan", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Oct", "Novembre", "Décembre" ],

aujourd'hui: "aujourd'hui",

clair: "clair",

format: "mm / jj / aaaa",

titleFormat: "MM aaaa", / * Utilise la même syntaxe que "format" * /

weekStart: 0

};

Les langues de droite à gauche peuvent également inclure rtl: true pour que le calendrier s'affiche correctement.

Si votre navigateur (ou ceux de vos utilisateurs) affiche des caractères incorrects, il est probable que le navigateur charge le fichier javascript avec un codage non-unicode. Ajoutez simplement charset = "UTF-8" à votre balise de script:



132