آموزش ایجاد DatePicker شمسی در ری اکت جی اس

آموزش ایجاد DatePicker شمسی در ری اکت جی اس

در ابتدا باید پکیج زیر را در پروژه نصب نمایید

npm i react-hichestan-datetimepicker

سپس باید این پکیج را در پروژه مورد نظر ایمپورت کنید تا بتونید از اون استفاده کنید

import React from "react";

import {DateTimeInput, DateTimeInputSimple, DateInput, DateInputSimple} from 'react-hichestan-datetimepicker';

حال به نمونه کد زیر توجه کنید

const SignupForm = () => {

const [startDate, setStartDate] = useState(new Date());

const handleChange = (event) => {

setStartDate(event.target.value);

};

return (

<div>

<DateTimeInput

value={startDate}

name={'myDateTime'}

={handleChange}/>

<DateTimeInputSimple

value={startDate}

name={'myDateTime'}

={handleChange} />

<DateInput

value={startDate}

name={'myDateTime'}

={handleChange} />

<DateInputSimple

value={startDate}

name={'myDateTime'}

={handleChange} />

</div>

);

};

export default SignupForm;

همونطور که مشاهده میکنید 4 نمونه کامپوننت برای این کتابخونه وجود دارد که هرکدام یک خروجی رو به ما نمایش می دهند که بصورت زیر می باشد

کامپوننت اول

کامپوننت دوم

کامپوننت سوم

کامپوننت چهارم

هر 4 نمونه ی بالا بترتیب کدهای نمایش داده شده است که از هر کدام به دلخواه میتونید استفاده کنید.

برای آموزش های برنامه نویسی بصورت رایگان پیج مارو در اینستاگرام دنبال نمایید

@mr.engineer404