La configuration des plages de sélection dans un calendrier Element UI repose sur la propriété picker-options. Cette option permet de transmettre un objet cotnenant une méthode de filtrage qui évalue chaque date affichée par le composant. L'implémentation techniuqe varie selon qu'un seul champ ou une paire de champs doit être validée.

Gestion d'un sélecteur unique

La structure du template pour un champ indépendant reste standard :

<el-date-picker
       v-model="dateSelectionnee"
       type="date"
       placeholder="Sélectionner une date"
       :picker-options="optionsCalendrier">
   </el-date-picker>

Les règles de restriction sont définies dans la méthode disabledDate. Cette fonction reçoit un objet Date et retourne un booléen indiquant si la date doit être désactivée.

1. Validation uniquement à partir du jour présent

data() {
  return {
    optionsCalendrier: {
      disabledDate(timestamp) {
        const debutJour = new Date().setHours(0, 0, 0, 0);
        return timestamp.getTime() < debutJour;
      }
    }
  };
}

2. Validation uniquement jusqu'au jour présent

data() {
  return {
    optionsCalendrier: {
      disabledDate(timestamp) {
        const finJour = new Date().setHours(23, 59, 59, 999);
        return timestamp.getTime() > finJour;
      }
    }
  };
}

3. Exclusion stricte du jour courant (futur uniquement)

data() {
  return {
    optionsCalendrier: {
      disabledDate(timestamp) {
        return timestamp.getTime() <= Date.now();
      }
    }
  };
}

4. Exclusion stricte du jour courant (passé uniquement)

data() {
  return {
    optionsCalendrier: {
      disabledDate(timestamp) {
        return timestamp.getTime() >= Date.now();
      }
    }
  };
}

5. Fenêtre glissante sur les 90 derniers jours

data() {
  return {
    optionsCalendrier: {
      disabledDate(timestamp) {
        const instantActuel = Date.now();
        const millisecondesQuatreVingtDixJours = 90 * 24 * 60 * 60 * 1000;
        const borneInferieure = instantActuel - millisecondesQuatreVingtDixJours;
        return timestamp.getTime() > instantActuel || timestamp.getTime() < borneInferieure;
      }
    }
  };
}

Synchronisation de deux sélecterus

Lors de l'utilisation de deux champs distincts, chaque composant doit consulter l'état de l'autre via le modèle de données Vue. Voici la configuration du template :

<el-date-picker
       v-model="dateDepart"
       type="date"
       placeholder="Date de début"
       :picker-options="contraintesDepart">
   </el-date-picker>
   <el-date-picker
       v-model="dateFin"
       type="date"
       placeholder="Date de fin"
       :picker-options="contraintesFin">
   </el-date-picker>

La logique de verrouillage croisé s'implémente en comparant les timestamps des deux champs :

data() {
  return {
    contraintesDepart: {
      disabledDate: (timestamp) => {
        const limiteActuelle = Date.now();
        if (this.dateFin) {
          return timestamp.getTime() > limiteActuelle || timestamp.getTime() > this.dateFin.getTime();
        }
        return timestamp.getTime() > limiteActuelle;
      }
    },
    contraintesFin: {
      disabledDate: (timestamp) => {
        const limiteActuelle = Date.now();
        if (this.dateDebut) {
          return timestamp.getTime() < this.dateDebut.getTime() || timestamp.getTime() > limiteActuelle;
        }
        return timestamp.getTime() > limiteActuelle;
      }
    }
  };
}

Pour les plages intégrées via type="daterange", la même approche s'applique directement sur le paramètre d'évaluation, en traitant chaque extrémité du tableau de sélection selon les bornes métier.