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.

INT01 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
 
INT02 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
 
INT03 Localized Display Formats
 
Show format hints in the user's language
 
Live Demo
  
Spanish locale with DD/MM/YYYY format (día/mes/año)
 
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.
 
INT04 Custom UI Strings & Month Names
 
Override built-in labels via property setters (v1.13+)
 
customStrings
 
Property setters (v1.13)
 
customStrings and monthNames are property setters on the web component — set them in JavaScript after the element is in the DOM.
						They aren't HTML attributes because both accept structured data.
 
Pre-v1.13 the web component required the JavaScript-API path
						(new DateRangePicker()); v1.13 lifted that limitation.
 
Code Examples
 
Web Component (v1.13+) 
 
 
 
JavaScript API 
 
 
 
Details
 
Available String Keys (customStrings)
 
  • today — "Today" button label
    •  
  • clear — "Clear" button label
    •  
  • apply — "Apply" button label (range mode)
    •  
  • day / days — Day count
    •  
  • night / nights — Night count
    •  
  • preview — "Preview" label when dragging
 
Partial Override
 
Only provide the strings you want to override. Unspecified strings
						fall back to the current locale's defaults.
 
Pre-Upgrade Assignment
 
You can assign the property before the web-daterangepicker custom element is defined — Custom
						Elements v1 lifts pre-upgrade properties into the upgraded element. The whenDefined dance above is the cautious pattern; a plain el.customStrings = … right after the element is parsed
						works too.
 
Alternative: Use Built-in Locales
 
If you just need a different language, use the locale attribute (locale="es", locale="de", etc.)
						instead — those translations include month/weekday/button strings.