我在用
react-day-picker
包以选择包含年/月道具的日期但是,“年/月”下拉列表在iOS移动浏览器上无法正常工作:
import React from 'react';
import ReactDOM from "react-dom";
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
const currentYear = new Date().getFullYear();
const fromMonth = new Date(currentYear, 0);
const toMonth = new Date(currentYear + 10, 11);
function YearMonthForm({ date, localeUtils, onChange }) {
const months = localeUtils.getMonths();
const years = [];
for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
years.push(i);
}
const handleChange = function handleChange(e) {
const { year, month } = e.target.form;
onChange(new Date(year.value, month.value));
};
return (
<form className="DayPicker-Caption">
<select name="month" onChange={handleChange} value={date.getMonth()}>
{months.map((month, i) => (
<option key={month} value={i}>
{month}
</option>
))}
</select>
<select name="year" onChange={handleChange} value={date.getFullYear()}>
{years.map(year => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</form>
);
}
export default class Example extends React.Component {
constructor(props) {
super(props);
this.handleYearMonthChange = this.handleYearMonthChange.bind(this);
this.state = {
month: fromMonth,
};
}
handleYearMonthChange(month) {
this.setState({ month });
}
render() {
const dayPickerProps = {
month: this.state.month,
fromMonth: fromMonth,
toMonth: toMonth,
captionElement: ({ date, localeUtils }) => (
<YearMonthForm
date={date}
localeUtils={localeUtils}
onChange={this.handleYearMonthChange}
/>
)
};
return (
<div className="YearNavigation">
<DayPickerInput
showOverlay={true}
dayPickerProps={dayPickerProps}
/>
</div>
);
}
}
ReactDOM.render(<Example />, document.getElementById("root"));
您可以在此链接上看到演示(必须在iOS设备上打开):
https://codesandbox.io/s/0y84wrp8mn
有办法解决这个问题吗?