日付選択コンポーネント(DatePicker)の実装

2年 ago
優斗, 朝陽
1 minute

DatePickerコンポーネントの実装は、さまざまなテクノロジースタックとライブラリによって実現できます。以下はReactとAnt Designライブラリを使用したDatePickerコンポーネントの簡単な実装例です。

import React, { useState } from 'react';

import { DatePicker } from ‘antd’;

const MyDatePicker = () => {

const [selectedDate, setSelectedDate] = useState(null);

const handleDateChange = (date) => {

setSelectedDate(date);

};

return (

<div>

<DatePicker onChange={handleDateChange} />

{selectedDate && <p>Selected Date: {selectedDate.toString()}</p>}

</div>

);

};

export default MyDatePicker;



上記サンプルでは、まずReactとAnt DesignライブラリのDatePickerコンポーネントをインポートします。次に、useStateフックを使用してselectedDateという状態変数を作成し、初期値を null に設定します。handleDateChange関数は、selectedDateの値を更新するために使用します。


コンポーネントの返却部分において、DatePicker コンポーネントをレンダリングし、handleDateChange 関数を onChange プロパティに渡すことで、日付を選択した際に selectedDate の値が更新されるようにしています。最後に、条件レンダリングを用いて選択した日付を表示しています。


このサンプルは基本的な実装例であることに留意してください。必要に応じて、拡張やカスタマイズをすることができます。


もちろん、React-DatePickerやMaterial-UIなど、他に数多くのオープンソースライブラリやフレームワークがあり、日付選択コンポーネントを実装するために自分の好みやプロジェクトの要件に応じて適切なライブラリを選択できます。

        


        
        

			        

    


	



		            	                        

        


    

















  
    bannerAds