Почему в MUI DateTimePicker появляются невидимые символы

Содержание

• Краткое объяснение
• Какие символы добавляются?
• Почему они мешают dayjs
• Как исправить
• Вариант: использовать объект даты напрямую

Краткое объяснение

MUI X всегда вставляет невидимые Unicode-символы для поддержки RTL внутри базового <TextField>.
Эти символы “протекают” в строковое значение, которое вы получаете из пикера, поэтому строка не является чистым представлением даты.
dayjs не может разобрать строку, содержащую эти символы, поэтому dayjs(value).unix() возвращает null.

Какие символы добавляются?

Эти метки невидимы для глаза, но являются частью строки, которую предоставляет пикер.
Смотрите документацию MUI X: Field components add Unicode characters for RTL.

Почему они мешают dayjs

dayjs ожидает чистую строку в известном формате (например, "MM/DD/YYYY HH:mm").
Когда строка содержит любые из указанных выше меток, парсер не может сопоставить токены формата и возвращает undefined, который .unix() затем превращает в null.
Таким образом:

const raw = 'PM⁩ ⁦01:22⁦ ⁦11/29/2025'; // содержит U+2069, U+2068
dayjs(raw).unix(); // → null

Как исправить

1. Удалить все невидимые символы перед парсингом

function stripInvisible(str: string): string {
  // Убираем все символы вида U+2066‑U+2069, U+200E‑U+200F и т.д.
  return str.replace(/[\u200E\u200F\u202A-\u202E\u2066-\u2069]/g, '');
}

const cleaned = stripInvisible(value); // → 'PM 01:22 11/29/2025'
const timestamp = dayjs(cleaned).unix(); // теперь работает

2. Использовать value как объект даты

Если вы передаёте value в компонент как объект dayjs или Date, то не нужно парсить строку:

const [value, setValue] = useState(dayjs());

<DateTimePicker
  value={value}
  onChange={(newValue) => setValue(newValue)}
  // …
/>

const timestamp = value.unix(); // или dayjs(value).unix()

Поскольку в onChange вы сразу получаете объект, а не строку, проблем с невидимыми символами не будет.

3. Конфигурировать формат вывода

Если вы всё же хотите работать со строкой, можно задать inputFormat без символов, которые вызывают проблемы:

<DateTimePicker
  inputFormat="MM/DD/YYYY HH:mm"
  // …
/>

Но это не решит проблему с невидимыми маркерами; они всё равно останутся в value, если вы не очистите их.

Объект даты напрямую

Самый надёжный способ – не использовать строку.
Передавайте и получайте value как объект даты (dayjs, Date, Luxon, …).
MUI X возвращает объект, а не строку, если вы используете onChange:

<DateTimePicker
  value={value}
  onChange={(newValue) => setValue(newValue)}
  // …
/>

const timestamp = dayjs(value).unix(); // безопасно

Итоги

• MUI X добавляет невидимые символы для RTL‑поддержки; они остаются в строковом значении поля.
• Эти символы ломают парсинг dayjs, поэтому unix() возвращает null.
• Решения: очистить строку от невидимых символов, использовать объект даты напрямую, либо изменить формат вывода.

Если вам нужен только Unix‑таймстамп, лучше хранить значение как объект даты и преобразовывать его в момент, когда это действительно требуется.