Discussion :

[Alexandra31150]

Bonjour à tous

Je dois afficher un historique de ce type :


j'ai un soucis sur l'affichage de la date, je n'arrive pas à afficher le mois et l'année ( ou du moins juste le mois au minimum ... )

J'essaye de tester différente méthodes trouvées sur le net et voici ce que j'ai écrit :
(la date du jour ne sera par la suite pas affichée, la c'est simplement pour m'aider dans la méthode mais bon ... )

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
 
render() {
    const ladate = new Date();
    const tabMois = [
      ('Janvier',
      'Février',
      'Mars',
      'Avril',
      'Mai',
      'Juin',
      'Juillet',
      'Août',
      'Septembre',
      'Octobre',
      'Novembre',
      'Décembre')
    ];
    return (
      <div className="global-histo">
        <h2 className="histo">HISTORIQUE</h2>
        <p>
          Nous sommes le {ladate.getDate()}/{ladate.getMonth() + 1}/{ladate.getFullYear()}
        </p>
        <p>Nous sommes en {tabMois[ladate.getMonth()]}</p>
      </div>
    );
  }

Alors je ne vous parle pas des jours à afficher en dessous ensuite ......

Pourriez vous m'aider svp ?

Merci à tous

[NoSmoking]

Bonjour et bienvenue sur DVP.

On peut lire :

Code :

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

1
2
3
const tabMois = [
  ('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre')
];

que viennent faire les parenthèses dans ton tableau qui ce retrouve de fait n'avoir qu'un élément.

Code :

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

1
2
3
4
5
6
const ladate = new Date();
const tabMois = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
console.log(ladate.getDate());
console.log(ladate.getMonth() + 1);
console.log(ladate.getFullYear());
console.log(tabMois[ladate.getMonth()]);

[Alexandra31150]

Merci pour votre réponse

Alors effectivement je suis partie sur une autre méthode :

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
 
class Historique extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      // month: getMonth(),
      // idVideo: ''
    };
    this.onChange = this.onChange.bind(this);
  }
 
  onChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
 
  render() {
    return (
      <div className="global-histo">
        <h2 className="histo">HISTORIQUE</h2>
        <input
          type="month"
          id="start"
          name="start"
          min="2020-01"
          value={this.month}
          onChange={this.onChange}
        />
        <input
          type="date"
          id="start"
          name="day-start"
          value={this.date}
          min="2020-01-01"
          onChange={this.onChange}
        />
      </div>
    );
  }
}
 
export default Historique;

Donc pour changer la date ca fonctionne mais pour selectionner le mois et l'année toujours pas ...
je n'ai pas la bonne méthode je pense ..

[NoSmoking]

Les input type="month" attendent une value au format spécifique, yyyy-mmm-dd, pour être prise en compte et je rajouterais que ce type n'est actuellement non pris en compte par FireFox.

Ceci étant dit, la gestion des dates étant toujours délicate il te faut à minima prévoir une fonction de formatage de tes données, cela pourrait être

Code :

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

1
2
3
4
5
6
7
8
9
10
11
  getFormatDate(date) {
    const d = new Date(date);
    const j = d.getDate();
    const m = d.getMonth() + 1;
    const a = d.getFullYear();
    return {
      day: j < 10 ? ("0" + j) : j,
      month: m < 10 ? ("0" + m) : m,
      year: a
    };
  }

cette fonction va te permettre d'initialiser tes données state :

Code :

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

1
2
3
4
5
6
7
8
9
10
  constructor(props) {
    super(props);
    this.formatData = this.getFormatDate( new Date());
    this.state = {
      jour: this.formatData.day,
      mois: this.formatData.month,
      annee: this.formatData.year
    };
    this.handleChange = this.handleChange.bind(this);
  }

Concernant la fonction à mettre sur le onchange tu peux soit en faire une unique soit une séparée pour tes deux champs de saisie :

Code :

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

1
2
3
4
5
6
7
8
9
  handleChange(e) {
    console.log("handleChange :", e.target.valueAsDate)
    const result = this.getFormatDate(e.target.valueAsDate);
    this.setState({
      jour: result.day,
      mois: result.month,
      annee: result.year
    });
  }

Maintenant l'écriture de ton retour pour render() devient, par exemple :

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
  render() {
    return (
      <div className="global-histo">
        <h2 className="histo">HISTORIQUE</h2>
        <p>Date à afficher : {this.state.jour + "/" + this.state.mois + "/" + this.state.annee}</p>
        <input
          type="month"
          id="start"
          name="start"
          min="2020-01"
          value={this.state.annee + "-" + this.state.mois}
          onChange={this.handleChange}
        />&nbsp;
        <input
          type="date"
          id="start"
          name="day-start"
          value={this.state.annee + "-" + this.state.mois + "-" + this.state.jour}
          min="2020-01-01"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

Ce n'est pas commenté mais je pense que tu comprendra la finalité du code.

[Alexandra31150]

Genial merci beaucoup je vais essayer ça
Effectivement c est assez complexe je suis ensuite partie sur react calendar puis sur datePicker ...
Je n arrive pas a afficher la finalité que je veux...
Merci en tout cas