date-fns/locale#enUS JavaScript Examples

function toSliderStringShort(date, currentLanguage) {
  let isoLanguage = currentLanguage;
  if (currentLanguage !== undefined) {
    isoLanguage = currentLanguage.replace('-', '');
    if (isoLanguage === 'ar') isoLanguage = 'arSA';
    if (isoLanguage === 'zhHK') isoLanguage = 'zhTW';
    if (languages[isoLanguage] === undefined || languages[isoLanguage] === null) {
      isoLanguage = currentLanguage.split('-')[0];
      if (languages[isoLanguage] === undefined || languages[isoLanguage] === null) {
        isoLanguage = 'enUS';
      }
    }
  } else {
    isoLanguage = 'enUS';
  }
  return format(date, 'dd MMM', {
    locale: languages ? languages[isoLanguage] : enUS,
  });
}

function toSliderString(date, currentLanguage) {
  let isoLanguage = currentLanguage;
  if (currentLanguage) {
    isoLanguage = currentLanguage.replace('-', '');
    if (isoLanguage === 'ar') isoLanguage = 'arSA';
    if (isoLanguage === 'zhHK') isoLanguage = 'zhTW';
    if (languages[isoLanguage] === undefined || languages[isoLanguage] === null) {
      isoLanguage = currentLanguage.split('-')[0];
      if (languages[isoLanguage] === undefined || languages[isoLanguage] === null) {
        isoLanguage = 'enUS';
      }
    }
  } else {
    isoLanguage = 'enUS';
  }
  return format(date, 'dd MMMM yyyy', {
    locale: languages ? languages[isoLanguage] : enUS,
  });
}

export default function LocalesExample() {
  const [date, setDate] = useState()

  return (
    <Example code={code}>
      <p>US English:</p>

      <DatePicker date={date} onDateChange={setDate} locale={enUS}>
        {({ inputProps, focused }) => <input className={'input' + (focused ? ' -focused' : '')} {...inputProps} />}
      </DatePicker>

      <br />

      <p>Spanish:</p>

      <DatePicker date={date} onDateChange={setDate} locale={es} format='dd/MM/yyyy'>
        {({ inputProps, focused }) => (
          <input className={'input' + (focused ? ' -focused' : '')} {...inputProps} />
        )}
      </DatePicker>
    </Example>
  )
}

LOCALES = {
  en: enUS,
  ja: ja,
  es: es,
  de: de,
  pt: ptBR,
  fr: fr,
  id: id,
  ph: fil,
  pl: pl,
  it: it,
  fi: fi,
  cs: cs,
  bn: bn,
  hi: hi,
  uk: uk,
  zh: zhTW,
  ar: ar,
  ru: ru,
  th: th,
  fa: faIR,
  tr: tr,
  np: np,
}

locales = [enUS, es]

export function getLocale() {
    return dateLocales(globalize.getCurrentLocale()) || dateLocales(globalize.getCurrentLocale().replace(/-.*/, '')) || enUS;
}

dateLocales = (locale) => ({
    'af': af,
    'ar': arDZ,
    'be-by': be,
    'bg-bg': bg,
    'bn': bn,
    'ca': ca,
    'cs': cs,
    'cy': cy,
    'da': da,
    'de': de,
    'el': el,
    'en-gb': enGB,
    'en-us': enUS,
    'eo': eo,
    'es': es,
    'es-ar': es,
    'es-do': es,
    'es-mx': es,
    'et': et,
    'fa': faIR,
    'fi': fi,
    'fr': fr,
    'fr-ca': frCA,
    'gl': gl,
    'gsw': de,
    'he': he,
    'hi-in': hi,
    'hr': hr,
    'hu': hu,
    'id': id,
    'is': is,
    'it': it,
    'ja': ja,
    'kk': kk,
    'ko': ko,
    'lt-lt': lt,
    'lv': lv,
    'ms': ms,
    'nb': nb,
    'nl': nl,
    'nn': nn,
    'pl': pl,
    'pt': pt,
    'pt-br': ptBR,
    'pt-pt': pt,
    'ro': ro,
    'ru': ru,
    'sk': sk,
    'sl-si': sl,
    'sv': sv,
    'ta': ta,
    'th': th,
    'tr': tr,
    'uk': uk,
    'vi': vi,
    'zh-cn': zhCN,
    'zh-hk': zhCN,
    'zh-tw': zhTW
})[locale]

languageToLocale = {
  en: enUS,
  it
}

locales = { de, en: enUS }

dateFNSLocales = {
  English: enUS,
  繁體中文: zhCN,
  简体中文: zhTW,
  "Português (Brasil)": ptBR,
  日本語: ja,
}

export function getDateLocale(locale) {
  return languages[locale]?.dateLocale || enUS;
}

languages = {
  'ar-SA': { label: 'العربية', dateLocale: arSA, dir: 'rtl' },
  'zh-CN': { label: '中文', dateLocale: zhCN },
  'zh-TW': { label: '中文(繁體)', dateLocale: zhTW },
  'ca-ES': { label: 'Català', dateLocale: ca },
  'cs-CZ': { label: 'Čeština', dateLocale: cs },
  'da-DK': { label: 'Dansk', dateLocale: da },
  'de-DE': { label: 'Deutsch', dateLocale: de },
  'en-US': { label: 'English (US)', dateLocale: enUS },
  'en-GB': { label: 'English (UK)', dateLocale: enGB },
  'es-MX': { label: 'Español', dateLocale: es },
  'fa-IR': { label: 'فارسی', dateLocale: faIR, dir: 'rtl' },
  'fo-FO': { label: 'Føroyskt' },
  'fr-FR': { label: 'Français', dateLocale: fr },
  'ga-ES': { label: 'Galacian (Spain)', dateLocale: es },
  'el-GR': { label: 'Ελληνικά', dateLocale: el },
  'he-IL': { label: 'עברית', dateLocale: he },
  'hi-IN': { label: 'हिन्दी', dateLocale: hi },
  'hu-HU': { label: 'Hungarian', dateLocale: hu },
  'it-IT': { label: 'Italiano', dateLocale: it },
  'id-ID': { label: 'Bahasa Indonesia', dateLocale: id },
  'ja-JP': { label: '日本語', dateLocale: ja },
  'ko-KR': { label: '한국어', dateLocale: ko },
  'lt-LT': { label: 'Lietuvių', dateLocale: lt },
  'ms-MY': { label: 'Malay', dateLocale: ms },
  'mn-MN': { label: 'Монгол', dateLocale: mn },
  'nl-NL': { label: 'Nederlands', dateLocale: nl },
  'nb-NO': { label: 'Norsk Bokmål', dateLocale: nb },
  'pl-PL': { label: 'Polski', dateLocale: pl },
  'pt-PT': { label: 'Português', dateLocale: pt },
  'pt-BR': { label: 'Português do Brasil', dateLocale: ptBR },
  'ru-RU': { label: 'Русский', dateLocale: ru },
  'ro-RO': { label: 'Română', dateLocale: ro },
  'sk-SK': { label: 'Slovenčina', dateLocale: sk },
  'sl-SI': { label: 'Slovenščina', dateLocale: sl },
  'fi-FI': { label: 'Suomi', dateLocale: fi },
  'sv-SE': { label: 'Svenska', dateLocale: sv },
  'ta-IN': { label: 'தமிழ்', dateLocale: ta },
  'tr-TR': { label: 'Türkçe', dateLocale: tr },
  'uk-UA': { label: 'українська', dateLocale: uk },
  'ur-PK': { label: 'Urdu (Pakistan)', dateLocale: uk, dir: 'rtl' },
  'vi-VN': { label: 'Tiếng Việt', dateLocale: vi },
}

TimeSlider = (props) => {
  const dark = toBool(props.dark);
  const [currentDateValue, setCurrentDateValue] = useState(
    firstDayDefaultOffset,
  );

  const {
    currentSelectedDay,
    setCurrentSelectedDay,
    firstDay,
    lastDay,
    days,
    playerState,
    onPlayerStateToggle
  } = props;
  const [datePickerPosition, setDatePickerPosition] = useState('left');
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [currentSliderRange, setCurrentSliderRange] = useState([]);

  const currentRange = mobileRange;

  const dateRef = useRef();
  const range = useRef();
  const container = useRef();

  const toSliderString = (date, currentLanguage) => {
    let isoLanguage = 'enUS';
    if (currentLanguage) {
      isoLanguage = currentLanguage.replace('-', '');
      if (isoLanguage === 'ar') {
        isoLanguage = 'arSA';
      } else if (isoLanguage === 'zhHK') {
        isoLanguage = 'zhTW';
      }
    }
    if (
      languages[isoLanguage] === undefined ||
      languages[isoLanguage] === null
    ) {
      isoLanguage = currentLanguage.split('-')[0];
      if (
        languages[isoLanguage] === undefined ||
        languages[isoLanguage] === null
      ) {
        isoLanguage = 'enUS';
      }
    }
      return format(date, 'yyyy-MM-dd', {
      locale: languages ? languages[isoLanguage] : enUS,
    });
  };

  

  useEffect(() => {
    setCurrentSliderRange(days);
  }, [days]);
  const onSliderChange = (e) => {
    const sliderDOM = dateRef.current;
    const rangeDOM = range.current;
    const containerDOM = container.current;
    const newValue = e.target.value;
    const basicWidth = containerDOM.offsetWidth - rangeDOM.offsetWidth;
    const finalWidth = basicWidth / 2 - sliderDOM.offsetWidth / 4;
    const stepsWidth = rangeDOM.offsetWidth / currentRange;
    sliderDOM.style.left = `${finalWidth + stepsWidth * newValue}px`;
    setCurrentDateValue(newValue);
    const currentRangeDate =  new Date(currentSliderRange[0][parseInt(newValue)]);
    setCurrentSelectedDay(
      toSliderString(
        currentRangeDate,
        props.i18n.locale,
      ),
    );
    submitChanges();
  };
  const onBtnClick = (newRange) => {
    setShowDatePicker((prevState) => !prevState);
    setDatePickerPosition(newRange);
  };
  const onChooseDate = (date) => {
    props.setCurrentSelectedDay(date);
    props.onChange(date);
    props.setFirstDay(addDays(new Date(), -300));
    const sliderDOM = dateRef.current;
    const rangeDOM = range.current;
    const containerDOM = container.current;
    const basicWidth = containerDOM.offsetWidth - rangeDOM.offsetWidth;
    const finalWidth = basicWidth / 2 - sliderDOM.offsetWidth / 4;
    const stepsWidth = rangeDOM.offsetWidth / currentRange;
    sliderDOM.style.left = `${
      finalWidth +
      stepsWidth *
        ((datePickerPosition === 'left' ? 0 : currentRange - 1) + 0.5)
    }px`;
    calendarWillClose();

    if (datePickerPosition === 'left') {
      let plusDays = 1;
      days.push(date);
      for (let i = 2; i <= currentRange; i++) {
        days.push(rangePreProcces(date, plusDays));
        plusDays++;
      }
    } else {
      let lessDays = currentRange - 1;
      for (let i = 1; i < currentRange; i++) {
        days.push(rangePreProcces(date, -1 * lessDays));
        lessDays--;
      }
      days.push(date);
    }
    setCurrentSliderRange(days);
    setCurrentSelectedDay(toSliderString(date, props.i18n.locale));
    submitChanges();
    setCurrentDateValue(datePickerPosition === 'left' ? 0 : currentRange - 1);
    submitChanges();
  };

  const calendarWillClose = () => {
    setDatePickerPosition(`${datePickerPosition} hide`);
    return () => setTimeout(() => closeDatePicker(), 400);
  };
  const closeDatePicker = () => {
    setShowDatePicker(false);
    setDatePickerPosition(datePickerPosition.replace(' hide', ''));
  };

  const rangePreProcces = (date, numDays) => {
    const newDate = new Date(date);
    newDate.setDate(date.getDate() + numDays);
    return newDate;
  };

  const submitChanges = () => {
    props.onChange(
      currentSliderRange[0][parseInt(currentDateValue, 10)],
      currentSliderRange[0],
      currentSliderRange[currentSliderRange.length - 1],
    );
  };
  return (

      <div className={`sliderWrapper ${sliderWrapper} ${dark ? 'dark': ''}`}>

      <PlayButton state={playerState} toggleState={onPlayerStateToggle} />
      
        <div className={`${selectStyles} ${dark ? 'dark': ''} ${rangeStyles}`} ref={container}>
        <DatePicker
          startDate={new Date(firstDay)}
          close={calendarWillClose}
          onSelect={onChooseDate}
          show={showDatePicker}
          customClass={datePickerPosition}
        />
        <div className={`${sliderSelector} ${dark ? 'dark': ''}`} ref={dateRef}>
          <span>{currentSelectedDay?.toString()}</span>
        </div>
        <span
          title="Select Start Date"
          className={`first ${tooltipCss}`}
          onClick={(e) => onBtnClick('left')}
        >
          <IconBtn /> {toSliderString(new Date(currentSelectedDay? currentSelectedDay : null), 'en')}
        </span>
        <button
          onClick={(e) => onBtnClick('left')}
          className={`first ${popBtn}`}
        />
        <input
          ref={range}
          onInput={onSliderChange}
          type="range"
          min="0"
          max={currentRange - 1}
          step="1"
          value={currentDateValue}
        />
        <span title="Select End Date" className={`last ${tooltipCss}`}>
          {toSliderString(new Date(lastDay? lastDay : null), 'en')}
        </span>
      </div>
    </div>
  );
}