Fix: Broken layout on some locales due to special characters

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-dates-picker",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "A super lightweight vanilla JS date picker",
   "main": "dist/datepicker.bundle.js",
   "files": [

src/datePicker.js

@@ -30,6 +30,13 @@ export default function DatePicker(elementId, options) {
     this.render();
     attachEventListeners(this.element, this.changeMonth.bind(this), this.handleDayClick.bind(this));
   };
+  this.localizedDate = function (date, locale) {
+    return date.toLocaleDateString(locale, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
 
   this.render = function () {
     this.element.innerHTML = '';
@@ -42,11 +49,11 @@ export default function DatePicker(elementId, options) {
 
     if (this.selectedStartDate) {
       if (this.options.mode === 'single') {
-        input.value = this.selectedStartDate.toDateString();
+        input.value = this.localizedDate(this.selectedStartDate, this.options.language);
       } else if (this.options.mode === 'range') {
-        let inputValue = this.selectedStartDate.toDateString();
+        let inputValue = this.localizedDate(this.selectedStartDate, this.options.language);
         if (this.selectedEndDate) {
-          inputValue += ` - ${this.selectedEndDate.toDateString()}`;
+          inputValue += ` - ${this.localizedDate(this.selectedEndDate, this.options.language)}`;
         }
         input.value = inputValue;
       }

src/generateCalendarContainer.js

@@ -4,7 +4,7 @@ import { ariaLabels } from './localization';
 
 export function generateCalendarContainer(currentDate, isDateSelected, isDateInRange, options) {
   const container = document.createElement('div');
-  container.className = 'datepicker-calendar-container';
+  container.className = `datepicker-calendar-container ${options?.language}`;
   container.style.display = options.textInputEnabled ? 'none' : 'block';
   container.innerHTML = `
     <div class="datepicker-header">

src/styles/datepicker.css

@@ -35,3 +35,33 @@
 .datepicker-day > span {
   display: block;
 }
+
+.ja .datepicker-calendar-container {
+  height: 385px;
+}
+
+.ja .datepicker-day {
+  cursor: pointer;
+  height: 50px;
+  font-size: smaller;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0;
+}
+
+.zh-CN .datepicker-calendar-container,
+.zh-TW .datepicker-calendar-container {
+  height: 385px;
+}
+
+.zh-CN .datepicker-day,
+.zh-TW .datepicker-day {
+  cursor: pointer;
+  height: 50px;
+  font-size: smaller;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0;
+}