<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>نوشته های محمدسجاد دباغ</title>
        <link>https://virgool.io/feed/@msdabbagh</link>
        <description>برنامه نویس وب و اپلیکیشن</description>
        <language>fa</language>
        <pubDate>2026-06-16 08:00:14</pubDate>
        <image>
            <url>https://files.virgool.io/upload/users/39957/avatar/usX3bg.jpeg?height=120&amp;width=120</url>
            <title>محمدسجاد دباغ</title>
            <link>https://virgool.io/@msdabbagh</link>
        </image>

                    <item>
                <title>ABSTRACTION IN SOFTWARE DESIGN | انتزاع در طراحی نرم‌افزار</title>
                <link>https://virgool.io/@msdabbagh/abstraction-in-software-design-%D8%A7%D9%86%D8%AA%D8%B2%D8%A7%D8%B9-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%86%D8%B1%D9%85-%D8%A7%D9%81%D8%B2%D8%A7%D8%B1-wtcmtkkx2knt</link>
                <description>shiv kumarمعرفی ویدئو: abstraction در طراحی نرم‌افزارویدئوی «Abstraction in Software Design» به بررسی مفهوم انتزاع (Abstraction) در طراحی نرم‌افزار می‌پردازد. این ویدئو که در پلتفرم یوتیوب در دسترس است، با ارائه توضیحاتی روشن و مثال‌هایی کاربردی، به مخاطبان کمک می‌کند تا درک عمیق‌تری از چگونگی استفاده از انتزاع برای ساده‌سازی طراحی سیستم‌های نرم‌افزاری پیدا کنند. در این ویدئو، مفاهیم کلیدی مانند کاهش پیچیدگی، بهبود قابلیت نگهداری کد و افزایش انعطاف‌پذیری سیستم‌ها از طریق انتزاع تشریح شده‌اند. این محتوا برای توسعه‌دهندگان نرم‌افزار، دانشجویان مهندسی نرم‌افزار و هر کسی که به دنبال بهبود مهارت‌های طراحی سیستم است، منبعی ارزشمند محسوب می‌شود.لینک ویدئو: Abstraction in Software Designabstraction در طراحی نرم‌افزار: توضیحی ساده و کاربردیسلام دوستان، من شیو کومار هستم و امروز می‌خوام درباره یکی از پایه‌ای‌ترین اصول طراحی نرم‌افزار حرف بزنم: انتزاع‌ها یا همون abstractionها. خیلی‌ها می‌دونن که انتزاع مهمه، اما نمی‌تونن دقیق توضیح بدن چیه، یا فرق بین یه انتزاع خوب و بد رو تشخیص بدن. من توی این مقاله، بر اساس صحبت‌هام توی ویدیو یوتیوبم (که لینک‌ش رو می‌ذارم: https://m.youtube.com/watch?v=hOrpppzEX14&amp;t=218s)، می‌خوام این مفهوم رو به زبون خودم توضیح بدم. ساده و خلاصه، بدون پیچیدگی‌های غیرضروری. همچنین، توی توضیحات به ریپازیتوری گیت‌هابم اشاره می‌کنم (https://github.com/matlus/Adapter-Design-Pattern-Message-Brokers) که مثال‌هایی از الگوی Adapter Design Pattern برای Message Brokers داره، و چطور می‌تونید از RabbitMQ برای تست محلی Azure Service Bus استفاده کنید. این ریپو شامل لینک‌هایی به ویدیوهای مرتبط مثل معرفی Message Brokers، شروع با RabbitMQ و Azure Service Bus هست، که کمک می‌کنه مفهوم انتزاع رو توی زمینه واقعی ببینید.بیایم از اول شروع کنیم. انتزاع چیه؟ من تعریف پیچیده نمی‌دم، فقط یه دید کلی. دیکسترا (Edsger Dijkstra) گفته بود: &quot;هدف انتزاع این نیست که مبهم باشه.&quot; یعنی انتزاع نباید کلی و نامفهوم باشه، بلکه باید دقیق‌تر و ساده‌تر کنه چیزها رو. خیلی‌ها اشتباه می‌کنن و سعی می‌کنن انتزاع‌هایی بسازن که خیلی بزرگ و عمومی باشه، انگار برای کل دنیا! نه، این کار رو نکنید. انتزاع برای برنامه خاص خودتون هست، نه برای همه.سطح درست انتزاع: نه زیاد، نه کمیه طیف داریم برای انتزاع: از خیلی کم (که نزدیک به پیاده‌سازی واقعی هست و جزئیات زیاد لو می‌ره) تا خیلی زیاد (که مبهم و کلی می‌شه). سطح درست وسط نیست همیشه، بستگی به نیاز داره. مثلاً اگه انتزاع زیادی بسازی، نمی‌دونی چی کار می‌کنی، همه چیز نامفهوم می‌شه. اگه کم باشه، پیچیدگی‌های پشت صحنه لو می‌ره و فایده‌ای نداره.هدف انتزاع اینه که پیچیدگی‌ها رو پنهان کنه، اما یه رابط کاربری مفید و کارآمد بده. مثلاً توی ذخیره‌سازی داده، اگه از کلماتی مثل &quot;ذخیره‌سازی&quot; استفاده کنی به جای &quot;دیتابیس&quot;، ممکنه مبهم بشه مگر اینکه نیاز واقعی برنامه‌ت باشه. اگه تیم‌تون می‌دونه که ممکنه از دیتابیس، کش یا ذخیره‌سازی ابری استفاده کنه، اون وقت این سطح انتزاع خوبه. اما اگه فقط برای آینده خیالی باشه، هزینه‌ش زیاده: مردم گیج می‌شن و سیستم سخت فهم می‌شه.نشتی انتزاع (Leaky Abstraction) چیه؟یکی از مشکلات رایج، نشتی انتزاعه. یعنی جزئیات پیاده‌سازی لو می‌ره و کاربر مجبور می‌شه بدونتشون. مثلاً اگه یه لایه انتزاعی برای دیتابیس بسازی، اما کاربر باید بدونه که پشتش Cosmos DB هست یا SQL Server، این نشتی داره. یه انتزاع خوب باید مثل جعبه سیاه باشه: ندونی داخلش چیه، فقط بدونی کار می‌کنه.مثال از کد: لایه انتزاعی برای Cosmos DBبیایم یه مثال واقعی بزنم. فرض کن یه کلاس داریم به اسم CosmosDbGateway که یه لایه انتزاعی برای ذخیره‌سازی داده‌هاست. اما توجه کنید، امضای متدها نباید نشون بده که Cosmos DB هست. باید عمومی باشه، انگار می‌تونه هر چیزی باشه: دیتابیس، فایل سیستم یا حافظه.اینجا یه کد نمونه از کلاس عمومی (interface یا abstract class):public interface IDataGateway
{
Task CreateRecordAsync(VideoModel video); // ایجاد رکورد جدید
Task&lt;VideoModel&gt; GetVideoByIdAsync(string id); // گرفتن ویدیو بر اساس ID
Task UpdateVideoAsync(VideoModel video); // بروزرسانی ویدیو
Task&lt;List&lt;VideoModel&gt;&gt; GetVideosByTagAsync(string tag); // گرفتن ویدیوها بر اساس تگ
}حالا پیاده‌سازی‌ش با Cosmos DB (این جزئیات پشت صحنه‌ست و کاربر نباید بدونه):using Microsoft.Azure.Cosmos;
using System.Collections.Generic;
using System.Threading.Tasks;

public class CosmosDbGateway : IDataGateway
{
    private readonly CosmosClient _cosmosClient;
    private readonly Database _database;
    private readonly Container _container;

    public CosmosDbGateway(CosmosClient cosmosClient)
    {
        _cosmosClient = cosmosClient;
        _database = cosmosClient.GetDatabase(&quot;MyDatabase&quot;);
        _container = _database.GetContainer(&quot;VideosContainer&quot;);
    }

    public async Task CreateRecordAsync(VideoModel video)
    {
        await _container.CreateItemAsync(video, new PartitionKey(video.Id));
    }

    public async Task&lt;VideoModel&gt; GetVideoByIdAsync(string id)
    {
        ItemResponse&lt;VideoModel&gt; response = await _container.ReadItemAsync&lt;VideoModel&gt;(id, new PartitionKey(id));
        return response.Resource;
    }

    public async Task UpdateVideoAsync(VideoModel video)
    {
        await _container.UpsertItemAsync(video, new PartitionKey(video.Id));
    }

    public async Task&lt;List&lt;VideoModel&gt;&gt; GetVideosByTagAsync(string tag)
    {
        var query = new QueryDefinition(&quot;SELECT * FROM c WHERE ARRAY_CONTAINS(c.Tags, @tag)&quot;)
            .WithParameter(&quot;@tag&quot;, tag);

        FeedIterator&lt;VideoModel&gt; iterator = _container.GetItemQueryIterator&lt;VideoModel&gt;(query);
        List&lt;VideoModel&gt; results = new List&lt;VideoModel&gt;();

        while (iterator.HasMoreResults)
        {
            FeedResponse&lt;VideoModel&gt; response = await iterator.ReadNextAsync();
            results.AddRange(response);
        }

        return results;
    }
}
می‌بینید؟ کاربر فقط متدهایی مثل CreateRecord یا GetVideosByTag رو می‌بینه و فراخوانی می‌کنه. نمی‌دونه پشتش Cosmos DB هست، iteratorها یا queryها چیه. این انتزاع تمیزه چون جزئیات لو نمی‌ره. اگه بخوام پیاده‌سازی رو عوض کنم به SQL Server یا حافظه، امضا تغییر نمی‌کنه.مثال از Message Brokers و اشاره به گیت‌هابحالا بیایم سراغ message brokers. توی سیستم‌های pub-sub (انتشار-اشتراک)، بعضی برنامه‌ها فقط منتشر می‌کنن (publish)، بعضی فقط مشترک می‌شن (subscribe)، و بعضی هر دو. سطح انتزاع باید مناسب باشه. مثلاً برای برنامه‌ای که فقط publish می‌کنه، لازم نیست بدونه subscribe چیه.توی ریپازیتوری گیت‌هابم (https://github.com/matlus/Adapter-Design-Pattern-Message-Brokers)، من الگوی Adapter Design Pattern رو برای message brokers نشون دادم. این الگو کمک می‌کنه از RabbitMQ برای تست محلی Azure Service Bus استفاده کنید، بدون اینکه کد اصلی تغییر کنه. مثلاً یه adapter بسازید که RabbitMQ رو مثل Service Bus رفتار کنه.یه کد نمونه ساده برای publisher:using System.Text;
using System.Threading.Tasks;
using Azure.Messaging.ServiceBus;
using RabbitMQ.Client;

public interface IPublisher
{
    Task PublishMessageAsync(string topic, string message);
}

public class ServiceBusPublisher : IPublisher
{
    private readonly ServiceBusClient _client;

    // پیاده‌سازی با Azure Service Bus
    public Task PublishMessageAsync(string topic, string message)
    {
        // Implementation would go here
        throw new System.NotImplementedException();
    }
}

public class RabbitMqAdapter : IPublisher
{
    private readonly IConnection _connection;

    public RabbitMqAdapter(IConnection connection)
    {
        _connection = connection;
    }

    // پیاده‌سازی با RabbitMQ به عنوان adapter
    public async Task PublishMessageAsync(string topic, string message)
    {
        using var channel = _connection.CreateModel();
        channel.ExchangeDeclare(topic, &quot;fanout&quot;);
        channel.BasicPublish(topic, &quot;&quot;, null, Encoding.UTF8.GetBytes(message));
        await Task.CompletedTask;
    }
}اینجا، adapter اجازه می‌ده از RabbitMQ محلی برای تست استفاده کنید، اما کد اصلی فکر می‌کنه با Service Bus کار می‌کنه. این یه انتزاع خوبه چون جزئیات broker لو نمی‌ره. برای جزئیات بیشتر، ویدیوهای توی ریپو رو ببینید: معرفی Message Brokers، شروع با RabbitMQ و Azure Service Bus.قانون سوم‌ها: کی انتزاع بسازیم؟عجله نکنید برای ساخت انتزاع. اگه کد رو سه بار کپی-پیست کردید، اون وقت فکر کنید به کلی کردنش. پارامترهای زیاد (مخصوصاً بولی) اضافه نکنید، چون متد رو مبهم می‌کنه. مثلاً یه متد ساده بسازید، نه یه کارخانه همه‌کاره.نتیجه‌گیریانتزاع خوب سطح مناسبی داره، جزئیات لازم حوزه کاری رو حفظ می‌کنه، و مثل جعبه سیاه کار می‌کنه. برای برنامه خودتون بسازید، نه برای آینده خیالی. اگه این مقاله کمک کرد، لایک بدید و ویدیو رو ببینید. دفعه بعد درباره کی و چطور انتزاع بسازیم حرف می‌زنیم. موفق باشید!</description>
                <category>محمدسجاد دباغ</category>
                <author>محمدسجاد دباغ</author>
                <pubDate>Tue, 12 Aug 2025 15:33:30 +0330</pubDate>
            </item>
                    <item>
                <title>جدول برنامه ریزی هدفگذاری هفتگی و روزانه</title>
                <link>https://virgool.io/@msdabbagh/%D8%AC%D8%AF%D9%88%D9%84-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D8%B1%DB%8C%D8%B2%DB%8C-%D9%87%D8%AF%D9%81%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C-%D9%87%D9%81%D8%AA%DA%AF%DB%8C-%D9%88-%D8%B1%D9%88%D8%B2%D8%A7%D9%86%D9%87-wyfpbghte2s4</link>
                <description>سلام دوستان!این فایلی هست که خودم باهاش کار میکنم.هم میشه برای هر هفته یک برگ چاپ کرد و هم یک فایل ایجاد کرد تا با ورد به صورت روزانه تکمیل کنید.تصویر فایل جدول برنامه ریزی هدفگزاریو برای اینکه بدونید چطور باید تکمیل کنید تصویر زیر رو آماده کردم.با دقت بررسی کنید.نمونه پرشده جدول برنامه ریزی هدفگزاریو در آخر فایل pdf و word تقدیم شمادانلود فایل word و دانلود فایل pdfحتما نظرات و سوالات خودتون رو کامنت کنید</description>
                <category>محمدسجاد دباغ</category>
                <author>محمدسجاد دباغ</author>
                <pubDate>Tue, 16 Mar 2021 22:15:13 +0330</pubDate>
            </item>
                    <item>
                <title>تقویم شمسی ری اكت و اعتبارسنجی فرم</title>
                <link>https://virgool.io/iran-react-community/%D8%AA%D9%82%D9%88%D9%8A%D9%85-%D8%B4%D9%85%D8%B3%DB%8C-%D8%B1%D9%8A%D8%A7%D9%83%D8%AA-%D9%88-%D8%A7%D8%B9%D8%AA%D8%A8%D8%A7%D8%B1%D8%B3%D9%86%D8%AC%D9%8A-%D9%81%D8%B1%D9%85-fo8vlft8stgi</link>
                <description>سلام دوستانحدود چند روزی در گیر این بودم که چطور در ریاکت از تقویم شمسی استفاده کنم، راه حل ساده بود اما مشکل از اون جایی به وجود اومد که نیاز بود فیلد اجباری باشه.خوب راه حل ساده تقویم شمسی ، استفاده از Date Picker هست که خیلی از پکیج هارو تست کردم اما... قبل از این مبحث بزارید فیلد اجباری رو بگم.برای فیلد اجباری از react hook form استفاده کردم که واقعا عالی هست.روش استفاده به شکل زیر هست?import React , {useState , useEffect} from &#039;react&#039;;
import { useForm } from &amp;quotreact-hook-form&amp;quot

function Main(){
const { register , handleSubmit, errors } = useForm();
const errorsMassage = &lt;p className=&amp;quoterrors-massage&amp;quot&gt;اطلاعات را وارد نمایید&lt;/p&gt;
const  = data =&gt; {
const token = localStorage.getItem(&amp;quottoken&amp;quot)
addSkillData({
newItem:  {
&amp;quottitle&amp;quot : data.title,
&amp;quotexpense&amp;quot : data.expense,
&amp;quotstartDate&amp;quot : data.startDate,
},
config : {
headers : {
&amp;quotAuthorization&amp;quot : `Bearer ${token}
}}})};

return (&lt;&gt;
&lt;form ={handleSubmit()}&gt;
&lt;div className=&amp;quotform-group col-lg-4 col-md-12&amp;quot&gt;
&lt;label className=&amp;quotmr-1&amp;quot htmlFor=&amp;quot&amp;quot&gt;عنوان&lt;/label&gt;
&lt;input className=&amp;quotform-control&amp;quot id=&amp;quotaddskill-title&amp;quot
name=&amp;quottitle&amp;quot ref={register({ required: true })} /&gt;
{errors.title &amp;&amp; errorsMassage}
&lt;/div&gt;
&lt;div className=&amp;quotform-group col-lg-4 col-md-12&amp;quot&gt;
&lt;label className=&amp;quotmr-1&amp;quot htmlFor=&amp;quot&amp;quot&gt;میزان هزینه&lt;/label&gt;
&lt;input type=&amp;quottext&amp;quot className=&amp;quotform-control&amp;quot id=&amp;quotaddskill-expense&amp;quot
name=&amp;quotexpense&amp;quot ref={register({ required: true })} /&gt;
{errors.expense &amp;&amp; errorsMassage}
&lt;/div&gt;
&lt;div className=&amp;quotform-group col-lg-4 col-md-12&amp;quot&gt;
&lt;label className=&amp;quotmr-1&amp;quot htmlFor=&amp;quot&amp;quot&gt;تاریخ شروع&lt;/label&gt;
&lt;input type=&amp;quotdate&amp;quot className=&amp;quotform-control&amp;quot id=&amp;quotaddskill-start-date&amp;quot
name=&amp;quotstartDate&amp;quot ref={register({ required: true })} /&gt;
{errors.startDate &amp;&amp; errorsMassage}
&lt;/div&gt;
&lt;input className=&amp;quotbtn btn-primary btn-user btn-block&amp;quot type=&amp;quotsubmit&amp;quot value=&amp;quotثبت&amp;quot /&gt;
&lt;/form&gt;
&lt;/&gt;
)}خوب در بالا همان طور که می‌بینید در هر input از اتریبیوتی به نام ref استفاده کرده تا مقادیر را علاوه بر ارسال به استیت، اعتبار سنجی هم کنه و در نهایت مقادیر در تابع  که به handleSubmit در تگ اصلی فرم در دسترس ما هستند.حالا من در همین شرایط از دیتا پیکر استفاده کردم مثل زیر ?import React , {useState , useEffect} from &#039;react&#039;;
import { useForm } from &amp;quotreact-hook-form&amp;quot
import { DatePicker } from &amp;quotdavood-react-persian-datepicker&amp;quot

function Main(){
const { register , handleSubmit, errors } = useForm();
const errorsMassage = &lt;p className=&amp;quoterrors-massage&amp;quot&gt;اطلاعات را وارد نمایید&lt;/p&gt;
const  = data =&gt; {
const token = localStorage.getItem(&amp;quottoken&amp;quot)
addSkillData({
newItem:  {
&amp;quottitle&amp;quot : data.title,
&amp;quotexpense&amp;quot : data.expense,
&amp;quotstartDate&amp;quot : data.startDate,
},
config : {
headers : {
&amp;quotAuthorization&amp;quot : `Bearer ${token}`
}
}})};

return (&lt;&gt;
&lt;form ={handleSubmit()}&gt;
&lt;div className=&amp;quotform-group col-lg-4 col-md-12&amp;quot&gt;
&lt;label className=&amp;quotmr-1&amp;quot htmlFor=&amp;quot&amp;quot&gt;عنوان&lt;/label&gt;
&lt;input className=&amp;quotform-control&amp;quot id=&amp;quotaddskill-title&amp;quot
name=&amp;quottitle&amp;quot ref={register({ required: true })} /&gt;
{errors.title &amp;&amp; errorsMassage}
&lt;/div&gt;
&lt;div className=&amp;quotform-group col-lg-4 col-md-12&amp;quot&gt;
&lt;label className=&amp;quotmr-1&amp;quot htmlFor=&amp;quot&amp;quot&gt;میزان هزینه&lt;/label&gt;
&lt;input type=&amp;quottext&amp;quot className=&amp;quotform-control&amp;quot id=&amp;quotaddskill-expense&amp;quot
name=&amp;quotexpense&amp;quot ref={register({ required: true })} /&gt;
{errors.expense &amp;&amp; errorsMassage}
&lt;/div&gt;
&lt;div className=&amp;quotform-group col-lg-4 col-md-12&amp;quot&gt;
&lt;label className=&amp;quotmr-1&amp;quot htmlFor=&amp;quot&amp;quot&gt;تاریخ شروع&lt;/label&gt;
&lt;input type=&amp;quothidden&amp;quot className=&amp;quotform-control&amp;quot id=&amp;quotaddskill-start-date&amp;quot
name=&amp;quotstartDate&amp;quot ref={register({ required: true })} /&gt;
&lt;DatePicker /&gt;
{errors.startDate &amp;&amp; errorsMassage}
&lt;/div&gt;
&lt;input className=&amp;quotbtn btn-primary btn-user btn-block&amp;quot type=&amp;quotsubmit&amp;quot value=&amp;quotثبت&amp;quot /&gt;
&lt;/form&gt;
&lt;/&gt;
)}همان طور که مشخص هست ، سعی داشتم input تاریخ میلادی را hidden کنم و تاریخ خروجی DatePicker  را به value اینپوت پاس بدم که موفق هم شدم ( بدون استفاده از queryselector ) اما دیگه ref اجرا نمیشد و ارور عمل نمیکرد.اینجا بود که یکم کلافه شدم و با پرس و جو چند روزه ای که داشتم به یک جواب بسیار شیک رسیدم.ما در react-hook-form یک متد داریم به نام Controller که اگر در جایی امکان استفاده مستقیم خود input نبود یا ref در دسترس نبود میشه ازش استفاده کرد.روش استفاده به شکل زیر هست ?import React , {useState , useEffect} from &#039;react&#039;;
import { useForm , Controller } from &amp;quotreact-hook-form&amp;quot
import { DatePicker } from &amp;quotdavood-react-persian-datepicker&amp;quot

function Main(){
const { register , handleSubmit, errors , control } = useForm();
const errorsMassage = &lt;p className=&amp;quoterrors-massage&amp;quot&gt;اطلاعات را وارد نمایید&lt;/p&gt;
const  = data =&gt; {
const token = localStorage.getItem(&amp;quottoken&amp;quot)
let date = moment(data.startDate).format(&#039;YYYY/M/D&#039;)
addSkillData({
newItem:  {
&amp;quottitle&amp;quot : data.title,
&amp;quotexpense&amp;quot : data.expense,
&amp;quotstartDate&amp;quot : date,
},
config : {
headers : {
&amp;quotAuthorization&amp;quot : `Bearer ${token}`
}
}})};

return (&lt;&gt;
&lt;form ={handleSubmit()}&gt;
&lt;div className=&amp;quotform-group col-lg-4 col-md-12&amp;quot&gt;
&lt;label className=&amp;quotmr-1&amp;quot htmlFor=&amp;quot&amp;quot&gt;عنوان&lt;/label&gt;
&lt;input className=&amp;quotform-control&amp;quot id=&amp;quotaddskill-title&amp;quot
name=&amp;quottitle&amp;quot ref={register({ required: true })} /&gt;
{errors.title &amp;&amp; errorsMassage}
&lt;/div&gt;
&lt;div className=&amp;quotform-group col-lg-4 col-md-12&amp;quot&gt;
&lt;label className=&amp;quotmr-1&amp;quot htmlFor=&amp;quot&amp;quot&gt;میزان هزینه&lt;/label&gt;
&lt;input type=&amp;quottext&amp;quot className=&amp;quotform-control&amp;quot id=&amp;quotaddskill-expense&amp;quot
name=&amp;quotexpense&amp;quot ref={register({ required: true })} /&gt;
{errors.expense &amp;&amp; errorsMassage}
&lt;/div&gt;
&lt;div className=&amp;quotform-group col-lg-4 col-md-12&amp;quot&gt;
&lt;label className=&amp;quotmr-1&amp;quot htmlFor=&amp;quot&amp;quot&gt;تاریخ شروع&lt;/label&gt;
&lt;Controller
control={control}
name=&amp;quotstartDate&amp;quot
rules={{ required: true }}
defaultValue={moment(skillEditingData.startDate)}
render={({on4Change, on5Blur, va6lue }) =&gt; (
&lt;DatePicker
calendarStyles={styles}
inputFormat=&amp;quotjYYYY/jM/jD&amp;quot
v1alue={va4lue}
o2nBlur={on6Blur}
o3nChange={on5Change}
/&gt;
)}
/&gt;
{errors.startDate &amp;&amp; errorsMassage}
&lt;/div&gt;
&lt;input className=&amp;quotbtn btn-primary btn-user btn-block&amp;quot type=&amp;quotsubmit&amp;quot value=&amp;quotثبت&amp;quot /&gt;
&lt;/form&gt;
&lt;/&gt;
)}در 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(&#039;YYYY/M/D&#039;) //میلادی
let dateJalali = moment(data.startDate).format(&#039;jYYYY/jM/jD&#039;) //شمسیامیدوارم مورد استفاده قرار گرفته باشهسوالی داشتید حتما بپرسید</description>
                <category>محمدسجاد دباغ</category>
                <author>محمدسجاد دباغ</author>
                <pubDate>Mon, 27 Jul 2020 14:22:09 +0430</pubDate>
            </item>
            </channel>
</rss>