Localize number

src/js/actions.ts

@@ -104,7 +104,7 @@ export default class Actions {
           day.manipulate(1, Unit.month);
         }
 
-        day.date = +currentTarget.innerText;
+        day.date = +currentTarget.getAttribute('data-day');
         let index = 0;
         if (this._context._options.multipleDates) {
           index = this._context.dates.pickedIndex(day, Unit.date);
@@ -152,7 +152,7 @@ export default class Actions {
         }
         break;
       case ActionTypes.selectMinute:
-        lastPicked.minutes = +currentTarget.innerText;
+        lastPicked.minutes = +currentTarget.getAttribute('data-value');
         this._context.dates._setValue(
           lastPicked,
           this._context.dates.lastPickedIndex

src/js/datetime.ts

@@ -276,7 +276,7 @@ export class DateTime extends Date {
    * Returns two digit hours
    */
   get secondsFormatted(): string {
-    return this.seconds < 10 ? `0${this.seconds}` : `${this.seconds}`;
+    return this.format({ second: "2-digit" });
   }
 
   /**
@@ -297,7 +297,7 @@ export class DateTime extends Date {
    * Returns two digit hours
    */
   get minutesFormatted(): string {
-    return this.minutes < 10 ? `0${this.minutes}` : `${this.minutes}`;
+    return this.format({ minute: "2-digit" });
   }
 
   /**
@@ -318,17 +318,14 @@ export class DateTime extends Date {
    * Returns two digit hours
    */
   get hoursFormatted(): string {
-    return this.hours < 10 ? `0${this.hours}` : `${this.hours}`;
+    return this.format({ hour: "2-digit" });
   }
 
   /**
    * Returns two digit hours but in twelve hour mode e.g. 13 -> 1
    */
   get twelveHoursFormatted(): string {
-    let hour = this.hours;
-    if (hour > 12) hour = hour - 12;
-    if (hour === 0) hour = 12;
-    return hour < 10 ? `0${hour}` : `${hour}`;
+    return this.format({ hour12: true, hour: "2-digit" });
   }
 
   /**

src/js/display/calendar/date-display.ts

@@ -133,7 +133,11 @@ export default class DateDisplay {
           'data-value',
           `${innerDate.year}-${innerDate.monthFormatted}-${innerDate.dateFormatted}`
         );
-        containerClone.innerText = `${innerDate.date}`;
+        containerClone.setAttribute(
+          'data-day',
+          `${innerDate.date}`
+        );
+        containerClone.innerText = innerDate.format({ day: "numeric" });
         innerDate.manipulate(1, Unit.date);
       });
   }

src/js/display/calendar/decade-display.ts

@@ -55,7 +55,7 @@ export default class DecadeDisplay {
 
     switcher.setAttribute(
       Namespace.css.decadesContainer,
-      `${this._startDecade.year}-${this._endDecade.year}`
+      `${this._startDecade.format({ year: 'numeric' })}-${this._endDecade.format({ year: 'numeric' })}`
     );
 
     this._context._validation.isValid(this._startDecade, Unit.year)
@@ -79,7 +79,7 @@ export default class DecadeDisplay {
             containerClone.setAttribute('data-value', ``);
             return;
           } else {
-            containerClone.innerText = `${this._startDecade.year - 10}`;
+            containerClone.innerText = this._startDecade.clone.manipulate(-10, Unit.year).format({ year: 'numeric' });
             containerClone.setAttribute(
               'data-value',
               `${this._startDecade.year}`
@@ -107,7 +107,7 @@ export default class DecadeDisplay {
           'data-value',
           `${this._startDecade.year}`
         );
-        containerClone.innerText = `${this._startDecade.year}`;
+        containerClone.innerText = `${this._startDecade.format({ year: 'numeric' })}`;
 
         this._startDecade.manipulate(10, Unit.year);
       });

src/js/display/calendar/year-display.ts

@@ -54,7 +54,7 @@ export default class YearDisplay {
 
     switcher.setAttribute(
       Namespace.css.yearsContainer,
-      `${this._startYear.year}-${this._endYear.year}`
+      `${this._startYear.format({ year: 'numeric' })}-${this._endYear.format({ year: 'numeric' })}`
     );
 
     this._context._validation.isValid(this._startYear, Unit.year)
@@ -87,7 +87,7 @@ export default class YearDisplay {
         containerClone.classList.remove(...containerClone.classList);
         containerClone.classList.add(...classes);
         containerClone.setAttribute('data-value', `${innerDate.year}`);
-        containerClone.innerText = `${innerDate.year}`;
+        containerClone.innerText = innerDate.format({ year: "numeric" });
 
         innerDate.manipulate(1, Unit.year);
       });