我有一个日期/时间字段，它有单独的变体来处理日期，时间和日期/时间。
在这个问题中，我将专注于时间变体。我们有一个View页面和一个Edit页面。这是编辑页面的代码。
class TimePicker extends Component {
constructor(props) {
super(props);
this.onBlur = this.onBlur.bind(this);
this.onFocus = this.onFocus.bind(this);
}
onBlur(event) {
event.persist();
clearTimeout(this.focusBlurTimeout);
this.focusBlurTimeout = setTimeout(() => {
this.setState({
hasFocus: false,
});
if (this.props.onBlur && Object.prototype.toString.call(this.props.onBlur) == '[object Function]') {
this.props.onBlur(event)
}
if(this.initialValue != this.props.value) {
if (this.props.onBlurChange && Object.prototype.toString.call(this.props.onBlurChange) == '[object Function]') {
this.props.onBlurChange(event);
}
}
}, 0);
}
onFocus(event) {
clearTimeout(this.focusBlurTimeout);
if (!this.state.hasFocus) {
this.focusBlurTimeout = setTimeout(() => {
this.setState({
hasFocus: true,
});
if (this.props.onFocus && Object.prototype.toString.call(this.props.onFocus) == '[object Function]') {
this.props.onFocus(event)
}
this.initialValue = this.props.value;
}, 0);
}
};
render() {
return (
<span>
<input className='form-control'
ref = {input => this.hourLeadingZero = input}
name='hour'
value={this.props.value && this.props.value.hourLeadingZero ? this.props.value.hourLeadingZero : ''}
type='number'
style={{width: '4em'}}
onChange={this.props.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
min='1'
max='12'
placeholder='12'
/>:
<input
ref = {input => this.minute = input}
className='form-control'
name='min'
value={this.props.value && this.props.value.minute ? this.props.value.minute : ''}
type='number'
style={{width: '4em'}}
onChange={this.props.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
min='0'
max='59'
placeholder='00'
/>
<select className='form-control'
ref = {select => 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 : ''}
>
<option value='AM'>AM</option>
<option value='PM'>PM</option>
</select>
</span>
);
}
}
class TimezoneSelector extends Component {
constructor(props) {
super(props);
this.onBlur = this.onBlur.bind(this);
this.onFocus = this.onFocus.bind(this);
}
onBlur(event) {
event.persist();
clearTimeout(this.focusBlurTimeout);
this.focusBlurTimeout = setTimeout(() => {
this.setState({
hasFocus: false,
});
if (this.props.onBlur && Object.prototype.toString.call(this.props.onBlur) == '[object Function]') {
this.props.onBlur(event)
}
if(this.initialValue != this.props.value) {
if (this.props.onBlurChange && Object.prototype.toString.call(this.props.onBlurChange) == '[object Function]') {
this.props.onBlurChange(event);
}
}
}, 0);
}
onFocus(event) {
clearTimeout(this.focusBlurTimeout);
if (!this.state.hasFocus) {
this.focusBlurTimeout = setTimeout(() => {
this.setState({
hasFocus: true,
});
if (this.props.onFocus && Object.prototype.toString.call(this.props.onFocus) == '[object Function]') {
this.props.onFocus(event)
}
this.initialValue = this.props.value;
}, 0);
}
}
render() {
return (
<span>
<select className='form-control'
ref = {select => 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()}
>
<option value="America/Chicago">Central</option>
<option value="Pacific/Honolulu">Hawaiian</option>
<option value="America/Nome">Alaska</option>
<option value="America/Los_Angeles">Pacific</option>
<option value="America/Denver">Mountain</option>
<option value="America/Phoenix">Mountain-Arizona</option>
<option value="America/New_York">Eastern</option>
</select>
</span>
);
}
}
export default class timeEdit extends Component {
constructor(props) {
super(props);
this.state={
date: ((this.props.value && this.props.value.date) ? moment(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);
}
updateValues(event) {
event.preventDefault();
var val = this.props.value ? Object.assign({},this.props.value) : {};
var hour = val.hour || 0;
hour = Math.min(Math.max(Math.trunc(hour), 1), 12);
var min = val.minute || 0;
min = Math.min(Math.max(Math.trunc(min), 0), 59);
var sec = val.second || 0;
sec = Math.min(Math.max(Math.trunc(sec), 0), 59);
var meridiem = val.AMPMUppercase || 'AM';
var timezoneselection = val.timezone;
var name = event.target.name;
var nameVal;
switch(name) {
case 'hour':
nameVal = hour = Math.min(Math.max(Math.trunc(event.target.value), 1), 12);
break;
case 'min':
nameVal = min = Math.min(Math.max(Math.trunc(event.target.value), 0), 59);
break;
case 'meridiem':
nameVal = meridiem = event.target.value
break;
case 'timezoneselection':
nameVal = timezoneselection = event.target.value
break;
}
var timeStamp = (hour || 12) + ':' + (min || 0) + ' ' + (meridiem || 'AM') + ' ' + (timezoneselection || '');
var newMoment = moment(timeStamp, 'h:m:s A ');
val.moment = (val.moment ? moment(val.moment) : moment()).tz(timezoneselection || 'America/Chicago').hours(newMoment.hours()).minutes(newMoment.minutes()).seconds(newMoment.seconds());
val.timestamp = val.moment.format('X');
val.AMPMUppercase = val.moment.format('A');
val.AMPMLowercase = val.moment.format('a');
val.timezone = timezoneselection;
val.hour = val.moment.format('h');
val.hourLeadingZero = val.moment.format('hh');
val.hour24 = val.moment.format('HH');
val.minute = val.moment.format('mm');
val.second = val.moment.format('ss');
val.time = val.moment.format(this.props.timeFormat || 'LT');
val.fullField = (val.date ? val.date + ' ' : '') + val.time;
val.timeTimestamp = parseInt(val.hour24) * 60 * 60 + parseInt(val.minute) * 60 + (parseInt(val.second) || 0);
val.moment = val.moment.format();
this.props.onChange({
target:{
value: val
}
});
}
getInitialState() {
return {};
}
componentWillUnmount() {
clearTimeout(this.focusBlurTimeout);
}
onBlur(event) {
event.persist();
clearTimeout(this.focusBlurTimeout);
this.focusBlurTimeout = setTimeout(() => {
this.setState({
hasFocus: false,
});
if (this.props.onBlur && Object.prototype.toString.call(this.props.onBlur) == '[object Function]') {
this.props.onBlur(event)
}
if(this.initialValue != this.props.value) {
if (this.props.onBlurChange && Object.prototype.toString.call(this.props.onBlurChange) == '[object Function]') {
this.props.onBlurChange(event);
}
}
}, 0);
}
onFocus(event) {
clearTimeout(this.focusBlurTimeout);
if (!this.state.hasFocus) {
this.focusBlurTimeout = setTimeout(() => {
this.setState({
hasFocus: true,
});
if (this.props.onFocus && Object.prototype.toString.call(this.props.onFocus) == '[object Function]') {
this.props.onFocus(event)
}
this.initialValue = this.props.value;
}, 0);
}
}
render() {
return (
<span>
<span className='form-inline' aria-required={(this.props.required) ? true : false} onClick={this.props.onClick} onMouseEnter={this.props.onMouseOver} onMouseLeave={this.props.onMouseOut}>
<span>
<TimePicker
value={this.props.value || {hourLeadingZero: '', minute: '', AMPMUppercase: 'AM'}}
onChange={this.updateValues}
onFocus={this.onFocus}
onBlur={this.onBlur}/>
{(this.props.allowTimezone) ?
<TimezoneSelector
value={this.props.value || {timezone: ' '}}
onChange={this.updateValues}
onBlur={this.onBlur}
onFocus={this.onFocus}/> : null}
</span>
</span>
<small className='form-text text-muted'>{this.props.descriptiveText}</small>
</span>
);
}
}
这是“查看”页面的代码，它将显示您在“编辑”页面中输入的内容。
export default class timeView extends Component {
render() {
var value = '';
if (this.props.value) {
if (this.props.value.moment) {
var timeFormat = this.props.timeFormat || 'LT';
var momentObj = moment(this.props.value.moment);
if (this.props.value && this.props.value.timezone) {
momentObj.tz(this.props.value.timezone);
}
value = momentObj.format(timeFormat);
} else if (this.props.value.time) {
value = this.props.value.time;
}
}
var toDisplay = {
'America/Chicago' : 'Central',
'Pacific/Honolulu' : 'Hawaiian',
'America/Nome' : 'Alaska',
'America/Los_Angeles' : 'Pacific',
'America/Denver' : 'Mountain',
'America/Phoenix' : 'Eastern'
}
return (
<p className='form-control-static'>
{value}
{this.props.value && this.props.value.timezone ? toDisplay[this.props.value.timezone] || null : null}
</p>
);
}
}
查看有效并将重新格式化输入（IE：如果您输入下午2点，它将在下午2:00出现在视图中;如果输入下午2点并输入HH：mm用于TimeFormat，您可以我会得到14:00。）
我需要编辑变体以使TimeFormat设置生效。 IE：现在它的时间：分钟上午/下午＆＃39;。如果我将Timeformat设置为＆＃39; HH＆＃39;我希望将其改为＆＃39; 24小时＆＃39;
正则表达式会成为现实吗？我怎么可能用这个呢？我对Regex并不熟悉。
我也在TimePicker组件中尝试使用此代码进行编辑，但这并没有在控制台中平移并返回undefined。
class TimePicker extends Component {
constructor(props) {
super(props);
this.onBlur = this.onBlur.bind(this);
this.onFocus = this.onFocus.bind(this);
}
onBlur(event) {
event.persist();
clearTimeout(this.focusBlurTimeout);
this.focusBlurTimeout = setTimeout(() => {
this.setState({
hasFocus: false,
});
if (this.props.onBlur && Object.prototype.toString.call(this.props.onBlur) == '[object Function]') {
this.props.onBlur(event)
}
if(this.initialValue != this.props.value) {
if (this.props.onBlurChange && Object.prototype.toString.call(this.props.onBlurChange) == '[object Function]') {
this.props.onBlurChange(event);
}
}
}, 0);
}
onFocus(event) {
clearTimeout(this.focusBlurTimeout);
if (!this.state.hasFocus) {
this.focusBlurTimeout = setTimeout(() => {
this.setState({
hasFocus: true,
});
if (this.props.onFocus && Object.prototype.toString.call(this.props.onFocus) == '[object Function]') {
this.props.onFocus(event)
}
this.initialValue = this.props.value;
}, 0);
}
};
render() {
var hourFormat = (this.props.timeFormat && this.props.timeFormat.includes('HH')) ?
( <input className='form-control'
ref = {input => this.hour24 = input}
name='hour'
value={this.props.value && this.props.value.hour24 ? this.props.value.hour24 : ''}
type='number'
style={{width: '4em'}}
onChange={this.props.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
min='1'
max='24'
placeholder='24'
/>) :
(<input className='form-control'
ref = {input => this.hourLeadingZero = input}
name='hour'
value={this.props.value && this.props.value.hourLeadingZero ? this.props.value.hourLeadingZero : ''}
type='number'
style={{width: '4em'}}
onChange={this.props.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
min='1'
max='12'
placeholder='12'
/>);
console.log(this.props.timeFormat && this.props.timeFormat.includes('HH'));
return (
<span>
{hourFormat}
:
<input
ref = {input => this.minute = input}
className='form-control'
name='min'
value={this.props.value && this.props.value.minute ? this.props.value.minute : ''}
type='number'
style={{width: '4em'}}
onChange={this.props.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
min='0'
max='59'
placeholder='00'
/>
<select className='form-control'
ref = {select => 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 : ''}
>
<option value='AM'>AM</option>
<option value='PM'>PM</option>
</select>
</span>
);
}
}
任何和所有帮助将不胜感激！