javascript - handle time picker with hour, minute, am, pm and time -
i creating time picker fun. create time picker can selected , show selected time. user can select or pm either. save time '09:30' format rather want show '09:30 am' or '09:30 pm' format. how handle am, pm, hour , minutes separately because in time picker have shown hour, minutes , am, pm separately , merged 1 shown title can use time sending server if want in future. how handle such?
here workaround have created now
can me @ this?
https://codesandbox.io/s/lpyqy3mo99
here code too
class timepicker extends react.purecomponent { constructor(props) { super(props); this.state = { time: this.converttime(props.time), hourtime: this.converttime(props.time), selectednumber: 1, meridian: "am", 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 props.time; }; calculateminutes = time => { const splittedtime = time && time.split(':'); return splittedtime[1]; } handleclick(time) { const { meridian, minutes } = this.state; const hourtime = moment(`${time}:${minutes}`, [ "hhmm" ]).format("h:mm"); this.setstate( { time, selectednumber: time, hourtime }, () => this.props.onclick(hourtime) ); } handletimeampm(meridian) { const { time, minutes } = this.state; // const hourtime = moment(`${time}:${minutes} ${meridian}`, [ // "h:mm a" // ]).format("hh:mm"); this.setstate({ meridian }, () => this.props.onclick(this.state.hourtime)); } handleminutes = e => { const { value, min, max } = e.target; if (value >= min && value < max) { const hourtime = moment( `${this.state.time}:${value}}`, ["hhmm"] ).format("h:mm"); 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 = []; (let = 1; <= 12; i++) { time.push( <div classname={this.state.selectednumber === ? "hand selected" : "hand"} key={i} onclick={() => this.handleclick(i)} > {i} </div> ); } 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.hourtime}{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")}> </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; update
i handle separate hour, minute, am, pm not store hourtime in these elements(hour minue am/pm).
Comments
Post a Comment