11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Validation en JavaScript d'un input[type="date"] sur iPhone

Bonjour,

J'ai créé une petite PWA pour moi et mes collègues infirmiers et ASH. Au début c'est partit comme une blague et puis je me suis pris au jeu... et voilà : planning

Ca fonctionne très bien... sauf sous iPhone : au moment de configurer un calendrier j'ai une alerte qui ne devrait pas se lancer dans tous les cas de figure (github) :
// Gestionnaire d'événement pour la date de début
startDateInput.addEventListener('change', function () {
  const selectedDate = new Date(this.value)
  const day = selectedDate.getDay()

  if (day !== 1) {
    alert('Veuillez sélectionner un lundi.')
    this.value = ''
  } else {
    localStorage.setItem('startDate', this.value)
  }
})

La condition du script a pour fonction de filtrer l'entrée à un lundi obligatoirement, cependant le message sort sur iPhone même lorsque les conditions d'usage sont respectées. J'imagine un problème de format de l'input de type date sous Mac OS qui, du coup, ne correspondrait jamais au format attendu par le script, mais je n'ai rien pour tester...

Qu'en pensez-vous ? Et surtout comment remédier au problème ?
Modifié par Olivier C (24 Nov 2024 - 13:46)
Déjà je vais faire ça, ça devrait déjà régler mon premier problème :
// Vérifiez si la valeur est vide
if (!this.value) {
  return; // Ne pas procéder si la date n'est pas définie
}

Reste l'autre problème. Je vais voir si je ne peux pas formater la date pour mettre tout le monde d'accord.
Ça me rend fou !

J'ai créé un codepen bug on iPhone

Voici l'état actuel du script :


document.addEventListener('DOMContentLoaded', () => {
  const startDateInput = document.getElementById('start-date')

  // Gestionnaire d'événement pour la date de début
  startDateInput.addEventListener('change', function () {
    if (!this.value) {
      return;
    }
    
    const selectedDate = new Date(this.value)
    
    if (isNaN(selectedDate.getTime())) {
      alert(`Date invalide. Veuillez réessayer.`)
      this.value = ''
      return
    }
    
    const day = selectedDate.getUTCDay()

    // Vérifiez si le jour sélectionné est un lundi (1 dans getDay())
    if (day !== 1) {
      alert(`Veuillez sélectionner un lundi.`)
      this.value = ''
    } else {
      localStorage.setItem('startDate', this.value)
    }
  })
})


<input id="start-date" type="date"/>
Je viens de coller quelques logs directement dans la page pour débugger (parce que je n'ai pas de iPhone et que je contrôle directement sur celui d'une collègue compatissante). La plupart des OS me retournent un 1 pour lundi :
Valeur brute : 2024-11-04
Date interprétée : 2024-11-04T00:00:00.000Z
Jour de la semaine (0=Dimanche) : 1
Date correctement enregistrée dans localStorage.


Sur iPhone, j'ai d'abords une valeur 0, ensuite donc mon alert, puis au final la sélection se fait bien sur le lundi choisi :
Valeur brute : 2024-11-04
Date interprétée : 2024-11-04T00:00:00.000Z
Jour de la semaine (0=Dimanche) : 0
Erreur : Le jour sélectionné n’est pas un lundi.

Donc c'est comme s'il y avait une initialisation à 0 d'abord et qu'ensuite le champ émettait une erreur avant de prendre correctement la valeur du champ...

Argh !!! comment on résout un truc pareil ?
En attendant de trouver une solution j'ai fait un truc bien atroce :
function isIphone() {
  return /iPhone|iPad|iPod/i.test(navigator.userAgent)
}

if (isIphone()) { // @todo Solution à revoir.
  return
}
Bonsoir @Dave-Hiock,

La bonne entrée je l'ai et elle est validée dans un second temps (=> 1), donc je sais que ça marche même sur iPhone ; mais auparavant il y a un bref instant où l'input date s'initialise à 0 et donc déclenche mon alert()...
Modifié par Olivier C (24 Nov 2024 - 22:52)
Modérateur
Bonjour,

Pour IOS, il me semble qu'on doit utiliser l'event "blur" au lieu de "input".

Amicalement,
Meilleure solution
@parsimonhi : c'est une piste intéressante à laquelle je n'ai pas pensé. Je testerai, merci.

Édit : J'ai testé un peu plus longtemps : avec mon premier jet j'avais aussi des effets de bord sur d'autres navigateurs plus anciens et j'ai trouvé des différences de comportement entre mobile et desktop, pour un même navigateur, en ce qui concerne les datepickers. Mais maintenant, a priori, la solution "blur" de Parsimonhi semble régler le problème pour tout le monde. Merci à lui (à toi Smiley cligne ).

Je coche en résolu.
Modifié par Olivier C (02 Dec 2024 - 22:05)
Prévenir un modérateur
Répondre au sujet
Aller à