IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Utiliser 2 DateTimePickers + petit bug


Sujet :

React

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2021
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : août 2021
    Messages : 13
    Points : 10
    Points
    10
    Par défaut Utiliser 2 DateTimePickers + petit bug
    Bonjour,

    Dans une application ReactNative, je souhaite renseigner les dates et heures de début et de fin d'un évènement (grâce à 2 DateTimePickers).
    Je procède ainsi avec un DateTimePicker
    (J'ai utilisé cette page :
    https://www.nicolas-stophe.com/first-post/)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
     
    export default function ChargeProg() {
      const [date, setDate] = useState(new Date())
      const [visible, setVisible] = useState(false)
      const [mode, setMode] = useState('')
      const [isSelected, setSelection] = useState(false);
     
      const showPicker = () => {
        setVisible(true)
      }
     
      const showDate = () => {
        setMode('date')
        showPicker()
      }
     
      const showTime = () => {
        setMode('time')
        showPicker()
      }
     
      const dateChange = (event, selectedDate) => {
            const currentDate = selectedDate || date
            setVisible(false)
            setDate(currentDate)
      }
     
      return (
        <View style={styles.main_container}>
            <View style={styles.time_container}>
                <Text>Début de charge : </Text>
                <Text style={styles.text} onPress={showDate}>
                  {`${('0' + date.getDate()).slice(-2)}/${('0' + date.getMonth()).slice(-2)}/${date.getFullYear()}`}
                </Text>
                <Text style={styles.text} onPress={showTime}>
                  {`${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`}
                </Text>
                { visible &&
                  <DateTimePicker
                    value={date}
                    mode={mode}
                    onChange={dateChange}
                  />
                }
              </View>
    Déjà, j'ai un petit bug sur l'affichage du mois. Il indique le mois précédent de celui sélectionné (janvier pour février, septembre pour octobre). J'ai essayé de toucher au '0' avant le date.getMonth()).slice(-2), je l'ai remplacé par 1, 01, 0:1, 0/1 mais ça n'a pas l'effet voulu (ça modifie la dizaine du mois).
    Quelqu'un a-t-il une idée ?

    Le problème principal survient quand je cherche à utiliser un second DateTimePicker. Je ne sais pas bien qu'elles sont les variables à renommer pour éviter que les 2 Dtp entre en conflit. J'imagine que c'est basique mais je n'ai pas réussi.

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    900
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 900
    Points : 1 289
    Points
    1 289
    Par défaut
    Salut,

    date.getMonth() renvoie un entier entre 0 et 11 ; 0 -> janvier, 11 -> décembre, ce qui explique ton décalage.
    donc faire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ('0' + (props.date.getMonth() + 1)).slice(-2)
    devrait régler ton petit bug d'affichage

    Pour ton problème principal, le plus simple serait de faire un autre composant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
     
    function MyDatePicker(props) {
      const [visible, setVisible] = useState(false)
      const [mode, setMode] = useState('')
     
      const showPicker = () => {
        setVisible(true)
      }
     
      const showDate = () => {
        setMode('date')
        showPicker()
      }
     
      const showTime = () => {
        setMode('time')
        showPicker()
      }
     
      const dateChange = (event, selectedDate) => {
            const currentDate = selectedDate || props.date
            setVisible(false)
            props.setDate(currentDate)
      }
     
      return (
            <View>
                <Text>{props.label}</Text>
                <Text onPress={showDate}>
                  {`${('0' + props.date.getDate()).slice(-2)}/${('0' + (props.date.getMonth() + 1)).slice(-2)}/${props.date.getFullYear()}`}
                </Text>
                <Text onPress={showTime}>
                  {`${('0' + props.date.getHours()).slice(-2)}:${('0' + props.date.getMinutes()).slice(-2)}`}
                </Text>
                { visible &&
                  <DateTimePicker
                    value={date}
                    mode={mode}
                    onChange={dateChange}
                  />
                }
              </View>);
     
    }
     
    export default function ChargeProg() {
       const [date1, setDate1] = useState(new Date());
       const [date2, setDate2] = useState(new Date());
     
      return (
        <View>
           <MyDatePicker date={date1} onChange={setDate1} label="Début de charge :"/>
           <MyDatePicker date={date2} onChange={setDate2} label="Fin de charge :"/>
        </View>
      );
    }
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2021
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : août 2021
    Messages : 13
    Points : 10
    Points
    10
    Par défaut
    Merci.

    Pour le problème de date.getMonth(), "props" faisait planter mon code. J'ai utilisé :
    Pour le double timepicker, je suis en train de regarder.

Discussions similaires

  1. Réponses: 1
    Dernier message: 29/11/2005, 17h32
  2. utilisation du datetimepicker
    Par deubal dans le forum Composants VCL
    Réponses: 1
    Dernier message: 04/11/2005, 13h32
  3. Petit bug.
    Par CCin dans le forum C
    Réponses: 15
    Dernier message: 12/10/2005, 12h08
  4. [RegEx] Petit Bug sur Expression Régulière
    Par Delphy113 dans le forum Langage
    Réponses: 2
    Dernier message: 25/09/2005, 20h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo