The date picker provides comprehensive internationalization with automatic browser locale detection, built-in translations for English, Spanish, German, and French, plus full customization options for any language.

Automatic Locale Detection

Detect and use the browser's language

Live Demo

Automatically uses your browser's language setting (navigator.language)

Code Examples
HTML 
 
 
JavaScript 
 
 
 
Details
 
How It Works
 
  • Detects the user's browser language via navigator.language
    •  
  • Uses built-in translations if available (en, de, fr, es)
    •  
  • Falls back to English if locale is not supported
    •  
  • Uses Intl API for weekday/month names in user's language
 
What Gets Localized
 
  • Weekday names - Mo, Tu, We... (via Intl API)
    •  
  • Month names - January, February... (via Intl API)
    •  
  • Button labels - Today, Clear, Apply
    •  
  • Summary text - day/days, night/nights
    •  
  • Week start day - Sunday or Monday based on locale
 
Built-in Locales
 
Spanish, German, French, and English
 
Spanish Example
  
Spanish locale with localized UI
 
German Example
 
 
German locale with localized UI
 
Available Locales
 
Built-in Locales
 
  • locale="en" - English
    •  
  • locale="es" - Spanish (Español)
    •  
  • locale="de" - German (Deutsch)
    •  
  • locale="fr" - French (Français)
    •  
  • locale="auto" - Auto-detect from browser
 
Locale Features
 
Each locale includes:
 
  • Translated button labels (Today, Clear, Apply)
    •  
  • Localized summary text (day/days, night/nights)
    •  
  • Appropriate week start day (Mon/Sun)
    •  
  • Month and weekday names from Intl API
 
Localized Display Formats
 
Show format hints in the user's language
 
Live Demo
  
Shows "dd/mm/aaaa" to Spanish users while validating with YYYY-MM-DD
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
Dual Mask System
 
  • date-format-mask - Used for parsing/validation (always English: YYYY,
							MM, DD)
    •  
  • display-format-mask - Shown to users as a hint (localized tokens)
 
Localized Tokens
 
  • Spanish: dd/mm/aaaa (día, mes, año)
    •  
  • German: tt.mm.jjjj (tag, monat, jahr)
    •  
  • French: jj/mm/aaaa (jour, mois, année)
 
Important
 
Both masks must represent the same format structure, just with different language
						tokens. The validation always uses English tokens internally.
 
Custom UI Strings (JavaScript API Only)
 
Override built-in button labels using the JavaScript API
 
Limitation
 
Web Component Limitation
 
The customStrings option is only available when using the JavaScript API (new DateRangePicker(...)). It is not exposed as a web component attribute or property.
 
To customize UI strings, you must instantiate the date picker using the JavaScript API instead of the web component.
 
Code Examples
 
JavaScript API 
 
 
 
Web Component (Not Supported) 
 
 
 
Details
 
Available String Keys
 
When using the JavaScript API, you can override these strings:
 
  • today - "Today" button label
    •  
  • clear - "Clear" button label
    •  
  • apply - "Apply" button label (range mode)
    •  
  • day - Singular "day" text
    •  
  • days - Plural "days" text
    •  
  • night - Singular "night" text
    •  
  • nights - Plural "nights" text
    •  
  • preview - "Preview" label when dragging
 
Use Cases
 
  • Branding - Match your app's voice and tone
    •  
  • Custom languages - Languages not in built-in locales
    •  
  • Domain-specific terms - "Check-in/Check-out" instead of dates
 
Partial Override
 
Only provide the strings you want to override. Unspecified strings use the current locale's defaults.
 
Alternative: Use Built-in Locales
 
If you just need different languages, use the locale attribute instead (locale="es", locale="de", etc.)