日付ピッカーの月/年はiOSでは機能しません

debugcn 投稿 Dev

猫とネズミ

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

これに対する回避策はありますか？

di3

問題は、デフォルトのkeepFocusがtrueに設定されていることです。サンプルコンポーネント（keepFocus = {false}）のようにレンダリングメソッドを変更します。

return (
  <div className="YearNavigation">
    <DayPickerInput
      showOverlay={true}
      keepFocus={false}
      dayPickerProps={dayPickerProps}
    />
  </div>
);

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]