رسول آذری پور
3 ماه پیش توسط رسول آذری پور مطرح شد
2 پاسخ

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

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

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

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

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

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

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


ثبت پرسش جدید
Amin
تخصص : علاقه مند به برنامه نویسی
@Hephaestus 2 هفته پیش مطرح شد
0

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


مشکل شما احتمالاً به دلیل تنظیم نادرست تاریخ شمسی در 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 2 هفته پیش آپدیت شد
0

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

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

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 انجام دادم


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

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