date-fns/locale#enGB JavaScript Examples

describe('useDateInput', () => {
  test('should return input props', () => {
    const { result } = renderHook(() => useDateInput({
      locale: enGB,
      onDateChange: () => {}
    }))

    expect(result.current).toMatchObject({
      onFocus: expect.any(Function),
      onChange: expect.any(Function),
      onBlur: expect.any(Function),
      placeholder: enGB.formatLong.date({ width: 'short' }).toLowerCase(),
      type: 'text',
      value: ''
    })
  })
})

export default function CalendarExample() {
  const [selectedDates, setSelectedDates] = useState([])

  const modifiers = {
    selected: date => selectedDates.some(selectedDate => isSameDay(selectedDate, date))
  }

  const handleDayClick = date => {
    setSelectedDates([...selectedDates, date])
  }

  return (
    <Example code={code}>
      <Calendar onDayClick={handleDayClick} modifiers={modifiers} locale={enGB} />
    </Example>
  )
}

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

  return (
    <Example code={code}>
      <p>Selected date: {date ? format(date, 'dd MMM yyyy', { locale: enGB }) : 'none'}.</p>

      <DatePickerCalendar date={date} onDateChange={setDate} locale={enGB} />
    </Example>
  )
}

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

  const inputProps = useDateInput({
    date,
    format: 'yyyy-MM-dd',
    locale: enGB,
    onDateChange: setDate
  })

  return (
    <Example code={code}>
      <p>The selected date is {date && format(date, 'dd MMM yyyy', { locale: enGB })}</p>
      <input className='input' {...inputProps} />
      <DatePickerCalendar date={date} onDateChange={setDate} locale={enGB} />
    </Example>
  )
}

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

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

export default function DatePickerWithTimeExample() {
  const [date, setDate] = useState(new Date(2020, 1, 24, 18, 15))

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

export default function DatePickerWithTimeInputExample() {
  const [date, setDate] = useState(new Date(2020, 1, 24, 18, 15))

  const timeInputProps = useDateInput({
    date,
    format: 'HH:mm',
    locale: enGB,
    onDateChange: setDate
  })

  return (
    <Example code={code}>
      <div style={{ display: 'flex' }}>
        <DatePicker date={date} onDateChange={setDate} locale={enGB} format='dd/MM/yyyy'>
          {({ inputProps, focused }) => (
            <input className={'input' + (focused ? ' -focused' : '')} style={{ width: 150 }} {...inputProps} />
          )}
        </DatePicker>

        <input className='input' style={{ marginLeft: 16, width: 80 }} {...timeInputProps} />
      </div>
    </Example>
  )
}

export default function DateRangePickerCalendarExample() {
  const [startDate, setStartDate] = useState()
  const [endDate, setEndDate] = useState()
  const [focus, setFocus] = useState(START_DATE)

  const handleFocusChange = newFocus => {
    setFocus(newFocus || START_DATE)
  }

  return (
    <Example code={code}>
      <p>Selected start date: {startDate ? format(startDate, 'dd MMM yyyy', { locale: enGB }) : 'none'}.</p>
      <p>Selected end date: {endDate ? format(endDate, 'dd MMM yyyy', { locale: enGB }) : 'none'}.</p>
      <p>Currently selecting: {focus}.</p>

      <DateRangePickerCalendar
        startDate={startDate}
        endDate={endDate}
        focus={focus}
        onStartDateChange={setStartDate}
        onEndDateChange={setEndDate}
        onFocusChange={handleFocusChange}
        locale={enGB}
      />
    </Example>
  )
}

export default function DateRangePickerExample() {
  const [startDate, setStartDate] = useState()
  const [endDate, setEndDate] = useState()

  return (
    <Example code={code}>
      <DateRangePicker
        startDate={startDate}
        endDate={endDate}
        onStartDateChange={setStartDate}
        onEndDateChange={setEndDate}
        minimumDate={new Date()}
        minimumLength={1}
        format='dd MMM yyyy'
        locale={enGB}
      >
        {({ startDateInputProps, endDateInputProps, focus }) => (
          <div className='date-range'>
            <input
              className={'input' + (focus === START_DATE ? ' -focused' : '')}
              {...startDateInputProps}
              placeholder='Start date'
            />
            <span className='date-range_arrow' />
            <input
              className={'input' + (focus === END_DATE ? ' -focused' : '')}
              {...endDateInputProps}
              placeholder='End date'
            />
          </div>
        )}
      </DateRangePicker>
    </Example>
  )
}

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

  return (
    <Example code={code}>
      <DatePickerCalendar
        date={date}
        onDateChange={setDate}
        locale={enGB}
        modifiers={modifiers}
        modifiersClassNames={modifiersClassNames}
      />
    </Example>
  )
}

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

  const inputProps = useDateInput({
    date,
    format: 'yyyy-MM-dd',
    locale: enGB,
    onDateChange: setDate
  })

  const handleReset = () => {
    setDate(new Date())
  }

  return (
    <Example code={code}>
      <p>The selected date is {date && format(date, 'dd MMM yyyy', { locale: enGB })}</p>
      <p>
        <button onClick={handleReset}>Set today</button>
      </p>
      <input className='input' {...inputProps} />
    </Example>
  )
}

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]

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 },
}