Javascript 矩JS——如何更改编辑框的格式

我有一个日期/时间字段，它有单独的变量来处理日期、时间和日期/时间

在这个问题中，我将重点讨论时变。我们有一个查看页面和一个编辑页面。这是编辑页面的代码

类时间选择器扩展组件{
建造师（道具）{
超级（道具）；
this.onBlur=this.onBlur.bind（this）；
this.onFocus=this.onFocus.bind（this）；
}
onBlur（事件）{
event.persist（）；
clearTimeout（this.focusBlurTimeout）；
this.focusBlurTimeout=setTimeout（（）=>{
这是我的国家({
hasFocus：错，
});
if（this.props.onBlur&&Object.prototype.toString.call（this.props.onBlur）=='[Object Function]'）{
此.props.onBlur（事件）
}
if（this.initialValue！=this.props.value）{
if（this.props.onBlurChange&&Object.prototype.toString.call（this.props.onBlurChange）=='[Object Function]'）{
此.props.onBlurChange（事件）；
}
}
}, 0);
}
聚焦（事件）{
clearTimeout（this.focusBlurTimeout）；
如果（！this.state.hasFocus）{
this.focusBlurTimeout=setTimeout（（）=>{
这是我的国家({
hasFocus：没错，
});
if（this.props.onFocus&&Object.prototype.toString.call（this.props.onFocus）=='[Object Function]'）{
this.props.onFocus（事件）
}
this.initialValue=this.props.value；
}, 0);
}
};
render（）{
返回(
this.hourLeadingZero=input}
name='hour'
value={this.props.value&&this.props.value.hourLeadingZero？this.props.value.hourLeadingZero:'}
type='number'
样式={{width:'4em'}}
onChange={this.props.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
min='1'
max='12'
占位符='12'
/>:
this.minute=input}
className='form-control'
name='min'
value={this.props.value&&this.props.value.minute？this.props.value.minute:'}
type='number'
样式={{width:'4em'}}
onChange={this.props.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
min='0'
max='59'
占位符='00'
/>
this.AMPMUppercase=select}
name='meridiem'
onChange={this.props.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
value={this.props.value&&this.props.value.AMPMUppercase？this.props.value.AMPMUppercase:'}
>
是
颗粒物
);
}
}
类时区选择器扩展组件{
建造师（道具）{
超级（道具）；
this.onBlur=this.onBlur.bind（this）；
this.onFocus=this.onFocus.bind（this）；
}
onBlur（事件）{
event.persist（）；
clearTimeout（this.focusBlurTimeout）；
this.focusBlurTimeout=setTimeout（（）=>{
这是我的国家({
hasFocus：错，
});
if（this.props.onBlur&&Object.prototype.toString.call（this.props.onBlur）=='[Object Function]'）{
此.props.onBlur（事件）
}
if（this.initialValue！=this.props.value）{
if（this.props.onBlurChange&&Object.prototype.toString.call（this.props.onBlurChange）=='[Object Function]'）{
此.props.onBlurChange（事件）；
}
}
}, 0);
}
聚焦（事件）{
clearTimeout（this.focusBlurTimeout）；
如果（！this.state.hasFocus）{
this.focusBlurTimeout=setTimeout（（）=>{
这是我的国家({
hasFocus：没错，
});
if（this.props.onFocus&&Object.prototype.toString.call（this.props.onFocus）=='[Object Function]'）{
this.props.onFocus（事件）
}
this.initialValue=this.props.value；
}, 0);
}
}
render（）{
返回(
this.timezone=select}
name='timezoneselection'
onChange={this.props.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
value={this.props.value&&this.props.value.timezone？this.props.value.timezone:moment.tz.guess（）}
>
中心的
夏威夷人
阿拉斯加州
太平洋的
山
亚利桑那山
东方的
);
}
}
导出默认类timeEdit扩展组件{
建造师（道具）{
超级（道具）；
这个州={
日期：（（this.props.value&&this.props.value.date）？时刻（this.props.value.date）：null）
}; 
this.componentWillUnmount=this.componentWillUnmount.bind（this）；
this.onBlur=this.onBlur.bind（this）；
this.onFocus=this.onFocus.bind（this）；
this.updateValues=this.updateValues.bind（this）；
}
更新值（事件）{
event.preventDefault（）；
var val=this.props.value？Object.assign（{}，this.props.value）：{}；
var hour=val.hour | | 0；
小时=Math.min（Math.max（Math.trunc（小时），1），12）；
var min=val.min | | 0；
min=Math.min（Math.max（Math.trunc（min），0），59）；
var sec=val.second | 0；
秒=Math.min（Math.max（Math.trunc（sec），0），59）；
var meridiem=val.AMPMUppercase | | AM |；
var timezone selection=val.timezone；
var name=event.target.name；
变量nameVal；
交换机（名称）{
案件‘小时’：
nameVal=hour=Math.min（Math.max（Math.trunc（event.target.value），1），12）；
打破
案例“min”：
nameVal=m