تقویم شمسی ری اكت و اعتبارسنجی فرم

سلام دوستانحدود چند روزی در گیر این بودم که چطور در ریاکت از تقویم شمسی استفاده کنم، راه حل ساده بود اما مشکل از اون جایی به وجود اومد که نیاز بود فیلد اجباری باشه.خوب راه حل ساده تقویم شمسی ، استفاده از Date Picker هست که خیلی از پکیج هارو تست کردم اما... قبل از این مبحث بزارید فیلد اجباری رو بگم.برای فیلد اجباری از react hook form استفاده کردم که واقعا عالی هست.روش استفاده به شکل زیر هست?import React , {useState , useEffect} from 'react'; import { useForm } from &quotreact-hook-form&quot function Main(){ const { register , handleSubmit, errors } = useForm(); const errorsMassage = <p className=&quoterrors-massage&quot>اطلاعات را وارد نمایید</p> const = data => { const token = localStorage.getItem(&quottoken&quot) addSkillData({ newItem: { &quottitle&quot : data.title, &quotexpense&quot : data.expense, &quotstartDate&quot : data.startDate, }, config : { headers : { &quotAuthorization&quot : `Bearer ${token} }}})}; return (<> <form ={handleSubmit()}> <div className=&quotform-group col-lg-4 col-md-12&quot> <label className=&quotmr-1&quot htmlFor=&quot&quot>عنوان</label> <input className=&quotform-control&quot id=&quotaddskill-title&quot name=&quottitle&quot ref={register({ required: true })} /> {errors.title && errorsMassage} </div> <div className=&quotform-group col-lg-4 col-md-12&quot> <label className=&quotmr-1&quot htmlFor=&quot&quot>میزان هزینه</label> <input type=&quottext&quot className=&quotform-control&quot id=&quotaddskill-expense&quot name=&quotexpense&quot ref={register({ required: true })} /> {errors.expense && errorsMassage} </div> <div className=&quotform-group col-lg-4 col-md-12&quot> <label className=&quotmr-1&quot htmlFor=&quot&quot>تاریخ شروع</label> <input type=&quotdate&quot className=&quotform-control&quot id=&quotaddskill-start-date&quot name=&quotstartDate&quot ref={register({ required: true })} /> {errors.startDate && errorsMassage} </div> <input className=&quotbtn btn-primary btn-user btn-block&quot type=&quotsubmit&quot value=&quotثبت&quot /> </form> </> )}خوب در بالا همان طور که می‌بینید در هر input از اتریبیوتی به نام ref استفاده کرده تا مقادیر را علاوه بر ارسال به استیت، اعتبار سنجی هم کنه و در نهایت مقادیر در تابع که به handleSubmit در تگ اصلی فرم در دسترس ما هستند.حالا من در همین شرایط از دیتا پیکر استفاده کردم مثل زیر ?import React , {useState , useEffect} from 'react'; import { useForm } from &quotreact-hook-form&quot import { DatePicker } from &quotdavood-react-persian-datepicker&quot function Main(){ const { register , handleSubmit, errors } = useForm(); const errorsMassage = <p className=&quoterrors-massage&quot>اطلاعات را وارد نمایید</p> const = data => { const token = localStorage.getItem(&quottoken&quot) addSkillData({ newItem: { &quottitle&quot : data.title, &quotexpense&quot : data.expense, &quotstartDate&quot : data.startDate, }, config : { headers : { &quotAuthorization&quot : `Bearer ${token}` } }})}; return (<> <form ={handleSubmit()}> <div className=&quotform-group col-lg-4 col-md-12&quot> <label className=&quotmr-1&quot htmlFor=&quot&quot>عنوان</label> <input className=&quotform-control&quot id=&quotaddskill-title&quot name=&quottitle&quot ref={register({ required: true })} /> {errors.title && errorsMassage} </div> <div className=&quotform-group col-lg-4 col-md-12&quot> <label className=&quotmr-1&quot htmlFor=&quot&quot>میزان هزینه</label> <input type=&quottext&quot className=&quotform-control&quot id=&quotaddskill-expense&quot name=&quotexpense&quot ref={register({ required: true })} /> {errors.expense && errorsMassage} </div> <div className=&quotform-group col-lg-4 col-md-12&quot> <label className=&quotmr-1&quot htmlFor=&quot&quot>تاریخ شروع</label> <input type=&quothidden&quot className=&quotform-control&quot id=&quotaddskill-start-date&quot name=&quotstartDate&quot ref={register({ required: true })} /> <DatePicker /> {errors.startDate && errorsMassage} </div> <input className=&quotbtn btn-primary btn-user btn-block&quot type=&quotsubmit&quot value=&quotثبت&quot /> </form> </> )}همان طور که مشخص هست ، سعی داشتم input تاریخ میلادی را hidden کنم و تاریخ خروجی DatePicker را به value اینپوت پاس بدم که موفق هم شدم ( بدون استفاده از queryselector ) اما دیگه ref اجرا نمیشد و ارور عمل نمیکرد.اینجا بود که یکم کلافه شدم و با پرس و جو چند روزه ای که داشتم به یک جواب بسیار شیک رسیدم.ما در react-hook-form یک متد داریم به نام Controller که اگر در جایی امکان استفاده مستقیم خود input نبود یا ref در دسترس نبود میشه ازش استفاده کرد.روش استفاده به شکل زیر هست ?import React , {useState , useEffect} from 'react'; import { useForm , Controller } from &quotreact-hook-form&quot import { DatePicker } from &quotdavood-react-persian-datepicker&quot function Main(){ const { register , handleSubmit, errors , control } = useForm(); const errorsMassage = <p className=&quoterrors-massage&quot>اطلاعات را وارد نمایید</p> const = data => { const token = localStorage.getItem(&quottoken&quot) let date = moment(data.startDate).format('YYYY/M/D') addSkillData({ newItem: { &quottitle&quot : data.title, &quotexpense&quot : data.expense, &quotstartDate&quot : date, }, config : { headers : { &quotAuthorization&quot : `Bearer ${token}` } }})}; return (<> <form ={handleSubmit()}> <div className=&quotform-group col-lg-4 col-md-12&quot> <label className=&quotmr-1&quot htmlFor=&quot&quot>عنوان</label> <input className=&quotform-control&quot id=&quotaddskill-title&quot name=&quottitle&quot ref={register({ required: true })} /> {errors.title && errorsMassage} </div> <div className=&quotform-group col-lg-4 col-md-12&quot> <label className=&quotmr-1&quot htmlFor=&quot&quot>میزان هزینه</label> <input type=&quottext&quot className=&quotform-control&quot id=&quotaddskill-expense&quot name=&quotexpense&quot ref={register({ required: true })} /> {errors.expense && errorsMassage} </div> <div className=&quotform-group col-lg-4 col-md-12&quot> <label className=&quotmr-1&quot htmlFor=&quot&quot>تاریخ شروع</label> <Controller control={control} name=&quotstartDate&quot rules={{ required: true }} defaultValue={moment(skillEditingData.startDate)} render={({on4Change, on5Blur, va6lue }) => ( <DatePicker calendarStyles={styles} inputFormat=&quotjYYYY/jM/jD&quot v1alue={va4lue} o2nBlur={on6Blur} o3nChange={on5Change} /> )} /> {errors.startDate && errorsMassage} </div> <input className=&quotbtn btn-primary btn-user btn-block&quot type=&quotsubmit&quot value=&quotثبت&quot /> </form> </> )}در Controller به جای ref آمده از rules استفاده کرده و گفته در render هر آنچه دوست داری رندر کن فقط onChang1e, onBlu2r, valu3e هارو پاس بده بهش و تمام. ( اعداد به خاطر اينه كه ويرگول كاراكتر هاي مشابه رو حذف ميكنه ،‌شما حتما پاک کنید )و در آخر منابع رو هم بررسی کنیم:برای DatePicker از https://www.npmjs.com/package/davood-react-persian-datepicker استفاده کردم البته آن زمانی که داشتم پکیج های مختلف رو تست میکردم تمرکزم روی ref بود ، احتمال زیاد با این خاصیت Controller راحت میشه از هر پکیج دیگه ای استفاده کرد.برای Controller هم https://react-hook-form.com/api/#Controller را بررسی کنید.و در نهایت خروجی که DatePicker بهتون میده رو به https://github.com/jalaali/moment-jalaali بدید به شکل زیر ?let date = moment(data.startDate).format('YYYY/M/D') //میلادی let dateJalali = moment(data.startDate).format('jYYYY/jM/jD') //شمسیامیدوارم مورد استفاده قرار گرفته باشهسوالی داشتید حتما بپرسید