Composant timepicker dans reactjs

Question

J'ai développé un composant timepicker simple.

La fonctionnalité de ce composant est

a) Afficher l'heure dans les deux format 12 heures et le format 24 heures

b) L'utilisateur peut sélectionner des heures, minutes, heures, heures

c) Lorsque envoyer le temps au serveur, le temps doit être au format 24 heures

pour l'instant le bug que je l'ai vu est à la charge initiale si le temps est au format PM, le temps de 24 heures n'apparaît pas

Quelqu'un peut-il regarder le code et m'aider à améliorer mon code et corriger ce bug, s'il vous plaît?

Voici le code avec la démo

import React from "react"; 
import moment from "moment"; 
import "./time.css"; 

class TimePicker extends React.PureComponent { 
    constructor(props) { 
    super(props); 
    this.calculateMeridian(props.time); 
    this.state = { 
     time: this.convertTime(props.time), 
     hour: this.calculateHour(props.time), 
     hourTime: this.convertTime(props.time), 
     selectedNumber: 1, 
     meridian: this.calculateMeridian(props.time), 
     minutes: this.calculateMinutes(props.time), 
     hasError: false 
    }; 
    } 

    convertTime = time => { 
    const splittedTime = time && time.split(":"); 
    const hour = splittedTime && splittedTime[0]; 
    if (hour > 12) { 
     // const hour = time.split(':')[0]; 
     const momentInstance = moment(time, "hhmm"); 
     const twelveHourTime = momentInstance.format("h:mm"); 
     console.log("twelveHourTime", twelveHourTime); 
     return twelveHourTime; 
    } 

    return time; 
    }; 

    calculateMinutes = time => { 
    const splittedTime = time && time.split(':'); 
    console.log('minutes', splittedTime); 
    return splittedTime[1].split(' ')[0]; 
    } 

    calculateHour = time => { 
    const splittedTime = time && time.split(':'); 
    return splittedTime[0]; 
    } 

    calculateMeridian = time => { 
    const splittedTime = time && time.split(':')[1].split(' '); 
    console.log('splitted time', splittedTime); 
    return splittedTime[1]; 
    } 

    handleClick(time) { 
    const { meridian, minutes } = this.state; 
    const hourTime = moment(`${time}:${minutes}`, [ 
     "hhmm A" 
    ]).format("h:mm"); 
    this.setState(
     { 
     time, 
     hour: time, 
     selectedNumber: time, 
     hourTime 
     }, 
    () => this.props.onClick(hourTime) 
    ); 
    } 

    handleTimeAmPm(meridian) { 
    const { time, minutes, hour } = this.state; 
    const hourTime = moment(`${hour}:${minutes} ${meridian}`, [ 
     "h:mm A" 
    ]).format("h:mm"); 
    console.log('hourTime', hourTime); 
    this.setState({ meridian, hourTime },() => this.props.onClick(this.state.hourTime)); 
    } 

    handleMinutes = e => { 
    const { value, min, max } = e.target; 
    if (value >= min && value < max) { 
     const hourTime = moment(
     `${this.state.hour}:${value}}`, 
     ["hhmm"] 
    ).format("h:mm a"); 
     if (value.length < 2) { 
     this.setState({ minutes: "0" + value.slice(-2), hourTime },() => 
      this.props.onClick(this.state.hourTime) 
     ); 
     } else { 
     this.setState({ minutes: value.slice(-2), hourTime },() => 
      this.props.onClick(this.state.hourTime) 
     ); 
     } 
    } else { 
     this.setState({ minutes: "00", hasError: true }); 
    } 
    }; 

    render() { 
    let time = []; 
    for (let i = 1; i <= 12; i++) { 
     time.push(
     <div 
      className={this.state.selectedNumber === i ? "hand selected" : "hand"} 
      key={i} 
      onClick={() => this.handleClick(i)} 
     > 
      {i} 
     </div> 
    ); 
    } 
    console.log('time', this.state.hourTime); 
    return (
     <div className="card card-md" style={{ width: "100%", maxWidth: "100%" }}> 
     <div className="time-date"> 
      <div className="display"> 
      <div className="content"> 
       <div className="main-title"> 
       {this.state.hour}:{this.state.minutes}{this.state.meridian} 
       </div> 
      </div> 
      </div> 
      <div className="control"> 
      <div className="slider"> 
       <div className="time-control"> 
       <div className="clock"> 
        <div className="clock-face"> 
        <div className="center" /> 
        {time} 
        </div> 
       </div> 
       <div className="actions"> 
        <div className="am" onClick={() => this.handleTimeAmPm("am")}> 
        am 
        </div> 
        <div className="minutes"> 
        <div className={this.state.hasError && "input error"}> 
         <input 
         type="number" 
         min={0} 
         max={60} 
         value={this.state.minutes} 
         onChange={this.handleMinutes} 
         /> 
        </div> 
        </div> 
        <div className="pm" onClick={() => this.handleTimeAmPm("pm")}> 
        pm 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

export default TimePicker; 

DEMO

https://codesandbox.io/s/o53r9nr9z5

Answer 1

juste appeler votre gestionnaire am/h à l'intérieur componentDidMount.

componentDidMount() { 
    this.handleTimeAmPm(this.state.meridian); 
}