在React日期选择器中,可以通过设置readOnly
属性来阻止用户直接编辑日期。以下是一个示例代码,展示了如何使用react-datepicker
库实现不允许用户编写日期的日期选择器:
首先,安装react-datepicker
库:
npm install react-datepicker
然后,创建一个React组件,并使用DatePicker
组件来实现日期选择器:
import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
class DateSelector extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedDate: null
};
}
handleChange = (date) => {
this.setState({
selectedDate: date
});
}
render() {
return (
);
}
}
export default DateSelector;
在上面的代码中,readOnly
属性被设置为true
,这样用户就无法直接编辑日期。通过handleChange
函数,可以在选择日期时更新组件的状态。