راکت

مشکل انتخاب تاریخ در کامپوننت antd-jalali

2 پاسخ

سلام و عرض ادب
من از کتابخانه antd-jalali برای انتخاب تاریخ شمسی استفاده میکنم
برای انتخاب تاریخ پیش فرض موقع لود فرم از کد

defaultValue={dayjs(obj.datefa, { jalali: true })}

استفاده میکنم.مشکل این حالت اینه که اگه بیام satate مورد نظر را مقدار دهی کنم ، توی دیت پیکر تغییر نمیکنه
این مشکل با تغییر به

   value={dayjs(obj.datefa, { jalali: true })}

حل میشه.ولی مشکلی که پیش میاد ، هر تاریخی که انتخاب میکنم ، یک ماه ازش کم میکنه

لطفا راهنمائید بفرمائید

ثبت پرسش جدید

پاسخ‌ها

2
Amin
Amin
@Hephaestus

تخصص: علاقه مند به برنامه نویسی

سلام جناب آقای اذری پور عزیز😊


مشکل شما احتمالاً به دلیل تنظیم نادرست تاریخ شمسی در antd-jalali است. برای رفع آن، مراحل زیر را دنبال کنید:

  1. استفاده از value به جای defaultValue:
    برای کنترل مقدار DatePicker، حتماً از value استفاده کنید.

  2. تنظیم صحیح dayjs با پلاگین جلالی:
    مطمئن شوید dayjs با پلاگین جلالی و locale فارسی تنظیم شده است.

  3. مثال کد:

    import dayjs from 'dayjs';
    import jalaliPlugin from 'dayjs/plugin/jalaliPlugin';
    import 'dayjs/locale/fa';
    
    dayjs.extend(jalaliPlugin);
    dayjs.locale('fa');
    
    const MyDatePicker = ({ obj }) => {
     const [selectedDate, setSelectedDate] = React.useState(dayjs(obj.datefa, { jalali: true }));
    
     const handleDateChange = (date) => {
       setSelectedDate(date);
     };
    
     return (
       <DatePicker
         value={selectedDate}
         onChange={handleDateChange}
         jalali={true}
       />
     );
    };
  4. بررسی فرمت تاریخ:
    اگر obj.datefa رشته است، مطمئن شوید فرمت آن با dayjs سازگار است (مثلاً YYYY/MM/DD).


با این تنظیمات، مشکل کاهش یک ماه از تاریخ باید حل شود. اگر سوال دیگری داشتید، خوشحال می‌شم کمک کنم! 😊

رسول آذری پور
رسول آذری پور
@rasoulazary

ممنون از پاسختون ولی مشکلم حل نشد

لطفا این کد را ببینید:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { DatePicker, ConfigProvider } from "antd";
import fa_IR from "antd/lib/locale/fa_IR";
import dayjs from "dayjs";
import { DatePicker as DatePickerJalali, Calendar as CalendarJalali, useJalaliLocaleListener } from "antd-jalali";
import { Fragment } from "react";
import jalaliPlugin from "@zoomit/dayjs-jalali-plugin";

const Optometri = () => {
  const [datefa, setdatefa] = useState("1403/08/09");
  useJalaliLocaleListener();
  //dayjs.extend(jalaliPlugin);
  //dayjs.locale("fa");
  dayjs.calendar("jalali");

  return (
    <ConfigProvider locale={fa_IR} direction="rtl">
      <Fragment>
        <DatePickerJalali
          value={dayjs(datefa, { jalali: true })}
          onChange={(val) => {
            setdatefa(val.$jy + "-" + val.$jM + "-" + val.$jD);
          }}
        />
      </Fragment>
    </ConfigProvider>
  );
};

export default Optometri;

کتابخانه jalaliPlugin که شما معرفی کردین را پیدا نکردم.به جاش از @zoomit/dayjs-jalali-plugin استفاده کردم که اگه فعالش کنم تاریخ میلادی میشه
دقیقا طبق راهنمای خود سایت npm انجام دادم

شاید پاسخ شما همین‌جا باشد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام