Je veux permettre à l'utilisateur de sélectionner les dates de début et de fin sur le calendrier. J'utilise des dates de réaction pour cela.

Je veux que ça marche comme ci-dessous

Initialement les dates de début et de fin seront nulles. au premier clic lorsque l'utilisateur sélectionne la date de début, par exemple le 10 octobre, la date de fin est également définie sur la date de début (10 octobre) et les dates avant la date de début le 10 octobre et les dates après 6 semaines à partir de la date de début sont désactivées pour la sélection maintenant lorsque l'utilisateur sélectionne la date de fin, par exemple le 13 octobre la date de fin est fixée au 13 oct et les dates qui ont été désactivées seront activées après la sélection de la date de fin.

Maintenant, lorsque l'utilisateur clique sur le 15 octobre, cette date est définie comme date de début n date de fin et les dates avant la date de début 15 octobre et les dates après 6 semaines à compter de la date de début sont désactivées pour la sélection lorsque l'utilisateur clique sur le 17 octobre comme date de fin définie comme date de fin et les dates qui ont été désactivées seront activées après la sélection de la date de fin. les travaux mentionnés ci-dessus. mais l'utilisateur fait ce qui suit, cela ne fonctionne pas comme prévu et j'ai besoin d'un correctif pour cela. L'utilisateur a la date de début fixée au 15 octobre et la date de fin fixée au 17 octobre sélectionne désormais la date de début le 13 octobre.

attendu : à ce stade, je m'attends à ce qu'il définisse les dates de début et de fin au 13 octobre et que les dates de désactivation avant le 13 octobre et les dates après 6 semaines à partir du 13 octobre soient également désactivées et attend que l'utilisateur saisisse la date de fin .

résultat , mais il définit le 13 oct comme date de début et le 17 oct comme date de fin.

en gros, lorsque l'utilisateur a défini des dates de début et de fin et sélectionne une date avant la date de début, la date de fin doit être définie sur la nouvelle date de début et les dates avant la nouvelle date de début et les dates après 6 semaines à compter de la nouvelle date de début doivent être désactivées. et l'utilisateur qui clique sur une autre date après la date de début doit être défini comme date de fin.

Ci-dessous est l'exemple de travail de mon code

https://codesandbox.io/s/react-dates-forked-skrj2?file=/src/index.js

Quelqu'un pourrait-il m'aider avec cela. Merci.

1
saritha 3 sept. 2020 à 16:08

2 réponses

Meilleure réponse

Je pense que vous pouvez le faire simplement en utilisant useEffect. Vous avez besoin de deux choses pour cela:

  1. Première valeur de la date de début du suivi si la valeur a changé depuis le début, cela signifie que vous avez sélectionné à nouveau la date de début pour laquelle vous pouvez créer un hook précédent personnalisé:
  // The ref object is a generic container whose current property is mutable ...
  // ... and can hold any value, similar to an instance property on a class
  const ref = useRef();
  
  // Store current value in ref
  useEffect(() => {
    ref.current = value;
  }, [value]); // Only re-run if value changes
  
  // Return previous value (happens before update in useEffect above)
  return ref.current;
}

  1. Maintenant, comparez si prevDate n'est pas égal à la nouvelle date de début, cela signifie que la valeur a changé. Mettre à jour la date de fin. Pour cela, vous avez besoin de React.useEffect
const prevDate = usePrevious(startDate);

  React.useEffect(() => {
    if (prevDate && !moment(prevDate).isSame(startDate)) {
      setEndDate(startDate);
    }
  }, [startDate, endDate, prevDate]);

Vous pouvez trouver la démo ici: https : //codesandbox.io/s/react-dates-forked-xz0pk? file = / src / index.js: 2469-2668

0
Shubham Verma 3 sept. 2020 à 14:16

Si je comprends bien ce que vous voulez, vous avez essentiellement deux conditions:

  1. Les deux startDate et endDate ont été définis et sont égaux. Dans ce cas, vous savez que vous n'avez vraiment sélectionné qu'un startDate et que vous devez imposer une limite aux plages disponibles. Lorsqu'une date valide est sélectionnée, ne définissez que le endDate
  2. Tous les autres cas. Ici, vous devez définir startDate et endDate sur la même valeur et n'imposer aucune limite. Cela couvre à la fois la condition initiale (les deux sont null) et le cas où vous avez explicitement défini un endDate séparé.

Voici un exemple de la façon dont vous pourriez implémenter ceci: https://codesandbox.io/s/react -dates-forked-9rj7q? file = / src / index.js

0
rfestag 3 sept. 2020 à 14:09