反应蚁设计日期时间选择器值单独保存

Question

我正在使用我的 react 打字稿项目进行ant 设计日期时间选择器，我能知道如何使用两个标签保存日期和时间值吗

任何解决方案

这里是堆栈闪电战

我的代码在这里

interface AppProps { }
interface AppState {
name: string;
date: Date;
}
class App extends Component<AppProps, AppState> {
constructor(props) {
super(props);
this.state = {
name: 'React',
date: new Date()
};
}
//date disable
disabledDate(current: any) {
// Can not select days before today and today
//return current && current < moment().endOf('day');
return current && current < moment().startOf("day")
}
//time disable
getDisabledHours() {
var hours = [];
for (let i = 0; i < moment().hour(); i++) {
hours.push(i);
}
return hours;
}
//time disable
getDisabledMinutes = (selectedHour: any) => {
var minutes = [];
if (selectedHour === moment().hour()) {
for (var i = 0; i < moment().minute(); i++) {
minutes.push(i);
}
}
return minutes;
}

render() {
return (
<div>
<DatePicker
name="Date" disabledDate={this.disabledDate}
onChange={d => this.setState({date: d})}
style={{width: "100%"}}
showTime={{ disabledMinutes: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledMinutes, 
disabledHours: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledHours}}
value={moment(this.state.date)}
/>
</div>
);
}
}

Answer 1

试试这个它正在工作.

getData = (date) => {
console.log('date', date);
console.log("date",moment(date).format('YYYY-MM-DD'));
console.log("time",moment(date).format('HH:mm:ss'))
}
render() {
return (
<div>
<DatePicker
name="Date" disabledDate={this.disabledDate}
onChange={this.getData}
style={{ width: "100%" }}
showTime={{
disabledMinutes: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledMinutes,
disabledHours: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledHours
}}
value={moment(this.state.date)}
/>
</div>
);
}

希望这对你有帮助.