Динамически форматировать строку с помощью регулярного выражения

Question

У меня есть ввод даты (строка), который я пытаюсь отформатировать, поэтому, когда я отправляю его в БД, он имеет правильный формат. Мне нужен формат ДД-ММ-ГГГГ.
В идеале я хочу добавлять '-' динамически, когда код достигает соответствующих точек ie после ДД и ММ. Мой текущий код:

    const formattedDate = date.replace(
      /^(\d{2})(\d{0,2})(\d{0,4})/,
      `$1-$2-$3`,
    );

Он отлично работает, когда я ввожу числа, но когда я пытаюсь вернуть его назад, он go не проходит мимо первого '-'.
Я понимаю, почему это происходит это (мое регулярное выражение добавляет '-' каждый раз при изменении строки), но я не могу найти решение.

const [expiry, setExpiry] = useState<string>();

const formatValue = () => {
      /^(\d{2})(\d{0,2})(\d{0,4})/,
    `$1-$2-$3`,
  );
  setExpiry(formattedDate);
}

<TextInput value={expiry} onChange={formatValue} />

Примеры входных и выходных данных:

input0 - '2'
output0 - '2'
input1 - '22'
output1 - '22-'
input2 - '220'
output2 - '22-0'
etc

finalInput - '22022022'
finalOutput - '22-02-2022'

Answer 1

Обратите внимание, что ваш onChange также будет иметь тире. Так что просто удалите ненужные - перед применением регулярного выражения, а также удалите ненужные - при установке состояния

Здесь находится рабочая копия вашего кода

Вот так

export default function App() {
  const [expiry, setExpiry] = useState();

  const formatValue = e => {
    const val = e.target.value.replace(/-/gi, "");
    const formattedDate = val.replace(/^(\d{2})(\d{0,2})(\d{0,4})/, `$1-$2-$3`);
    setExpiry(formattedDate.replace(/-$|--$/gi, ""));
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input value={expiry} onChange={formatValue} />
    </div>
  );
}