Feat: Add and improve examples

sandypockets · Dec 9, 2023 · 4f144df · 4f144df
1 parent 71b5c88
commit 4f144df
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 9 deletions.
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
@@ -89,6 +89,9 @@ datePicker.init();
 
 #### Example implementation with JS Deliver
 
+<details>
+<summary>Click to view example code</summary>
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -135,4 +138,71 @@ datePicker.init();
         </script>
     </body>
 </html>
+```
+</details>
+
+## Localization
+The `easy-dates-picker` is equipped with robust localization capabilities, supporting a wide range of languages to accommodate global audiences. This feature ensures that users experience the Date Picker in their preferred language, with appropriate formats for dates, month names, day names, and interface labels.
+
+### Supported Languages
+The Date Picker supports the following languages, each represented by its respective ISO language code.
+
+<details>
+<summary>View all supported languages</summary>
+
+- Bulgarian (`bg-BG`)
+- Czech (`cs`)
+- Danish (`da`)
+- German (`de`)
+- Greek (`el`)
+- English (`en`)
+- Spanish (`es`)
+- Finnish (`fi`)
+- French (`fr`)
+- Croatian (`hr-HR`)
+- Hungarian (`hu`)
+- Indonesian (`id`)
+- Italian (`it`)
+- Japanese (`ja`)
+- Korean (`ko`)
+- Lithuanian (`lt-LT`)
+- Dutch (`nl`)
+- Norwegian Bokmål (`nb`)
+- Polish (`pl`)
+- Brazilian Portuguese (`pt-BR`)
+- European Portuguese (`pt-PT`)
+- Romanian (`ro-RO`)
+- Russian (`ru`)
+- Slovak (`sk-SK`)
+- Slovenian (`sl-SL`)
+- Swedish (`sv`)
+- Thai (`th`)
+- Turkish (`tr`)
+- Vietnamese (`vi`)
+- Chinese (Simplified) (`zh-CN`)
+- Chinese (Traditional) (`zh-TW`)
+
+
+</details>
+
+### Implementing Localization
+There are various ways to localize the Date Picker. 
+
+#### Single language
+If you only need one language, then you can set the `language` option in your `options` object to your desired language's ISO code.
+
+```javascript
+const options = {
+  language: 'es', // set to Spanish
+};
+```
+
+#### Automatic localization
+If you want the Date Picker to adapt to the language of the page it's mounted on, then you can set the `usePageLanguage` option in your options object to `true`. You do not need to set a `language`, since the page language will be detected to match the UI. However it is recommended that you use the `usePageLanguageFallback` to set a fallback language in case the page language is not supported, or was set incorrectly. 
+
+```javascript
+const options = {
+  usePageLanguage: true,
+  usePageLanguageFallback: 'en' // Fallback to English
+};
 ```
diff --git a/README.md b/README.md
@@ -12,16 +12,16 @@
 
 Is this the right library for me?
 
-- Zero external dependencies.
-- Single or range date selection.
-- Localized - 10 languages included.
-- Optionally detect and display the parent page language.
-- Accessible, fully keyboard navigable.
-- Cross-browser compatible.
-- Easy to style beyond the defaults.
-- Lightning fast set up.
+- Zero external dependencies
+- Single or range date selection
+- Localized - Over 30 languages included
+- Optionally detect and display the parent page language
+- Accessible, fully keyboard navigable
+- Cross-browser compatible
+- Easy to style beyond the defaults
+- Lightning fast set up
 
-Note: if you use the date picker with a library or framework that uses a virtual DOM, then you might need to make some further modifications.
+Note: if you use the date picker with a library or framework that uses a virtual DOM (like React), then you might need to make some further modifications.
 
 ## Getting started
 The Easy Dates Picker is as quick to set up as it is lightweight. For detailed documentation, please view the [docs](https://github.com/sandypockets/easy-dates-picker/blob/main/DOCUMENTATION.md) in the repo.