Lightpick Sélecteur de plage de dates en Javascript – léger, sans jQuery

# Configuration

field

  • Type : Element
  • Défaut : null

Lier le datepicker à un champ de formulaire

secondField

  • Type : Element
  • Défaut : null

Si elle existe, la fin de la plage de dates sera définie ici.

firstDay

  • Type : Number
  • Par défaut : 1

Jour de la semaine ISO (1 : lundi, …, 7 : dimanche).

parentEl

  • Type : String
  • Par défaut : body

Sélecteur de l’élément parent auquel le sélecteur de plage de dates sera ajouté, s’il n’est pas fourni, ce sera ‘body’.

lang

  • Type : String
  • Défaut : auto

Code de langue pour les noms des jours, des mois par Date.prototype.toLocaleString(). ‘auto’ essaiera de détecter la langue du navigateur de l’utilisateur.

format

  • Type : String
  • Défaut : DD/MM/YYYY

Le format de sortie par défaut.

separator

  • Type : String
  • Par défaut : -

Séparateur entre les dates quand un seul champ.

numberOfMonths

  • Type : Number
  • Défaut : 1

Nombre de mois visibles.

numberOfColumns

  • Type : Number
  • Par défaut : 2

Nombre de colonnes mois.

singleDate

  • Type : Boolean
  • Par défaut : true

Choisir une date unique au lieu d’une plage de dates.

autoclose

  • Type : Boolean
  • Par défaut : true

Fermeture du calendrier lorsque la date/plage choisie.

hideOnBodyClick

  • Type : Boolean
  • Défaut : true

Fermeture du calendrier en cas de clic en dehors des éléments spécifiés dans field ou parentEl. Utilisation recommandée lorsque autoclose est défini à false.

repick

  • Type : Boolean
  • Défaut : false

Reprendre le début/la fin au lieu de la nouvelle plage. Cette option ne fonctionne que lorsqu’il existe `secondField`.

minDate

  • Type : moment|String|Number|Date
  • Défaut : null

La date minimale/la plus ancienne qui peut être sélectionnée. Tout format : moment() ou ‘2018-06-01’ ou 1527811200000, nouvelle Date()

maxDate

  • Type : moment|String|Number|Date
  • Défaut : null

La date maximale/dernière qui peut être sélectionnée. Tout format : moment() ou ‘2018-06-01’ ou 1527811200000, nouvelle Date()

disableDates

  • Type : Array
  • Défaut : null

Réseau de dates désactivées. Le tableau peut contenir des plages, autorisées au même format que dans les options minDate, maxDate.
Ex. : ]

selectForward

  • Type : Boolean
  • Par défaut : false

Sélectionner la deuxième date après la première date sélectionnée.

selectBackward

  • Type : Boolean
  • Par défaut : false

Sélectionner la deuxième date avant la première date sélectionnée.

minDays

  • Type : Number
  • Défaut : null

Les jours minimum de la plage sélectionnée.

maxDays

  • Type : Number
  • Défaut : null

Les jours maximum de la plage sélectionnée.

hoveringTooltip

  • Type : Boolean
  • Par défaut : true

Afficher l’infobulle.

footer

  • Type : Boolean|String
  • Défaut : false

Calendrier de pied de page, si défini à `true`, utilisera le pied de page par défaut (boutons Réinitialiser/Appliquer) ou la chaîne personnalisée (html).

disabledDatesInRange

  • Type : Boolean
  • Défaut : true

Si elle est définie à `false`, alors elle réinitialisera la plage sélectionnée lorsque des dates désactivées existent dans la plage sélectionnée.

tooltipNights

  • Type : Boolean
  • Défaut : false

Période de calcul de la date en nuits. (Pour les hôtels où la dernière date ne comprend pas de plage)

orientation

  • Type : String
  • Par défaut : auto

Chaîne de caractères séparée par des espaces et constituée d’un ou deux éléments parmi “left” ou “right”, “top” ou “bottom” et “auto” (peut être omis) ; par exemple, “top left”, “bottom” (l’orientation horizontale sera par défaut “auto”), “right” (l’orientation verticale sera par défaut “auto”), “auto top”.

disableWeekends

  • Type : Boolean
  • Par défaut : false

Désactiver le samedi et le dimanche.

inline

  • Type : Boolean
  • Par défaut : false

Montrer le calendrier en ligne. Si true et parentEl n’est pas fourni alors utilisera parentNode du champ.

dropdowns

  • Type : Object|Boolean
  • Par défaut :
    {
    years: {
    min: 1900,
    max: null,
    },
    months: true,
    }

Sélections déroulantes pour les années, les mois. Peut être false pour désactiver les deux dropdowns.
years (Objet|Booléen) – L’objet doit contenir min et max plage d’années ou peut être false pour désactiver la liste déroulante des années.
months (Booléen) – true/false pour activer/désactiver la liste déroulante des mois.

locale

  • Type : Object
  • Par défaut :
    {
    buttons: {
    prev: '←',
    next: '→',
    close: '×',
    reset: 'Reset',
    apply: 'Apply'
    },
    tooltip: {
    one: 'day',
    other: 'days'
    },
    tooltipOnDisabled: null,
    pluralize: function(i, locale){
    if (typeof i === "string") i = parseInt(i, 10);
    if (i === 1 && 'one' in locale) return locale.one;
    if ('other' in locale) return locale.other;
    return '';
    }
    }

buttons – Texte pour les boutons

tooltip – Texte pour l’infobulle (un, quelques, plusieurs, autre)

tooltipOnDisabled (String) – Afficher le texte de l’infobulle sur les dates désactivées. (Par exemple, “Déjà réservé”)

pluralize (function) – Fonction pour calculer le texte pluriel. Plus d’exemples pour d’autres locales sur betsol/numerous

onSelect

  • Type : Function
  • Défaut : null

Fonction de rappel pour lorsqu’une date est sélectionnée.

onOpen

  • Type : Function
  • Défaut : null

Fonction de rappel pour lorsque le sélecteur devient visible.

onClose

  • Type : Function
  • Défaut : null

Fonction de rappel pour lorsque le sélecteur est caché.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.