JavaScript React React Native

react-datepickerでバリデーションする方法

react-datepickerを使うと、簡単にデータピッカーを作ることが出来ます。

 

今回の記事では、react-datepickerでのバリデーションを紹介します。

 

具体的には、例えばWebサービスのユーザー情報登録などで、生年月日を入力するシチュエーションを考えてみまして。

 

15歳以上ではないと登録できないですよということを、バリデーションで実行してみようというものです。

 

react-datepickerでバリデーションをする方法

 

まず、下記のようなDatePickerコンポーネントがあったとして、maxDateという引数を使うと、

 

●●●●年前の設定は出来ないという風にすることができます。

 

<DatePicker
selected={startDate}
onChange={handleChange}
maxDate={TimeValidation}
/>

 

では、TimeValidationを見てみるとどうなるかと申しますと、こんな感じになります。

 

今日の日付から、15年前(5475日前)を指定することで、それ以前の日付からしか日付を選べなくなります。

 

例えば、今が2021年だったら、2006年よりも前に生まれた人しか生年月日を入力できません。

 

const initialDate = new Date();

const TimeValidation = initialDate.setDate(initialDate.getDate() - 5475);

 

 

 

 

 

以上になります。

 

react-datepickerには、他にも色々な引数を使えるので、是非とも色々調べてみてください。

 

下記の記事を参考にしました。

 

 

 

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

1
2
no image 3
4
5
6
7
8
9
10
no image 11
12
13
14
15
16
17
18
19
20
21
22
23

-JavaScript, React, React Native