Utiliser 2 DateTimePickers + petit bug

**hmscompagnie** · 01/09/2021, 11h26

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.

**gwyohm** · 02/09/2021, 09h50

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>
  );
}

**hmscompagnie** · 02/09/2021, 11h52

Merci.

Pour le problème de date.getMonth(), "props" faisait planter mon code. J'ai utilisé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(date.getMonth() + 1))

Pour le double timepicker, je suis en train de regarder.

**hmscompagnie** · 18/10/2021, 14h45

Re bonjour

,

Je suis revenu sur cette partie de mon code et j'ai un petit problème.

Les 2 DateTimePickers s'affichent bien. Mais quand je clique sur un (ça marche pour les 2, date et heure) j'ai une erreur.

Component Exception
Can't find variable : date

J'ai suivi le code ci-dessus. Voici ma version :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
import React, { Component, useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, TextInput, Button, Alert, ScrollView} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
 
 
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>);
 
}
 
 
const ChargeProg = () => {
 
    const [date1, setDate1] = useState(new Date());
    const [date2, setDate2] = useState(new Date());
 
  return (
<View>
    <View>
        <Text style={styles.title_text}>Programmez votre charge</Text>
 
 
        <View>
            <MyDatePicker date={date1} onChange={setDate1} label="Début de charge :"/>
        </View>
 
 
          <View>
              <MyDatePicker date={date2} onChange={setDate2} label="Fin de charge :"/>
          </View>
 
 
    </View>
 
 
 
        <View>
            <Button title="Envoyer" onPress={() =>
 
            Alert.alert("debut : "+date1+" fin : "+date2)
            }/>
 
        </View>
</View>
);
};
 
 
const styles = StyleSheet.create (...)
 
export default ChargeProg;

J'ai essayé de rajouter au début de la fonction MyDatePicker() :
const [date, setDate] = useState(new Date());

Comme ça je peux accéder aux dateTimePickers, mais les valeurs choisies ne sont pas prises en compte et j'ai ce warning :

possible unhandled promise rejection (id:0)
TypeError: props.setDate is not a function. (In props.setDate(currentDate), props.setDate is undefined

Quelqu'un a une idée ?

**gwyohm** · 19/10/2021, 09h35

Hello,

D'après ton code, dans le composant MyDatePicker, setDate n'existe pas dans props, c'est onChange qui existe

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<MyDatePicker date={date1} onChange={setDate1} label="Début de charge :"/>

mais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// ...
function MyDatePicker(props) {
// ...
const dateChange = (event, selectedDate) => {
        const currentDate = selectedDate || props.date
        setVisible(false)
        props.setDate(currentDate) // setDate n'existe pas, c'est onChange
  }

**hmscompagnie** · 19/10/2021, 09h42

Super ! Ça fonctionne.
Merci

Utiliser 2 DateTimePickers + petit bug

React

Discussions similaires

Partager

Partager