Skip to main content
React Native Date Picker provides comprehensive localization support through the locale prop and related configuration options.

​
Locale Prop

The locale prop accepts a Locale ID that determines:
  • Date order (year-month-day vs day-month-year, etc.)
  • Language of weekday/month names
  • 12/24-hour time format preference
  • AM/PM display

​
Basic Usage

import DatePicker from 'react-native-date-picker'

// French locale
<DatePicker
  date={date}
  onDateChange={setDate}
  locale="fr"
/>

// Japanese locale
<DatePicker
  date={date}
  onDateChange={setDate}
  locale="ja"
/>

// Spanish locale
<DatePicker
  date={date}
  onDateChange={setDate}
  locale="es"
/>

​
Common Locale IDs

LanguageLocale IDExample
English (US)en or en_USMonth/Day/Year, 12-hour
FrenchfrDay/Month/Year, 24-hour
GermandeDay.Month.Year, 24-hour
JapanesejaYear/Month/Day, 24-hour
SpanishesDay/Month/Year, 24-hour
Chinese (Simplified)zh or zh_CNYear/Month/Day, 24-hour
Portuguese (Brazil)pt_BRDay/Month/Year, 24-hour
KoreankoYear. Month. Day, 12-hour
You can use any valid locale identifier. The picker will adapt the date/time format to match that locale’s conventions.

​
Date Order

The locale automatically determines the order in which date components appear.

​
Example: Different Date Orders

// US English - Month/Day/Year
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="date"
  locale="en_US"
/>

// French - Day/Month/Year
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="date"
  locale="fr"
/>

// Japanese - Year/Month/Day
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="date"
  locale="ja"
/>
The date order is determined by the locale preference and cannot be customized independently. To change the date order, use a locale that has your preferred format.

​
12-Hour vs 24-Hour Format

The time format (12-hour with AM/PM vs 24-hour) is influenced by the locale and device settings.

​
iOS Behavior

On iOS, the locale prop determines the 12/24-hour format: 
// French locale uses 24-hour format
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="time"
  locale="fr"
/>

// US English locale uses 12-hour format with AM/PM
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="time"
  locale="en_US"
/>

​
Android Behavior

On Android, the 12/24-hour format is determined by the device settings by default, regardless of the locale prop.

​
is24hourSource Prop (Android Only)

Use is24hourSource to control how the 24-hour format is determined on Android:
  • "device" - Use device settings (default on Android)
  • "locale" - Use locale preference (default on iOS)
// Android: Use locale to determine 12/24-hour format
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="time"
  locale="fr"
  is24hourSource="locale"
/>
It is NOT recommended to force a specific 12/24-hour format as this goes against user preferences. If you must enforce a format, choose a locale with the desired preference and set is24hourSource="locale".

​
Platform Comparison

PlatformDefault BehaviorCan Override?
iOSUses locale settingNo (always locale-based)
AndroidUses device settingYes (via is24hourSource="locale")

​
AM/PM Display

When using 12-hour format, the AM/PM selector appears automatically. The display is controlled by:
  1. iOS: The locale prop determines if AM/PM is shown
  2. Android: Device settings (or locale if is24hourSource="locale")
// 12-hour format with AM/PM (US English)
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="time"
  locale="en_US"
/>

// 24-hour format, no AM/PM (French)
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="time"
  locale="fr"
  is24hourSource="locale"
/>

​
Important Limitations

​
Modal Text Not Localized

The locale prop does NOT translate the modal’s title, confirm button, or cancel button text. It only affects the picker’s date/time format.
To localize modal text, use the title, confirmText, and cancelText props: 
// French locale with French modal text
<DatePicker
  modal
  open={open}
  date={date}
  locale="fr"
  title="Sélectionner la date"
  confirmText="Confirmer"
  cancelText="Annuler"
  onConfirm={(date) => {
    setOpen(false)
    setDate(date)
  }}
  onCancel={() => setOpen(false)}
/>

​
Complete Localization Example

import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button title="Sélectionner" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        mode="datetime"
        locale="fr"
        is24hourSource="locale"
        title="Choisissez une date et une heure"
        confirmText="Confirmer"
        cancelText="Annuler"
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </>
  )
}
This example provides a fully French-localized experience:
  • Date format follows French conventions (Day/Month/Year)
  • 24-hour time format (no AM/PM)
  • Modal text in French

​
Dynamic Localization

You can dynamically change the locale based on your app’s language settings: 
import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'
import { useTranslation } from 'react-i18next' // or your i18n library

export default () => {
  const { i18n } = useTranslation()
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)
  
  // Get locale from your app's language
  const locale = i18n.language // e.g., 'en', 'fr', 'es'
  
  // Get translations from your i18n system
  const modalTexts = {
    en: { title: 'Select date', confirm: 'Confirm', cancel: 'Cancel' },
    fr: { title: 'Sélectionner la date', confirm: 'Confirmer', cancel: 'Annuler' },
    es: { title: 'Seleccionar fecha', confirm: 'Confirmar', cancel: 'Cancelar' },
  }
  
  const texts = modalTexts[locale] || modalTexts.en

  return (
    <DatePicker
      modal
      open={open}
      date={date}
      locale={locale}
      is24hourSource="locale"
      title={texts.title}
      confirmText={texts.confirm}
      cancelText={texts.cancel}
      onConfirm={(date) => {
        setOpen(false)
        setDate(date)
      }}
      onCancel={() => setOpen(false)}
    />
  )
}

​
Summary

Locale Prop Controls

  • Date component order
  • Weekday/month names
  • 12/24-hour preference (iOS always, Android with is24hourSource="locale")

Manual Localization

  • Modal title via title prop
  • Button text via confirmText and cancelText
  • Use with i18n libraries for dynamic translations

Build docs developers (and LLMs) love

Get started for freeTalk to us