Как исправить ошибку даты 'Invalid date' на IOS?

Question

[Roman Prokopets]

Подскажите пожалуйста как исправить следующую ошибку, есть дата, которая приходит от бэка, в формате '2021-11-24 20:17:39', я ее преобразую в Nov 24, 2021 используя сначала такую функцию

const getDate = (myDate) =>  
   new Date(myDate).toLocaleDateString(navigator.language, {
   month: 'short',
   day: 'numeric',
   year: 'numeric', 
})

На ПК все работает нормально, но на IOS получаю 'Invalid date' вместо даты.
После чего было найдено решение с помощью date-fns

import { intlFormat } from 'date-fns';

    const getDate = (date) => {
       const userLocale =
       navigator.languages && navigator.languages.length
         ? navigator.languages[0]
         : navigator.language;
    return intlFormat(
       new Date(date),
      {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
      },
     {
        locale: userLocale,
     }
   );
 };

В следствии на ПК все продолжает работать без изменений, но на IOS страница с датой крашится
Вопрос, как мне привести дату к виду Nov 24, 2021 с учетом предпочтений языка браузера юзера?

Answer 1

[Максим Морев]

приходит от бэка, в формате '2021-11-24 20:17:39'

Пробел на T замените, оно у вас падает ещё на этапе new Date('2021-11-24 20:17:39')

Comments

[Roman Prokopets]

в какой момент?

[Максим Морев]

new Date('2021-11-24 20:17:39') - это `Invalid date` в iOS
new Date('2021-11-24T20:17:39') - это корректный вариант

[Roman Prokopets]

Максим Морев, имеете ввиду с бэка?

[Максим Морев]

Roman Prokopets, имеете доступ к бэку - сделайте на бэке. Не имеете доступа / долго / сложно - сделайте сами.
date.replace(' ', 'T')

Answer 2

[Александр]

import { parse, format } from 'date-fns';

const getDate = (date) => format(
    parse(date, 'yyyy-MM-dd HH:mm:ss', new Date()),
    'MMM dd, yyyy'
);

Comments

[Roman Prokopets]

а как сюда locale передать? пытаюсь подсунуть navigator.language, 3-м параметром, ругается, что не Locale type.
p.s.

export const getDate = (date) => {
  const userLocale =
    navigator.languages && navigator.languages.length
      ? navigator.languages[0]
      : navigator.language;

  return format(
    parse(date, 'yyyy-MM-dd HH:mm:ss', new Date()),
    'MMM dd, yyyy',
     { locale: userLocale }

  );
};

[Александр]

Roman Prokopets, https://date-fns.org/v2.28.0/docs/I18n

[Roman Prokopets]

Александр, это я находил, а есть ли способ со считыванием языка браузера? Например я подтяну русский, немецкий, а юзер будет из Франции, тогда у него будет дефолтное значение, как я понимаю. Как сделать универсальный локейл? (как navigator.language)

[Александр]

Roman Prokopets, Возможно как-то так https://codesandbox.io/s/qna-q-1164206-lck4e6?file.... Либо можно загружать все locale и искать по ключу в них.
import * as locales from 'date-fns/locale';

[Roman Prokopets]

Александр,
похоже это очень близко

[Александр]

Roman Prokopets, весь код в студию

[Roman Prokopets]

Александр,

import * as locales from 'date-fns/locale';

export const getLibraryCardAssetDate = (date: string) => {
  const userLocale =
    navigator.languages && navigator.languages.length
      ? navigator.languages[0]
      : navigator.language;
  return format(
    parse(date, 'yyyy-MM-dd HH:mm:ss', new Date()),
    'MMM dd, yyyy',
    { locale: locales[userLocale] }
  );
};

[Александр]

Roman Prokopets, не пойдет такой код, т.к. для русского lang = ru-RU, а в объекте будет просто ru. Плюс, Вы используете TypeScript, и userLocale будет string, а не ключом из locales, т.е. надо будет кастовать.

[Roman Prokopets]

Александр, ну насколько я понимаю, просто navigator.language тоже не валидно

[Александр]

Roman Prokopets, смотрели код, который я в пример привел? Там есть функция getPossibleLocaleKeys. Сами сможете переделать в работу с массивом?

[Roman Prokopets]

Александр, ну там ассинхроннщина, думаю оверкилл в моем случае, смотрел

[Александр]

Roman Prokopets, в getPossibleLocaleKeys просто создание возможных вариантов, без асинхронного кода. Просто Вам необходимо будет по таким вариантам найти локаль в объекте и если её нет, то использовать некоторую за стандартный вариант.