Afficher un mois de l'année

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous

Je dois afficher un historique de ce type :
Pièce jointe 574922

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 ... :roll: )

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:

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 ...... 8O 8O

Pourriez vous m'aider svp ?

Merci à tous :)

Bonjour et bienvenue sur DVP.

On peut lire :

Code:

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:

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()]);

Merci pour votre réponse :)

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

Code:

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 ..

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:

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:

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:

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:

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.

15/07/2020, 20h52
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