0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Reactで日付選択にDatePickerを使う

Last updated at Posted at 2022-07-25
import React, {useState} from 'react';
import DatePicker from 'react-datepicker';
import ja from 'date-fns/locale/ja'; //日本語カレンダーのImport

export const App = () => {
    const Today = new Date();
    const [date, setDate] = React.useState(Today);

    return (
      <div>
        <form>
          <label>
            <DatePicker dateFormat="yyyy-MM-dd" //フォーマット指定
                        selected={date}
                        maxDate={Today} //過去日のみを選択可能にする
                        filterDate={date => date.getDay() === 1} //月曜日指定の場合、1
                        locale={ja} //日本語カレンダーにする
                        onChange={selectedDate => { setDate(selectedDate || Today) }} />
          </label>
          <Button onClick={} text='検索' />
        </form>
      </div>
    );
};

export default App;
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?