BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] Plage de dates restreintes avec datepicker
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Sujet fermé[Tuto] Plage de dates restreintes avec datepicker

 Répondre Répondre
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Lien Direct à ce Post Sujet: [Tuto] Plage de dates restreintes avec datepicker
    Envoyé : 08 Feb 2018 à 15:31
Voici comment créer un plage de dates avec un nombre minimum de jours à l'aide de datepicker

Étape 1, donner accès à jQuery UI Datepicker

insérer un bloc de code HTML en position header contenant le code suivant:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Étape 2, champ de saisie de la date du début de la plage

Insérer un champ de saisie de texte à l'endroit désiré sur votre page.

Ajouter les classes CSS: datepicker arrivee

Ajouter la valeur "Arrivée" dans la propriéré "placeholder"




Étape 3, champ de saisie de la date de fin de la plage

Refaites les actions de l'étape 2 mais avec le mot "Départ" dans le "placeholder" et les classes CSS: datepicker depart

Étape 4, ajouter un block de code javascript en position End Body avec le contenu suivant:

// Créer un sélecteur de plage de dates à l'aide de datepicker

// paramètres régionnaux pour l'affichage du calendrier
jQuery(function($){
        $.datepicker.regional['fr'] = {
            monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
            'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
            monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
            'Jul','Aoû','Sep','Oct','Nov','Déc'],
            dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
            dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
            dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
            weekHeader: 'Sm',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
dateFormat: 'dd-mm-yy',
            yearSuffix: ''};
     });

// Mettre en fonction le code
$(function() {

// Application des paramètres régionaux
$.datepicker.setDefaults($.datepicker.regional['fr']);

// Nombre de jours minimum pour la plage de dates
var daysToAdd = 4; // Remplacez le nombre 4 par le nombre de jours minimum pour une plage de jours

// Transformer en date le texte retourné par datepicker et lancer la fonction suivante
function onDateSelected(selectedDate, daysToAdd, otherSelector){
if (!selectedDate) { return; }
var sd = selectedDate.substr(0, 2); // jour selectionné
var sm = selectedDate.substr(3, 2); // mois selectionné
var sy = selectedDate.substr(6, 4); // annee selectionné
onDateSelectedDMY(sd, sm, sy, daysToAdd, otherSelector);
}  

// Application de la restriction
function onDateSelectedDMY(sd, sm, sy, daysToAdd, otherSelector){
var dtMax = new Date(sy, parseInt(sm)-1, sd);
dtMax.setDate(dtMax.getDate() + daysToAdd); 
var dd = dtMax.getDate();
var mm = dtMax.getMonth();
var y = dtMax.getFullYear();
$(otherSelector).datepicker("option", daysToAdd >= 0 ? "minDate" : "maxDate", new Date(y, mm, dd));
}
// Exécution sur sélection de la date d'arrivée
$(".datepicker.arrivee").datepicker({
onSelect: function (selected) {
onDateSelected(selected, daysToAdd, ".datepicker.depart");
}
});
// Exécution sur sélection de la date de départ
$(".datepicker.depart").datepicker({
onSelect: function (selected) {
onDateSelected(selected, -daysToAdd, ".datepicker.arrivee");
}
});
// Restriction due à la date du jour ( on ne peut réserver dans le passé)
var today = new Date();
onDateSelectedDMY(today.getDate(), today.getMonth()+1, today.getFullYear(), 0, '.datepicker.arrivee');
onDateSelectedDMY(today.getDate(), today.getMonth()+1, today.getFullYear(), daysToAdd, '.datepicker.depart');
});

Note: Ce tuto est le fruit du travail de Dmit OE, brolysan et Hobby001




Edité par Hobby001 - 08 Feb 2018 à 19:08
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Actif
Points: 10144
Lien Direct à ce Post Envoyé : 08 Feb 2018 à 16:44
Super tutoriel !!! Clap
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.