اسلش در هنگام تایپ

[zahraMohammaddoust]

وقتی کاربر تاریخ و دستی تایپ میکنه قابلیتش و داره که اسلش خودکار بیفته؟

[Mr-Yavar]

1.

npm i react-text-mask --save

2.

import MaskedInput from "react-text-mask/dist/reactTextMask.js";

// تبدیل اعداد فارسی یا عربی به انگلیسی 
function toEnglishNumber(str) {
  const persianDigits = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
  const arabicDigits = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
  for (let i = 0; i < 10; ++i) {
    str = str.replace(persianDigits[i], i).replace(arabicDigits[i], i);
  }
  return str;
}

// کامپوننت ورود تاریخ
export function DateMaskInput({
  value,
  handleValueChange,
  openCalendar,
  mask = [/\d/, /\d/, /\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/],
}) {
  return (
    <MaskedInput
      mask={mask}
      format="yyyy/mm/dd"
      inputMode="numeric"
      onFocus={openCalendar}
      value={toEnglishNumber(value.toString())}
      placeholderChar={"-"}
      showMask
      onChange={(e) => {
        let [year, month, day] = e.target.value.split("/");

        e.target.value = `${year}/${month}/${day}`;

        handleValueChange(e);
      }}
    />
  );
}

3.

 <DatePicker render={<DateMaskInput />} ... />