@codaline-io/ionic-datepicker - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15-0

dist/cjs/ionic-datepicker-popover.cjs.entry.js

@@ -6,8 +6,8 @@ 'use strict';
 const index = require('./index-1c98651d.js');
+const utils = require('./utils-3600e812.js');
 
-const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
+const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--placeholder-color:var(--ion-placeholder-color, var(--ion-color-step-400, #999));--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
 
 const ionicDatepickerPopoverCss = variablesCss + "ion-popover.datepicker-popover,ion-popover.sc-ion-popover-md-h.datepicker-popover{--width:var(--popover-width);--max-width:var(--popover-width);--min-width:var(--popover-width)}ionic-datepicker-popover .qs-datepicker-container{border:0;border-radius:0;margin-top:0;-webkit-box-shadow:none;box-shadow:none;position:relative}ionic-datepicker-popover .qs-datepicker .qs-controls{background-color:var(--controls-background);padding:var(--controls-padding)}ionic-datepicker-popover .qs-datepicker .qs-squares{-ms-flex-pack:center;justify-content:center}ionic-datepicker-popover .qs-datepicker .qs-square{border-radius:var(--square-border-radius);height:var(--square-dimension);width:var(--square-dimension)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-day{font-weight:var(--square-font-weight)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-current.qs-active,ionic-datepicker-popover .qs-datepicker .qs-square.qs-active{background-color:var(--square-active-background);color:var(--square-active-color)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-current{background-color:var(--square-current-background);color:var(--square-current-color)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-current .qs-num{text-decoration:none}ionic-datepicker-popover .qs-datepicker .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{background-color:var(--square-hover-background);color:var(--square-hover-color)}ionic-datepicker-popover .qs-datepicker .qs-overlay .qs-submit{background:transparent;padding:calc(var(--base-spacing-small) * .5) var(--base-spacing)}ionic-datepicker-popover .qs-datepicker .qs-overlay .qs-overlay-year{font-size:var(--font-size-small);width:auto}ionic-datepicker-popover .qs-datepicker .qs-overlay .qs-close{font-size:var(--font-size-base);padding-right:var(--base-spacing)}";
 
-const DateTime = window.luxon.DateTime;
 const IonicDatepickerPopover = class {
@@ -27,11 +27,6 @@ constructor(hostRef) {
         /**
-         * selected default date as iso date|datetime string
-         * Default: today
-         */
-        this.selectedDate = DateTime.local().toISODate();
-        /**
          * Max selectable date as iso date|datetime string
          * Default: today + 100 years
          */
-        this.max = DateTime.local().plus({ years: 100 }).toISODate();
+        this.max = utils.DEFAULT_MAX();
         /**
@@ -41,3 +36,3 @@ * Min selectable date as iso date|datetime string
          */
-        this.min = DateTime.local().minus({ years: 100 }).toISODate();
+        this.min = utils.DEFAULT_MIN();
     }
@@ -53,5 +48,5 @@ setDisabled(_prev, current) {
             alwaysShow: true,
-            customDays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-            customMonths: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-            customOverlayMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+            customDays: utils.DAY_SHORT_NAMES,
+            customMonths: utils.MONTH_NAMES,
+            customOverlayMonths: utils.MONTH_SHORT_NAMES,
             dateSelected: date && date.getTime() <= new Date(this.max).getTime() && date.getTime() >= new Date(this.min).getTime() ? date : new Date(),
@@ -63,4 +58,4 @@ maxDate: new Date(this.max),
             },
-            overlayButton: 'Okay',
-            overlayPlaceholder: 'Jahr',
+            overlayButton: utils.DEFAULT_OKAY_LABEL,
+            overlayPlaceholder: utils.DEFAULT_YEAR_LABEL,
             showAllDates: true,
@@ -67,0 +62,0 @@ startDay: 1

dist/cjs/ionic-datepicker.cjs.entry.js

@@ -6,8 +6,8 @@ 'use strict';
 const index = require('./index-1c98651d.js');
+const utils = require('./utils-3600e812.js');
 
-const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
+const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--placeholder-color:var(--ion-placeholder-color, var(--ion-color-step-400, #999));--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
 
-const ionicDatepickerCss = variablesCss + "span{cursor:pointer}:host{padding-right:var(--base-spacing-small)}input{border:0}span.placeholder{font-style:italic}span.disabled,input[disabled],:host.disabled{cursor:not-allowed;background:transparent;opacity:.3}span.ionic-datepicker-error{color:var(--error-color)}";
+const ionicDatepickerCss = variablesCss + "span{cursor:pointer;padding-right:var(--base-spacing-small)}input{border:0}span.placeholder{color:var(--placeholder-color)}span.disabled,input[disabled],:host.disabled{cursor:not-allowed;background:transparent;pointer-events:none;opacity:.3}span.ionic-datepicker-error{color:var(--error-color)}";
 
-const DateTime = window.luxon.DateTime;
 const isDesktop = () => !(window.matchMedia('(any-pointer:coarse)').matches);
@@ -18,7 +18,12 @@ const IonicDatepicker = class {
         /**
-         * How the date should be formatted for display purposes
-         * Default: "DDD"
+         * How the date should be formatted for ion-datetime for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+         * Default: "DD. MMMM YYYY"
          */
-        this.displayFormat = 'DDD';
+        this.displayFormat = 'DD. MMMM YYYY';
         /**
+         * How the date should be formatted for ion-datetime  for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+         * Default: "DD. MMMM YYYY"
+         */
+        this.pickerFormat = 'DD. MMMM YYYY';
+        /**
          * Flag if datepicking is disabled
@@ -37,8 +42,8 @@ * Default: disabled
          */
-        this.placeholder = 'Datum';
+        this.placeholder = 'Datum auswählen';
         /**
-         * nativeOnMobile if native date picker is used on mobile devices
+         * ionDateTimeOnMobile if ion datetime picker is used on mobile devices
          * Default: false
          */
-        this.nativeOnMobile = false;
+        this.ionDateTimeOnMobile = false;
         /**
@@ -48,3 +53,3 @@ * Max selectable date as iso date|datetime string
          */
-        this.max = DateTime.local().plus({ years: 100 }).toISODate();
+        this.max = utils.DEFAULT_MAX();
         /**
@@ -54,3 +59,3 @@ * Min selectable date as iso date|datetime string
          */
-        this.min = DateTime.local().minus({ years: 100 }).toISODate();
+        this.min = utils.DEFAULT_MIN();
         /**
@@ -67,6 +72,6 @@ * Required input
         /**
-         * Change ionic popover options, PopoverOptions | {}
+         * Change ionic popover options, Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'>
          * Default: {}
          */
-        this.popoverOptions = {};
+        this.ionPopoverOptions = {};
         /**
@@ -78,2 +83,37 @@ * Possibility to overwrite the error css class
         /**
+         * Possibility to overwrite month names
+         * Default: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+         */
+        this.monthNames = utils.MONTH_NAMES;
+        /**
+         * Possibility to overwrite month shortnames
+         * Default: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+         */
+        this.monthShortNames = utils.MONTH_SHORT_NAMES;
+        /**
+         * Possibility to overwrite day names
+         * Default: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+         */
+        this.dayNames = utils.DAY_NAMES;
+        /**
+         * Possibility to overwrite day shortnames
+         * Default: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+         */
+        this.dayShortNames = utils.DAY_SHORT_NAMES;
+        /**
+         * Set okay label
+         * Default: 'Okay'
+         */
+        this.okayLabel = utils.DEFAULT_OKAY_LABEL;
+        /**
+         * Set cancel label
+         * Default: 'Abbrechen'
+         */
+        this.cancelLabel = utils.DEFAULT_CANCEL_LABEL;
+        /**
+         * Set year label
+         * Default: 'Jahr'
+         */
+        this.yearLabel = utils.DEFAULT_YEAR_LABEL;
+        /**
          * Stores the current selected date as formatted string for display purposes
@@ -90,15 +130,23 @@ */
             if (!this.defaultDate || !this.defaultDate.trim()) {
-                this.defaultDate = DateTime.local().toISODate();
+                this.defaultDate = utils.toISODate(new Date().toISOString());
             }
         }
         if (this.defaultDate) {
-            this.date = DateTime.fromISO(this.defaultDate);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
+            this.date = this.defaultDate;
+            this.formatDate();
         }
     }
+    formatDate() {
+        this.formattedDate = utils.renderDatetime(this.displayFormat, this.date, {
+            dayNames: this.dayNames,
+            dayShortNames: this.dayShortNames,
+            monthNames: this.monthNames,
+            monthShortNames: this.monthShortNames
+        });
+    }
     handleInput(ev) {
-        if (this.disabled) {
-            this.date = DateTime.fromISO(ev.target.value);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
-            this.changes.emit(this.date.toISODate());
+        if (!this.disabled) {
+            this.date = ev.detail.value;
+            this.formatDate();
+            this.changes.emit(utils.toISODate(this.date));
         }
@@ -110,4 +158,4 @@ }
         }
-        const popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.popoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
-                selectedDate: this.date ? this.date.toISODate() : null,
+        const popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.ionPopoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
+                selectedDate: this.date || null,
                 disabled: this.disabled,
@@ -117,4 +165,4 @@ displayFormat: this.displayFormat,
                 min: this.min,
-                pickerOptions: this.pickerOptions
-            }, cssClass: 'datepicker-popover', event: event }));
+                pickerOptions: Object.assign(Object.assign({}, this.pickerOptions), { customDays: this.dayShortNames, customMonths: this.monthNames, customOverlayMonths: this.monthShortNames, overlayButton: this.okayLabel, overlayPlaceholder: this.yearLabel })
+            }, cssClass: 'datepicker-popover', event: event, mode: this.mode }));
         document.body.appendChild(popover);
@@ -124,5 +172,5 @@ await popover.present();
         if (data && data.date) {
-            this.date = DateTime.fromISO(data.date);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
-            const dateString = this.date.toFormat('yyyy-LL-dd');
+            this.date = data.date;
+            this.formatDate();
+            const dateString = utils.toISODate(this.date);
             this.changes.emit(dateString);
@@ -135,3 +183,4 @@ }
         const errorClassName = this.error && !!this.errorClass ? this.errorClass : '';
-        return index.h(index.Host, null, (this.isDesktop || !this.nativeOnMobile) && index.h("span", { onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.formattedDate || this.placeholder), !this.isDesktop && this.nativeOnMobile && index.h("input", { type: 'date', disabled: this.disabled, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, onInput: this.handleInput, max: this.max, min: this.min, required: this.required, value: this.date ? this.date.toISODate() : '' }));
+        return index.h(index.Host, null, (this.isDesktop || !this.ionDateTimeOnMobile) && index.h("span", { onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.formattedDate || this.placeholder), !this.isDesktop && this.ionDateTimeOnMobile &&
+            index.h("ion-datetime", { value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode }));
     }
@@ -138,0 +187,0 @@ };

dist/cjs/ionic-datepicker.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 index.patchBrowser().then(options => {
-  return index.bootstrapLazy([["ionic-datepicker.cjs",[[1,"ionic-datepicker",{"displayFormat":[1,"display-format"],"disabled":[4],"pickerOptions":[16],"defaultDate":[1,"default-date"],"placeholder":[1],"nativeOnMobile":[4,"native-on-mobile"],"max":[8],"min":[8],"required":[4],"error":[4],"popoverOptions":[16],"errorClass":[1,"error-class"],"formattedDate":[32],"date":[32]}]]],["ionic-datepicker-popover.cjs",[[0,"ionic-datepicker-popover",{"disabled":[4],"pickerOptions":[16],"selectedDate":[8,"selected-date"],"max":[8],"min":[8]}]]]], options);
+  return index.bootstrapLazy([["ionic-datepicker.cjs",[[1,"ionic-datepicker",{"displayFormat":[1,"display-format"],"pickerFormat":[1,"picker-format"],"disabled":[4],"pickerOptions":[16],"defaultDate":[1,"default-date"],"placeholder":[1],"ionDateTimeOnMobile":[4,"ion-date-time-on-mobile"],"max":[1],"min":[1],"required":[4],"error":[4],"ionPopoverOptions":[16],"mode":[1],"errorClass":[1,"error-class"],"monthNames":[16],"monthShortNames":[16],"dayNames":[16],"dayShortNames":[16],"okayLabel":[1,"okay-label"],"cancelLabel":[1,"cancel-label"],"yearLabel":[1,"year-label"],"formattedDate":[32],"date":[32]}]]],["ionic-datepicker-popover.cjs",[[0,"ionic-datepicker-popover",{"disabled":[4],"pickerOptions":[16],"selectedDate":[1,"selected-date"],"max":[1],"min":[1]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -8,5 +8,5 @@ 'use strict';
 const defineCustomElements = (win, options) => index.patchEsm().then(() => {
-  return index.bootstrapLazy([["ionic-datepicker.cjs",[[1,"ionic-datepicker",{"displayFormat":[1,"display-format"],"disabled":[4],"pickerOptions":[16],"defaultDate":[1,"default-date"],"placeholder":[1],"nativeOnMobile":[4,"native-on-mobile"],"max":[8],"min":[8],"required":[4],"error":[4],"popoverOptions":[16],"errorClass":[1,"error-class"],"formattedDate":[32],"date":[32]}]]],["ionic-datepicker-popover.cjs",[[0,"ionic-datepicker-popover",{"disabled":[4],"pickerOptions":[16],"selectedDate":[8,"selected-date"],"max":[8],"min":[8]}]]]], options);
+  return index.bootstrapLazy([["ionic-datepicker.cjs",[[1,"ionic-datepicker",{"displayFormat":[1,"display-format"],"pickerFormat":[1,"picker-format"],"disabled":[4],"pickerOptions":[16],"defaultDate":[1,"default-date"],"placeholder":[1],"ionDateTimeOnMobile":[4,"ion-date-time-on-mobile"],"max":[1],"min":[1],"required":[4],"error":[4],"ionPopoverOptions":[16],"mode":[1],"errorClass":[1,"error-class"],"monthNames":[16],"monthShortNames":[16],"dayNames":[16],"dayShortNames":[16],"okayLabel":[1,"okay-label"],"cancelLabel":[1,"cancel-label"],"yearLabel":[1,"year-label"],"formattedDate":[32],"date":[32]}]]],["ionic-datepicker-popover.cjs",[[0,"ionic-datepicker-popover",{"disabled":[4],"pickerOptions":[16],"selectedDate":[1,"selected-date"],"max":[1],"min":[1]}]]]], options);
 });
 
 exports.defineCustomElements = defineCustomElements;

dist/collection/components/ionic-datepicker-popover/ionic-datepicker-popover.js

 import { Component, h, Prop, Watch } from '@stencil/core';
-const DateTime = window.luxon.DateTime;
+import { DAY_SHORT_NAMES, DEFAULT_OKAY_LABEL, DEFAULT_YEAR_LABEL, MONTH_NAMES, MONTH_SHORT_NAMES, DEFAULT_MAX, DEFAULT_MIN } from '../utils';
 export class IonicDatepickerPopover {
@@ -16,11 +16,6 @@ constructor() {
         /**
-         * selected default date as iso date|datetime string
-         * Default: today
-         */
-        this.selectedDate = DateTime.local().toISODate();
-        /**
          * Max selectable date as iso date|datetime string
          * Default: today + 100 years
          */
-        this.max = DateTime.local().plus({ years: 100 }).toISODate();
+        this.max = DEFAULT_MAX();
         /**
@@ -30,3 +25,3 @@ * Min selectable date as iso date|datetime string
          */
-        this.min = DateTime.local().minus({ years: 100 }).toISODate();
+        this.min = DEFAULT_MIN();
     }
@@ -42,5 +37,5 @@ setDisabled(_prev, current) {
             alwaysShow: true,
-            customDays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-            customMonths: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-            customOverlayMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+            customDays: DAY_SHORT_NAMES,
+            customMonths: MONTH_NAMES,
+            customOverlayMonths: MONTH_SHORT_NAMES,
             dateSelected: date && date.getTime() <= new Date(this.max).getTime() && date.getTime() >= new Date(this.min).getTime() ? date : new Date(),
@@ -52,4 +47,4 @@ maxDate: new Date(this.max),
             },
-            overlayButton: 'Okay',
-            overlayPlaceholder: 'Jahr',
+            overlayButton: DEFAULT_OKAY_LABEL,
+            overlayPlaceholder: DEFAULT_YEAR_LABEL,
             showAllDates: true,
@@ -107,11 +102,11 @@ startDay: 1
         "selectedDate": {
-            "type": "any",
+            "type": "string",
             "mutable": false,
             "complexType": {
-                "original": "any",
-                "resolved": "any",
+                "original": "string",
+                "resolved": "string",
                 "references": {}
             },
             "required": false,
-            "optional": false,
+            "optional": true,
             "docs": {
@@ -122,11 +117,10 @@ "tags": [],
             "attribute": "selected-date",
-            "reflect": false,
-            "defaultValue": "DateTime.local().toISODate()"
+            "reflect": false
         },
         "max": {
-            "type": "any",
+            "type": "string",
             "mutable": false,
             "complexType": {
-                "original": "any",
-                "resolved": "any",
+                "original": "string",
+                "resolved": "string",
                 "references": {}
@@ -142,10 +136,10 @@ },
             "reflect": false,
-            "defaultValue": "DateTime.local().plus({years: 100}).toISODate()"
+            "defaultValue": "DEFAULT_MAX()"
         },
         "min": {
-            "type": "any",
+            "type": "string",
             "mutable": false,
             "complexType": {
-                "original": "any",
-                "resolved": "any",
+                "original": "string",
+                "resolved": "string",
                 "references": {}
@@ -161,3 +155,3 @@ },
             "reflect": false,
-            "defaultValue": "DateTime.local().minus({years: 100}).toISODate()"
+            "defaultValue": "DEFAULT_MIN()"
         }
@@ -164,0 +158,0 @@ }; }

dist/collection/components/ionic-datepicker/ionic-datepicker.js

 import { Component, Prop, h, Host, Event, State } from '@stencil/core';
-const DateTime = window.luxon.DateTime;
+import { DEFAULT_MAX, DEFAULT_MIN, DAY_NAMES, DAY_SHORT_NAMES, DEFAULT_CANCEL_LABEL, DEFAULT_OKAY_LABEL, DEFAULT_YEAR_LABEL, MONTH_NAMES, MONTH_SHORT_NAMES, renderDatetime, toISODate } from '../utils';
 const isDesktop = () => !(window.matchMedia('(any-pointer:coarse)').matches);
@@ -7,7 +7,12 @@ export class IonicDatepicker {
         /**
-         * How the date should be formatted for display purposes
-         * Default: "DDD"
+         * How the date should be formatted for ion-datetime for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+         * Default: "DD. MMMM YYYY"
          */
-        this.displayFormat = 'DDD';
+        this.displayFormat = 'DD. MMMM YYYY';
         /**
+         * How the date should be formatted for ion-datetime  for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+         * Default: "DD. MMMM YYYY"
+         */
+        this.pickerFormat = 'DD. MMMM YYYY';
+        /**
          * Flag if datepicking is disabled
@@ -26,8 +31,8 @@ * Default: disabled
          */
-        this.placeholder = 'Datum';
+        this.placeholder = 'Datum auswählen';
         /**
-         * nativeOnMobile if native date picker is used on mobile devices
+         * ionDateTimeOnMobile if ion datetime picker is used on mobile devices
          * Default: false
          */
-        this.nativeOnMobile = false;
+        this.ionDateTimeOnMobile = false;
         /**
@@ -37,3 +42,3 @@ * Max selectable date as iso date|datetime string
          */
-        this.max = DateTime.local().plus({ years: 100 }).toISODate();
+        this.max = DEFAULT_MAX();
         /**
@@ -43,3 +48,3 @@ * Min selectable date as iso date|datetime string
          */
-        this.min = DateTime.local().minus({ years: 100 }).toISODate();
+        this.min = DEFAULT_MIN();
         /**
@@ -56,6 +61,6 @@ * Required input
         /**
-         * Change ionic popover options, PopoverOptions | {}
+         * Change ionic popover options, Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'>
          * Default: {}
          */
-        this.popoverOptions = {};
+        this.ionPopoverOptions = {};
         /**
@@ -67,2 +72,37 @@ * Possibility to overwrite the error css class
         /**
+         * Possibility to overwrite month names
+         * Default: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+         */
+        this.monthNames = MONTH_NAMES;
+        /**
+         * Possibility to overwrite month shortnames
+         * Default: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+         */
+        this.monthShortNames = MONTH_SHORT_NAMES;
+        /**
+         * Possibility to overwrite day names
+         * Default: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+         */
+        this.dayNames = DAY_NAMES;
+        /**
+         * Possibility to overwrite day shortnames
+         * Default: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+         */
+        this.dayShortNames = DAY_SHORT_NAMES;
+        /**
+         * Set okay label
+         * Default: 'Okay'
+         */
+        this.okayLabel = DEFAULT_OKAY_LABEL;
+        /**
+         * Set cancel label
+         * Default: 'Abbrechen'
+         */
+        this.cancelLabel = DEFAULT_CANCEL_LABEL;
+        /**
+         * Set year label
+         * Default: 'Jahr'
+         */
+        this.yearLabel = DEFAULT_YEAR_LABEL;
+        /**
          * Stores the current selected date as formatted string for display purposes
@@ -78,15 +118,23 @@ */
             if (!this.defaultDate || !this.defaultDate.trim()) {
-                this.defaultDate = DateTime.local().toISODate();
+                this.defaultDate = toISODate(new Date().toISOString());
             }
         }
         if (this.defaultDate) {
-            this.date = DateTime.fromISO(this.defaultDate);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
+            this.date = this.defaultDate;
+            this.formatDate();
         }
     }
+    formatDate() {
+        this.formattedDate = renderDatetime(this.displayFormat, this.date, {
+            dayNames: this.dayNames,
+            dayShortNames: this.dayShortNames,
+            monthNames: this.monthNames,
+            monthShortNames: this.monthShortNames
+        });
+    }
     handleInput(ev) {
-        if (this.disabled) {
-            this.date = DateTime.fromISO(ev.target.value);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
-            this.changes.emit(this.date.toISODate());
+        if (!this.disabled) {
+            this.date = ev.detail.value;
+            this.formatDate();
+            this.changes.emit(toISODate(this.date));
         }
@@ -98,4 +146,4 @@ }
         }
-        const popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.popoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
-                selectedDate: this.date ? this.date.toISODate() : null,
+        const popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.ionPopoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
+                selectedDate: this.date || null,
                 disabled: this.disabled,
@@ -105,4 +153,4 @@ displayFormat: this.displayFormat,
                 min: this.min,
-                pickerOptions: this.pickerOptions
-            }, cssClass: 'datepicker-popover', event: event }));
+                pickerOptions: Object.assign(Object.assign({}, this.pickerOptions), { customDays: this.dayShortNames, customMonths: this.monthNames, customOverlayMonths: this.monthShortNames, overlayButton: this.okayLabel, overlayPlaceholder: this.yearLabel })
+            }, cssClass: 'datepicker-popover', event: event, mode: this.mode }));
         document.body.appendChild(popover);
@@ -112,5 +160,5 @@ await popover.present();
         if (data && data.date) {
-            this.date = DateTime.fromISO(data.date);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
-            const dateString = this.date.toFormat('yyyy-LL-dd');
+            this.date = data.date;
+            this.formatDate();
+            const dateString = toISODate(this.date);
             this.changes.emit(dateString);
@@ -124,4 +172,5 @@ }
         return h(Host, null,
-            (this.isDesktop || !this.nativeOnMobile) && h("span", { onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.formattedDate || this.placeholder),
-            !this.isDesktop && this.nativeOnMobile && h("input", { type: 'date', disabled: this.disabled, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, onInput: this.handleInput, max: this.max, min: this.min, required: this.required, value: this.date ? this.date.toISODate() : '' }));
+            (this.isDesktop || !this.ionDateTimeOnMobile) && h("span", { onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.formattedDate || this.placeholder),
+            !this.isDesktop && this.ionDateTimeOnMobile &&
+                h("ion-datetime", { value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode }));
     }
@@ -149,8 +198,26 @@ static get is() { return "ionic-datepicker"; }
                 "tags": [],
-                "text": "How the date should be formatted for display purposes\nDefault: \"DDD\""
+                "text": "How the date should be formatted for ion-datetime for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)\nDefault: \"DD. MMMM YYYY\""
             },
             "attribute": "display-format",
             "reflect": false,
-            "defaultValue": "'DDD'"
+            "defaultValue": "'DD. MMMM YYYY'"
         },
+        "pickerFormat": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "How the date should be formatted for ion-datetime  for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)\nDefault: \"DD. MMMM YYYY\""
+            },
+            "attribute": "picker-format",
+            "reflect": false,
+            "defaultValue": "'DD. MMMM YYYY'"
+        },
         "disabled": {
@@ -223,5 +290,5 @@ "type": "boolean",
             "reflect": false,
-            "defaultValue": "'Datum'"
+            "defaultValue": "'Datum ausw\u00E4hlen'"
         },
-        "nativeOnMobile": {
+        "ionDateTimeOnMobile": {
             "type": "boolean",
@@ -238,5 +305,5 @@ "mutable": false,
                 "tags": [],
-                "text": "nativeOnMobile if native date picker is used on mobile devices\nDefault: false"
+                "text": "ionDateTimeOnMobile if ion datetime picker is used on mobile devices\nDefault: false"
             },
-            "attribute": "native-on-mobile",
+            "attribute": "ion-date-time-on-mobile",
             "reflect": false,
@@ -246,7 +313,7 @@ "defaultValue": "false"
         "max": {
-            "type": "any",
+            "type": "string",
             "mutable": false,
             "complexType": {
-                "original": "any",
-                "resolved": "any",
+                "original": "string",
+                "resolved": "string",
                 "references": {}
@@ -262,10 +329,10 @@ },
             "reflect": false,
-            "defaultValue": "DateTime.local().plus({years: 100}).toISODate()"
+            "defaultValue": "DEFAULT_MAX()"
         },
         "min": {
-            "type": "any",
+            "type": "string",
             "mutable": false,
             "complexType": {
-                "original": "any",
-                "resolved": "any",
+                "original": "string",
+                "resolved": "string",
                 "references": {}
@@ -281,3 +348,3 @@ },
             "reflect": false,
-            "defaultValue": "DateTime.local().minus({years: 100}).toISODate()"
+            "defaultValue": "DEFAULT_MIN()"
         },
@@ -320,9 +387,12 @@ "required": {
         },
-        "popoverOptions": {
+        "ionPopoverOptions": {
             "type": "unknown",
             "mutable": false,
             "complexType": {
-                "original": "PopoverOptions | {}",
-                "resolved": "PopoverOptions<ComponentRef> | {}",
+                "original": "Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'>",
+                "resolved": "{ showBackdrop?: boolean; backdropDismiss?: boolean; translucent?: boolean; cssClass?: string | string[]; event?: Event; delegate?: FrameworkDelegate; animated?: boolean; keyboardClose?: boolean; id?: string; enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; }",
                 "references": {
+                    "Omit": {
+                        "location": "global"
+                    },
                     "PopoverOptions": {
@@ -338,6 +408,28 @@ "location": "import",
                 "tags": [],
-                "text": "Change ionic popover options, PopoverOptions |\u00A0{}\nDefault: {}"
+                "text": "Change ionic popover options, Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'>\nDefault: {}"
             },
             "defaultValue": "{}"
         },
+        "mode": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "Mode",
+                "resolved": "\"ios\" | \"md\"",
+                "references": {
+                    "Mode": {
+                        "location": "import",
+                        "path": "@ionic/core"
+                    }
+                }
+            },
+            "required": false,
+            "optional": true,
+            "docs": {
+                "tags": [],
+                "text": "Changes the mode of ion-popover and ion-datetime>\nDefault: undefined"
+            },
+            "attribute": "mode",
+            "reflect": false
+        },
         "errorClass": {
@@ -360,2 +452,120 @@ "type": "string",
             "defaultValue": "'ionic-datepicker-error'"
+        },
+        "monthNames": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "string[]",
+                "resolved": "string[]",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Possibility to overwrite month names\nDefault: ['Januar', 'Februar', 'M\u00E4rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']"
+            },
+            "defaultValue": "MONTH_NAMES"
+        },
+        "monthShortNames": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "string[]",
+                "resolved": "string[]",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Possibility to overwrite month shortnames\nDefault: ['Jan', 'Feb', 'M\u00E4r', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']"
+            },
+            "defaultValue": "MONTH_SHORT_NAMES"
+        },
+        "dayNames": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "string[]",
+                "resolved": "string[]",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Possibility to overwrite day names\nDefault: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']"
+            },
+            "defaultValue": "DAY_NAMES"
+        },
+        "dayShortNames": {
+            "type": "unknown",
+            "mutable": false,
+            "complexType": {
+                "original": "string[]",
+                "resolved": "string[]",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Possibility to overwrite day shortnames\nDefault: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']"
+            },
+            "defaultValue": "DAY_SHORT_NAMES"
+        },
+        "okayLabel": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Set okay label\nDefault: 'Okay'"
+            },
+            "attribute": "okay-label",
+            "reflect": false,
+            "defaultValue": "DEFAULT_OKAY_LABEL"
+        },
+        "cancelLabel": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Set cancel label\nDefault: 'Abbrechen'"
+            },
+            "attribute": "cancel-label",
+            "reflect": false,
+            "defaultValue": "DEFAULT_CANCEL_LABEL"
+        },
+        "yearLabel": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Set year label\nDefault: 'Jahr'"
+            },
+            "attribute": "year-label",
+            "reflect": false,
+            "defaultValue": "DEFAULT_YEAR_LABEL"
         }
@@ -362,0 +572,0 @@ }; }

dist/esm-es5/ionic-datepicker-popover.entry.js

 import { r as registerInstance, h } from './index-f3e464ac.js';
+import { D as DEFAULT_MAX, a as DEFAULT_MIN, d as DAY_SHORT_NAMES, M as MONTH_NAMES, b as MONTH_SHORT_NAMES, e as DEFAULT_OKAY_LABEL, g as DEFAULT_YEAR_LABEL } from './utils-d4f3bb0d.js';
 
-const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
+const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--placeholder-color:var(--ion-placeholder-color, var(--ion-color-step-400, #999));--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
 
 const ionicDatepickerPopoverCss = variablesCss + "ion-popover.datepicker-popover,ion-popover.sc-ion-popover-md-h.datepicker-popover{--width:var(--popover-width);--max-width:var(--popover-width);--min-width:var(--popover-width)}ionic-datepicker-popover .qs-datepicker-container{border:0;border-radius:0;margin-top:0;-webkit-box-shadow:none;box-shadow:none;position:relative}ionic-datepicker-popover .qs-datepicker .qs-controls{background-color:var(--controls-background);padding:var(--controls-padding)}ionic-datepicker-popover .qs-datepicker .qs-squares{-ms-flex-pack:center;justify-content:center}ionic-datepicker-popover .qs-datepicker .qs-square{border-radius:var(--square-border-radius);height:var(--square-dimension);width:var(--square-dimension)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-day{font-weight:var(--square-font-weight)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-current.qs-active,ionic-datepicker-popover .qs-datepicker .qs-square.qs-active{background-color:var(--square-active-background);color:var(--square-active-color)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-current{background-color:var(--square-current-background);color:var(--square-current-color)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-current .qs-num{text-decoration:none}ionic-datepicker-popover .qs-datepicker .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{background-color:var(--square-hover-background);color:var(--square-hover-color)}ionic-datepicker-popover .qs-datepicker .qs-overlay .qs-submit{background:transparent;padding:calc(var(--base-spacing-small) * .5) var(--base-spacing)}ionic-datepicker-popover .qs-datepicker .qs-overlay .qs-overlay-year{font-size:var(--font-size-small);width:auto}ionic-datepicker-popover .qs-datepicker .qs-overlay .qs-close{font-size:var(--font-size-base);padding-right:var(--base-spacing)}";
 
-const DateTime = window.luxon.DateTime;
 const IonicDatepickerPopover = class {
@@ -22,11 +22,6 @@ constructor(hostRef) {
         /**
-         * selected default date as iso date|datetime string
-         * Default: today
-         */
-        this.selectedDate = DateTime.local().toISODate();
-        /**
          * Max selectable date as iso date|datetime string
          * Default: today + 100 years
          */
-        this.max = DateTime.local().plus({ years: 100 }).toISODate();
+        this.max = DEFAULT_MAX();
         /**
@@ -36,3 +31,3 @@ * Min selectable date as iso date|datetime string
          */
-        this.min = DateTime.local().minus({ years: 100 }).toISODate();
+        this.min = DEFAULT_MIN();
     }
@@ -48,5 +43,5 @@ setDisabled(_prev, current) {
             alwaysShow: true,
-            customDays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-            customMonths: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-            customOverlayMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+            customDays: DAY_SHORT_NAMES,
+            customMonths: MONTH_NAMES,
+            customOverlayMonths: MONTH_SHORT_NAMES,
             dateSelected: date && date.getTime() <= new Date(this.max).getTime() && date.getTime() >= new Date(this.min).getTime() ? date : new Date(),
@@ -58,4 +53,4 @@ maxDate: new Date(this.max),
             },
-            overlayButton: 'Okay',
-            overlayPlaceholder: 'Jahr',
+            overlayButton: DEFAULT_OKAY_LABEL,
+            overlayPlaceholder: DEFAULT_YEAR_LABEL,
             showAllDates: true,
@@ -62,0 +57,0 @@ startDay: 1

dist/esm-es5/ionic-datepicker.entry.js

 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f3e464ac.js';
+import { D as DEFAULT_MAX, a as DEFAULT_MIN, M as MONTH_NAMES, b as MONTH_SHORT_NAMES, c as DAY_NAMES, d as DAY_SHORT_NAMES, e as DEFAULT_OKAY_LABEL, f as DEFAULT_CANCEL_LABEL, g as DEFAULT_YEAR_LABEL, t as toISODate, r as renderDatetime } from './utils-d4f3bb0d.js';
 
-const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
+const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--placeholder-color:var(--ion-placeholder-color, var(--ion-color-step-400, #999));--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
 
-const ionicDatepickerCss = variablesCss + "span{cursor:pointer}:host{padding-right:var(--base-spacing-small)}input{border:0}span.placeholder{font-style:italic}span.disabled,input[disabled],:host.disabled{cursor:not-allowed;background:transparent;opacity:.3}span.ionic-datepicker-error{color:var(--error-color)}";
+const ionicDatepickerCss = variablesCss + "span{cursor:pointer;padding-right:var(--base-spacing-small)}input{border:0}span.placeholder{color:var(--placeholder-color)}span.disabled,input[disabled],:host.disabled{cursor:not-allowed;background:transparent;pointer-events:none;opacity:.3}span.ionic-datepicker-error{color:var(--error-color)}";
 
-const DateTime = window.luxon.DateTime;
 const isDesktop = () => !(window.matchMedia('(any-pointer:coarse)').matches);
@@ -13,7 +13,12 @@ const IonicDatepicker = class {
         /**
-         * How the date should be formatted for display purposes
-         * Default: "DDD"
+         * How the date should be formatted for ion-datetime for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+         * Default: "DD. MMMM YYYY"
          */
-        this.displayFormat = 'DDD';
+        this.displayFormat = 'DD. MMMM YYYY';
         /**
+         * How the date should be formatted for ion-datetime  for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+         * Default: "DD. MMMM YYYY"
+         */
+        this.pickerFormat = 'DD. MMMM YYYY';
+        /**
          * Flag if datepicking is disabled
@@ -32,8 +37,8 @@ * Default: disabled
          */
-        this.placeholder = 'Datum';
+        this.placeholder = 'Datum auswählen';
         /**
-         * nativeOnMobile if native date picker is used on mobile devices
+         * ionDateTimeOnMobile if ion datetime picker is used on mobile devices
          * Default: false
          */
-        this.nativeOnMobile = false;
+        this.ionDateTimeOnMobile = false;
         /**
@@ -43,3 +48,3 @@ * Max selectable date as iso date|datetime string
          */
-        this.max = DateTime.local().plus({ years: 100 }).toISODate();
+        this.max = DEFAULT_MAX();
         /**
@@ -49,3 +54,3 @@ * Min selectable date as iso date|datetime string
          */
-        this.min = DateTime.local().minus({ years: 100 }).toISODate();
+        this.min = DEFAULT_MIN();
         /**
@@ -62,6 +67,6 @@ * Required input
         /**
-         * Change ionic popover options, PopoverOptions | {}
+         * Change ionic popover options, Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'>
          * Default: {}
          */
-        this.popoverOptions = {};
+        this.ionPopoverOptions = {};
         /**
@@ -73,2 +78,37 @@ * Possibility to overwrite the error css class
         /**
+         * Possibility to overwrite month names
+         * Default: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+         */
+        this.monthNames = MONTH_NAMES;
+        /**
+         * Possibility to overwrite month shortnames
+         * Default: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+         */
+        this.monthShortNames = MONTH_SHORT_NAMES;
+        /**
+         * Possibility to overwrite day names
+         * Default: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+         */
+        this.dayNames = DAY_NAMES;
+        /**
+         * Possibility to overwrite day shortnames
+         * Default: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+         */
+        this.dayShortNames = DAY_SHORT_NAMES;
+        /**
+         * Set okay label
+         * Default: 'Okay'
+         */
+        this.okayLabel = DEFAULT_OKAY_LABEL;
+        /**
+         * Set cancel label
+         * Default: 'Abbrechen'
+         */
+        this.cancelLabel = DEFAULT_CANCEL_LABEL;
+        /**
+         * Set year label
+         * Default: 'Jahr'
+         */
+        this.yearLabel = DEFAULT_YEAR_LABEL;
+        /**
          * Stores the current selected date as formatted string for display purposes
@@ -85,15 +125,23 @@ */
             if (!this.defaultDate || !this.defaultDate.trim()) {
-                this.defaultDate = DateTime.local().toISODate();
+                this.defaultDate = toISODate(new Date().toISOString());
             }
         }
         if (this.defaultDate) {
-            this.date = DateTime.fromISO(this.defaultDate);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
+            this.date = this.defaultDate;
+            this.formatDate();
         }
     }
+    formatDate() {
+        this.formattedDate = renderDatetime(this.displayFormat, this.date, {
+            dayNames: this.dayNames,
+            dayShortNames: this.dayShortNames,
+            monthNames: this.monthNames,
+            monthShortNames: this.monthShortNames
+        });
+    }
     handleInput(ev) {
-        if (this.disabled) {
-            this.date = DateTime.fromISO(ev.target.value);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
-            this.changes.emit(this.date.toISODate());
+        if (!this.disabled) {
+            this.date = ev.detail.value;
+            this.formatDate();
+            this.changes.emit(toISODate(this.date));
         }
@@ -105,4 +153,4 @@ }
         }
-        const popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.popoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
-                selectedDate: this.date ? this.date.toISODate() : null,
+        const popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.ionPopoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
+                selectedDate: this.date || null,
                 disabled: this.disabled,
@@ -112,4 +160,4 @@ displayFormat: this.displayFormat,
                 min: this.min,
-                pickerOptions: this.pickerOptions
-            }, cssClass: 'datepicker-popover', event: event }));
+                pickerOptions: Object.assign(Object.assign({}, this.pickerOptions), { customDays: this.dayShortNames, customMonths: this.monthNames, customOverlayMonths: this.monthShortNames, overlayButton: this.okayLabel, overlayPlaceholder: this.yearLabel })
+            }, cssClass: 'datepicker-popover', event: event, mode: this.mode }));
         document.body.appendChild(popover);
@@ -119,5 +167,5 @@ await popover.present();
         if (data && data.date) {
-            this.date = DateTime.fromISO(data.date);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
-            const dateString = this.date.toFormat('yyyy-LL-dd');
+            this.date = data.date;
+            this.formatDate();
+            const dateString = toISODate(this.date);
             this.changes.emit(dateString);
@@ -130,3 +178,4 @@ }
         const errorClassName = this.error && !!this.errorClass ? this.errorClass : '';
-        return h(Host, null, (this.isDesktop || !this.nativeOnMobile) && h("span", { onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.formattedDate || this.placeholder), !this.isDesktop && this.nativeOnMobile && h("input", { type: 'date', disabled: this.disabled, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, onInput: this.handleInput, max: this.max, min: this.min, required: this.required, value: this.date ? this.date.toISODate() : '' }));
+        return h(Host, null, (this.isDesktop || !this.ionDateTimeOnMobile) && h("span", { onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.formattedDate || this.placeholder), !this.isDesktop && this.ionDateTimeOnMobile &&
+            h("ion-datetime", { value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode }));
     }
@@ -133,0 +182,0 @@ };

dist/esm/ionic-datepicker-popover.entry.js

 import { r as registerInstance, h } from './index-f3e464ac.js';
+import { D as DEFAULT_MAX, a as DEFAULT_MIN, d as DAY_SHORT_NAMES, M as MONTH_NAMES, b as MONTH_SHORT_NAMES, e as DEFAULT_OKAY_LABEL, g as DEFAULT_YEAR_LABEL } from './utils-d4f3bb0d.js';
 
-const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
+const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--placeholder-color:var(--ion-placeholder-color, var(--ion-color-step-400, #999));--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
 
 const ionicDatepickerPopoverCss = variablesCss + "ion-popover.datepicker-popover,ion-popover.sc-ion-popover-md-h.datepicker-popover{--width:var(--popover-width);--max-width:var(--popover-width);--min-width:var(--popover-width)}ionic-datepicker-popover .qs-datepicker-container{border:0;border-radius:0;margin-top:0;-webkit-box-shadow:none;box-shadow:none;position:relative}ionic-datepicker-popover .qs-datepicker .qs-controls{background-color:var(--controls-background);padding:var(--controls-padding)}ionic-datepicker-popover .qs-datepicker .qs-squares{-ms-flex-pack:center;justify-content:center}ionic-datepicker-popover .qs-datepicker .qs-square{border-radius:var(--square-border-radius);height:var(--square-dimension);width:var(--square-dimension)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-day{font-weight:var(--square-font-weight)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-current.qs-active,ionic-datepicker-popover .qs-datepicker .qs-square.qs-active{background-color:var(--square-active-background);color:var(--square-active-color)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-current{background-color:var(--square-current-background);color:var(--square-current-color)}ionic-datepicker-popover .qs-datepicker .qs-square.qs-current .qs-num{text-decoration:none}ionic-datepicker-popover .qs-datepicker .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{background-color:var(--square-hover-background);color:var(--square-hover-color)}ionic-datepicker-popover .qs-datepicker .qs-overlay .qs-submit{background:transparent;padding:calc(var(--base-spacing-small) * .5) var(--base-spacing)}ionic-datepicker-popover .qs-datepicker .qs-overlay .qs-overlay-year{font-size:var(--font-size-small);width:auto}ionic-datepicker-popover .qs-datepicker .qs-overlay .qs-close{font-size:var(--font-size-base);padding-right:var(--base-spacing)}";
 
-const DateTime = window.luxon.DateTime;
 const IonicDatepickerPopover = class {
@@ -22,11 +22,6 @@ constructor(hostRef) {
         /**
-         * selected default date as iso date|datetime string
-         * Default: today
-         */
-        this.selectedDate = DateTime.local().toISODate();
-        /**
          * Max selectable date as iso date|datetime string
          * Default: today + 100 years
          */
-        this.max = DateTime.local().plus({ years: 100 }).toISODate();
+        this.max = DEFAULT_MAX();
         /**
@@ -36,3 +31,3 @@ * Min selectable date as iso date|datetime string
          */
-        this.min = DateTime.local().minus({ years: 100 }).toISODate();
+        this.min = DEFAULT_MIN();
     }
@@ -48,5 +43,5 @@ setDisabled(_prev, current) {
             alwaysShow: true,
-            customDays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-            customMonths: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-            customOverlayMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+            customDays: DAY_SHORT_NAMES,
+            customMonths: MONTH_NAMES,
+            customOverlayMonths: MONTH_SHORT_NAMES,
             dateSelected: date && date.getTime() <= new Date(this.max).getTime() && date.getTime() >= new Date(this.min).getTime() ? date : new Date(),
@@ -58,4 +53,4 @@ maxDate: new Date(this.max),
             },
-            overlayButton: 'Okay',
-            overlayPlaceholder: 'Jahr',
+            overlayButton: DEFAULT_OKAY_LABEL,
+            overlayPlaceholder: DEFAULT_YEAR_LABEL,
             showAllDates: true,
@@ -62,0 +57,0 @@ startDay: 1

dist/esm/ionic-datepicker.entry.js

 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f3e464ac.js';
+import { D as DEFAULT_MAX, a as DEFAULT_MIN, M as MONTH_NAMES, b as MONTH_SHORT_NAMES, c as DAY_NAMES, d as DAY_SHORT_NAMES, e as DEFAULT_OKAY_LABEL, f as DEFAULT_CANCEL_LABEL, g as DEFAULT_YEAR_LABEL, t as toISODate, r as renderDatetime } from './utils-d4f3bb0d.js';
 
-const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
+const variablesCss = ":root,:host{--base-spacing:var(--ion-padding, 16px);--base-spacing-small:calc(var(--base-spacing) * 0.7);--base-spacing-large:calc(var(--base-spacing) * 1.5);--font-size-base:14px;--font-size-small:calc(var(--font-size-base) * 0.9);--font-size-medium:calc(var(--font-size-base) * 1.2);--font-size-large:calc(var(--font-size-base) * 1.4);--text-color:var(--ion-text-color, #424242);--error-color:var(--ion-color-danger, #eb445a);--placeholder-color:var(--ion-placeholder-color, var(--ion-color-step-400, #999));--popover-width:250px;--square-dimension:33px;--square-border-radius:5px;--square-font-weight:normal;--square-hover-color:var(--ion-color-white, #fff);--square-hover-background:var(--ion-color-secondary, #3dc2ff);--controls-padding:5px;--controls-background:var(--ion-color-white, #fff);--square-active-color:var(--ion-color-white, #fff);--square-active-background:var(--ion-color-primary, #3880ff);--square-current-color:var(--ion-color-white, #fff);--square-current-background:var(--ion-color-medium, #92949c)}";
 
-const ionicDatepickerCss = variablesCss + "span{cursor:pointer}:host{padding-right:var(--base-spacing-small)}input{border:0}span.placeholder{font-style:italic}span.disabled,input[disabled],:host.disabled{cursor:not-allowed;background:transparent;opacity:.3}span.ionic-datepicker-error{color:var(--error-color)}";
+const ionicDatepickerCss = variablesCss + "span{cursor:pointer;padding-right:var(--base-spacing-small)}input{border:0}span.placeholder{color:var(--placeholder-color)}span.disabled,input[disabled],:host.disabled{cursor:not-allowed;background:transparent;pointer-events:none;opacity:.3}span.ionic-datepicker-error{color:var(--error-color)}";
 
-const DateTime = window.luxon.DateTime;
 const isDesktop = () => !(window.matchMedia('(any-pointer:coarse)').matches);
@@ -13,7 +13,12 @@ const IonicDatepicker = class {
         /**
-         * How the date should be formatted for display purposes
-         * Default: "DDD"
+         * How the date should be formatted for ion-datetime for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+         * Default: "DD. MMMM YYYY"
          */
-        this.displayFormat = 'DDD';
+        this.displayFormat = 'DD. MMMM YYYY';
         /**
+         * How the date should be formatted for ion-datetime  for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+         * Default: "DD. MMMM YYYY"
+         */
+        this.pickerFormat = 'DD. MMMM YYYY';
+        /**
          * Flag if datepicking is disabled
@@ -32,8 +37,8 @@ * Default: disabled
          */
-        this.placeholder = 'Datum';
+        this.placeholder = 'Datum auswählen';
         /**
-         * nativeOnMobile if native date picker is used on mobile devices
+         * ionDateTimeOnMobile if ion datetime picker is used on mobile devices
          * Default: false
          */
-        this.nativeOnMobile = false;
+        this.ionDateTimeOnMobile = false;
         /**
@@ -43,3 +48,3 @@ * Max selectable date as iso date|datetime string
          */
-        this.max = DateTime.local().plus({ years: 100 }).toISODate();
+        this.max = DEFAULT_MAX();
         /**
@@ -49,3 +54,3 @@ * Min selectable date as iso date|datetime string
          */
-        this.min = DateTime.local().minus({ years: 100 }).toISODate();
+        this.min = DEFAULT_MIN();
         /**
@@ -62,6 +67,6 @@ * Required input
         /**
-         * Change ionic popover options, PopoverOptions | {}
+         * Change ionic popover options, Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'>
          * Default: {}
          */
-        this.popoverOptions = {};
+        this.ionPopoverOptions = {};
         /**
@@ -73,2 +78,37 @@ * Possibility to overwrite the error css class
         /**
+         * Possibility to overwrite month names
+         * Default: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+         */
+        this.monthNames = MONTH_NAMES;
+        /**
+         * Possibility to overwrite month shortnames
+         * Default: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+         */
+        this.monthShortNames = MONTH_SHORT_NAMES;
+        /**
+         * Possibility to overwrite day names
+         * Default: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+         */
+        this.dayNames = DAY_NAMES;
+        /**
+         * Possibility to overwrite day shortnames
+         * Default: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+         */
+        this.dayShortNames = DAY_SHORT_NAMES;
+        /**
+         * Set okay label
+         * Default: 'Okay'
+         */
+        this.okayLabel = DEFAULT_OKAY_LABEL;
+        /**
+         * Set cancel label
+         * Default: 'Abbrechen'
+         */
+        this.cancelLabel = DEFAULT_CANCEL_LABEL;
+        /**
+         * Set year label
+         * Default: 'Jahr'
+         */
+        this.yearLabel = DEFAULT_YEAR_LABEL;
+        /**
          * Stores the current selected date as formatted string for display purposes
@@ -85,15 +125,23 @@ */
             if (!this.defaultDate || !this.defaultDate.trim()) {
-                this.defaultDate = DateTime.local().toISODate();
+                this.defaultDate = toISODate(new Date().toISOString());
             }
         }
         if (this.defaultDate) {
-            this.date = DateTime.fromISO(this.defaultDate);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
+            this.date = this.defaultDate;
+            this.formatDate();
         }
     }
+    formatDate() {
+        this.formattedDate = renderDatetime(this.displayFormat, this.date, {
+            dayNames: this.dayNames,
+            dayShortNames: this.dayShortNames,
+            monthNames: this.monthNames,
+            monthShortNames: this.monthShortNames
+        });
+    }
     handleInput(ev) {
-        if (this.disabled) {
-            this.date = DateTime.fromISO(ev.target.value);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
-            this.changes.emit(this.date.toISODate());
+        if (!this.disabled) {
+            this.date = ev.detail.value;
+            this.formatDate();
+            this.changes.emit(toISODate(this.date));
         }
@@ -105,4 +153,4 @@ }
         }
-        const popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.popoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
-                selectedDate: this.date ? this.date.toISODate() : null,
+        const popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.ionPopoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
+                selectedDate: this.date || null,
                 disabled: this.disabled,
@@ -112,4 +160,4 @@ displayFormat: this.displayFormat,
                 min: this.min,
-                pickerOptions: this.pickerOptions
-            }, cssClass: 'datepicker-popover', event: event }));
+                pickerOptions: Object.assign(Object.assign({}, this.pickerOptions), { customDays: this.dayShortNames, customMonths: this.monthNames, customOverlayMonths: this.monthShortNames, overlayButton: this.okayLabel, overlayPlaceholder: this.yearLabel })
+            }, cssClass: 'datepicker-popover', event: event, mode: this.mode }));
         document.body.appendChild(popover);
@@ -119,5 +167,5 @@ await popover.present();
         if (data && data.date) {
-            this.date = DateTime.fromISO(data.date);
-            this.formattedDate = this.date.toFormat(this.displayFormat);
-            const dateString = this.date.toFormat('yyyy-LL-dd');
+            this.date = data.date;
+            this.formatDate();
+            const dateString = toISODate(this.date);
             this.changes.emit(dateString);
@@ -130,3 +178,4 @@ }
         const errorClassName = this.error && !!this.errorClass ? this.errorClass : '';
-        return h(Host, null, (this.isDesktop || !this.nativeOnMobile) && h("span", { onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.formattedDate || this.placeholder), !this.isDesktop && this.nativeOnMobile && h("input", { type: 'date', disabled: this.disabled, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, onInput: this.handleInput, max: this.max, min: this.min, required: this.required, value: this.date ? this.date.toISODate() : '' }));
+        return h(Host, null, (this.isDesktop || !this.ionDateTimeOnMobile) && h("span", { onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.formattedDate || this.placeholder), !this.isDesktop && this.ionDateTimeOnMobile &&
+            h("ion-datetime", { value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode }));
     }
@@ -133,0 +182,0 @@ };

dist/ionic-datepicker/ionic-datepicker.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as a}from"./p-a9232c04.js";e().then(e=>a([["p-aaa74b2c",[[1,"ionic-datepicker",{displayFormat:[1,"display-format"],disabled:[4],pickerOptions:[16],defaultDate:[1,"default-date"],placeholder:[1],nativeOnMobile:[4,"native-on-mobile"],max:[8],min:[8],required:[4],error:[4],popoverOptions:[16],errorClass:[1,"error-class"],formattedDate:[32],date:[32]}]]],["p-c8fb4429",[[0,"ionic-datepicker-popover",{disabled:[4],pickerOptions:[16],selectedDate:[8,"selected-date"],max:[8],min:[8]}]]]],e));
+import{p as e,b as a}from"./p-a9232c04.js";e().then(e=>a([["p-bb395ca4",[[1,"ionic-datepicker",{displayFormat:[1,"display-format"],pickerFormat:[1,"picker-format"],disabled:[4],pickerOptions:[16],defaultDate:[1,"default-date"],placeholder:[1],ionDateTimeOnMobile:[4,"ion-date-time-on-mobile"],max:[1],min:[1],required:[4],error:[4],ionPopoverOptions:[16],mode:[1],errorClass:[1,"error-class"],monthNames:[16],monthShortNames:[16],dayNames:[16],dayShortNames:[16],okayLabel:[1,"okay-label"],cancelLabel:[1,"cancel-label"],yearLabel:[1,"year-label"],formattedDate:[32],date:[32]}]]],["p-680f8510",[[0,"ionic-datepicker-popover",{disabled:[4],pickerOptions:[16],selectedDate:[1,"selected-date"],max:[1],min:[1]}]]]],e));

dist/ionic-datepicker/p-ba32d340.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-6b312a4f.system.js"],(function(){"use strict";var e,t;return{setters:[function(r){e=r.p;t=r.b}],execute:function(){e().then(e=>t([["p-475cbe80.system",[[1,"ionic-datepicker",{displayFormat:[1,"display-format"],disabled:[4],pickerOptions:[16],defaultDate:[1,"default-date"],placeholder:[1],nativeOnMobile:[4,"native-on-mobile"],max:[8],min:[8],required:[4],error:[4],popoverOptions:[16],errorClass:[1,"error-class"],formattedDate:[32],date:[32]}]]],["p-756c99ef.system",[[0,"ionic-datepicker-popover",{disabled:[4],pickerOptions:[16],selectedDate:[8,"selected-date"],max:[8],min:[8]}]]]],e))}}}));
+System.register(["./p-6b312a4f.system.js"],(function(){"use strict";var e,a;return{setters:[function(t){e=t.p;a=t.b}],execute:function(){e().then(e=>a([["p-73660b51.system",[[1,"ionic-datepicker",{displayFormat:[1,"display-format"],pickerFormat:[1,"picker-format"],disabled:[4],pickerOptions:[16],defaultDate:[1,"default-date"],placeholder:[1],ionDateTimeOnMobile:[4,"ion-date-time-on-mobile"],max:[1],min:[1],required:[4],error:[4],ionPopoverOptions:[16],mode:[1],errorClass:[1,"error-class"],monthNames:[16],monthShortNames:[16],dayNames:[16],dayShortNames:[16],okayLabel:[1,"okay-label"],cancelLabel:[1,"cancel-label"],yearLabel:[1,"year-label"],formattedDate:[32],date:[32]}]]],["p-d19d60b6.system",[[0,"ionic-datepicker-popover",{disabled:[4],pickerOptions:[16],selectedDate:[1,"selected-date"],max:[1],min:[1]}]]]],e))}}}));

dist/types/components.d.ts

@@ -8,6 +8,18 @@ /* eslint-disable */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { PopoverOptions, } from "@ionic/core";
+import { Mode, PopoverOptions, } from "@ionic/core";
 export namespace Components {
     interface IonicDatepicker {
         /**
+          * Set cancel label Default: 'Abbrechen'
+         */
+        "cancelLabel": string;
+        /**
+          * Possibility to overwrite day names Default: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+         */
+        "dayNames": string[];
+        /**
+          * Possibility to overwrite day shortnames Default: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+         */
+        "dayShortNames": string[];
+        /**
           * default date as iso date|datetime string Default: today when required
@@ -21,3 +33,3 @@ */
         /**
-          * How the date should be formatted for display purposes Default: "DDD"
+          * How the date should be formatted for ion-datetime for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats) Default: "DD. MMMM YYYY"
          */
@@ -34,14 +46,38 @@ "displayFormat": string;
         /**
+          * ionDateTimeOnMobile if ion datetime picker is used on mobile devices Default: false
+         */
+        "ionDateTimeOnMobile": boolean;
+        /**
+          * Change ionic popover options, Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'> Default: {}
+         */
+        "ionPopoverOptions": Omit<PopoverOptions, "mode" | "component" | "componentProps">;
+        /**
           * Max selectable date as iso date|datetime string Default: today + 100 years
          */
-        "max": any;
+        "max": string;
         /**
           * Min selectable date as iso date|datetime string Default: today - 100 years
          */
-        "min": any;
+        "min": string;
         /**
-          * nativeOnMobile if native date picker is used on mobile devices Default: false
+          * Changes the mode of ion-popover and ion-datetime> Default: undefined
          */
-        "nativeOnMobile": boolean;
+        "mode"?: Mode;
         /**
+          * Possibility to overwrite month names Default: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+         */
+        "monthNames": string[];
+        /**
+          * Possibility to overwrite month shortnames Default: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+         */
+        "monthShortNames": string[];
+        /**
+          * Set okay label Default: 'Okay'
+         */
+        "okayLabel": string;
+        /**
+          * How the date should be formatted for ion-datetime  for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats) Default: "DD. MMMM YYYY"
+         */
+        "pickerFormat": string;
+        /**
           * Options for the js-datepicker Default: {}
@@ -55,9 +91,9 @@ */
         /**
-          * Change ionic popover options, PopoverOptions | {} Default: {}
+          * Required input Default: false
          */
-        "popoverOptions": PopoverOptions | {};
+        "required": boolean;
         /**
-          * Required input Default: false
+          * Set year label Default: 'Jahr'
          */
-        "required": boolean;
+        "yearLabel": string;
     }
@@ -72,7 +108,7 @@ interface IonicDatepickerPopover {
          */
-        "max": any;
+        "max": string;
         /**
           * Min selectable date as iso date|datetime string Default: today - 100 years
          */
-        "min": any;
+        "min": string;
         /**
@@ -85,3 +121,3 @@ * Options for the js-datepicker Default: {}
          */
-        "selectedDate": any;
+        "selectedDate"?: string;
     }
@@ -110,2 +146,14 @@ }
         /**
+          * Set cancel label Default: 'Abbrechen'
+         */
+        "cancelLabel"?: string;
+        /**
+          * Possibility to overwrite day names Default: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+         */
+        "dayNames"?: string[];
+        /**
+          * Possibility to overwrite day shortnames Default: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+         */
+        "dayShortNames"?: string[];
+        /**
           * default date as iso date|datetime string Default: today when required
@@ -119,3 +167,3 @@ */
         /**
-          * How the date should be formatted for display purposes Default: "DDD"
+          * How the date should be formatted for ion-datetime for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats) Default: "DD. MMMM YYYY"
          */
@@ -132,14 +180,34 @@ "displayFormat"?: string;
         /**
+          * ionDateTimeOnMobile if ion datetime picker is used on mobile devices Default: false
+         */
+        "ionDateTimeOnMobile"?: boolean;
+        /**
+          * Change ionic popover options, Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'> Default: {}
+         */
+        "ionPopoverOptions"?: Omit<PopoverOptions, "mode" | "component" | "componentProps">;
+        /**
           * Max selectable date as iso date|datetime string Default: today + 100 years
          */
-        "max"?: any;
+        "max"?: string;
         /**
           * Min selectable date as iso date|datetime string Default: today - 100 years
          */
-        "min"?: any;
+        "min"?: string;
         /**
-          * nativeOnMobile if native date picker is used on mobile devices Default: false
+          * Changes the mode of ion-popover and ion-datetime> Default: undefined
          */
-        "nativeOnMobile"?: boolean;
+        "mode"?: Mode;
         /**
+          * Possibility to overwrite month names Default: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+         */
+        "monthNames"?: string[];
+        /**
+          * Possibility to overwrite month shortnames Default: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+         */
+        "monthShortNames"?: string[];
+        /**
+          * Set okay label Default: 'Okay'
+         */
+        "okayLabel"?: string;
+        /**
           * Event that emits the iso date string everytime the date changes
@@ -149,2 +217,6 @@ */
         /**
+          * How the date should be formatted for ion-datetime  for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats) Default: "DD. MMMM YYYY"
+         */
+        "pickerFormat"?: string;
+        /**
           * Options for the js-datepicker Default: {}
@@ -158,9 +230,9 @@ */
         /**
-          * Change ionic popover options, PopoverOptions | {} Default: {}
+          * Required input Default: false
          */
-        "popoverOptions"?: PopoverOptions | {};
+        "required"?: boolean;
         /**
-          * Required input Default: false
+          * Set year label Default: 'Jahr'
          */
-        "required"?: boolean;
+        "yearLabel"?: string;
     }
@@ -175,7 +247,7 @@ interface IonicDatepickerPopover {
          */
-        "max"?: any;
+        "max"?: string;
         /**
           * Min selectable date as iso date|datetime string Default: today - 100 years
          */
-        "min"?: any;
+        "min"?: string;
         /**
@@ -188,3 +260,3 @@ * Options for the js-datepicker Default: {}
          */
-        "selectedDate"?: any;
+        "selectedDate"?: string;
     }
@@ -191,0 +263,0 @@ interface IntrinsicElements {

dist/types/components/ionic-datepicker-popover/ionic-datepicker-popover.d.ts

@@ -19,3 +19,3 @@ export declare class IonicDatepickerPopover {
      */
-    selectedDate: any;
+    selectedDate?: string;
     /**
@@ -25,3 +25,3 @@ * Max selectable date as iso date|datetime string
      */
-    max: any;
+    max: string;
     /**
@@ -31,5 +31,5 @@ * Min selectable date as iso date|datetime string
      */
-    min: any;
+    min: string;
     componentDidLoad(): void;
     render(): any;
 }

dist/types/components/ionic-datepicker/ionic-datepicker.d.ts

@@ -1,10 +0,15 @@
-import { PopoverOptions } from '@ionic/core';
+import { PopoverOptions, Mode } from '@ionic/core';
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class IonicDatepicker {
     /**
-     * How the date should be formatted for display purposes
-     * Default: "DDD"
+     * How the date should be formatted for ion-datetime for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+     * Default: "DD. MMMM YYYY"
      */
     displayFormat: string;
     /**
+     * How the date should be formatted for ion-datetime  for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats)
+     * Default: "DD. MMMM YYYY"
+     */
+    pickerFormat: string;
+    /**
      * Flag if datepicking is disabled
@@ -30,6 +35,6 @@ * Default: disabled
     /**
-     * nativeOnMobile if native date picker is used on mobile devices
+     * ionDateTimeOnMobile if ion datetime picker is used on mobile devices
      * Default: false
      */
-    nativeOnMobile: boolean;
+    ionDateTimeOnMobile: boolean;
     /**
@@ -39,3 +44,3 @@ * Max selectable date as iso date|datetime string
      */
-    max: any;
+    max: string;
     /**
@@ -45,3 +50,3 @@ * Min selectable date as iso date|datetime string
      */
-    min: any;
+    min: string;
     /**
@@ -58,7 +63,12 @@ * Required input
     /**
-     * Change ionic popover options, PopoverOptions | {}
+     * Change ionic popover options, Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'>
      * Default: {}
      */
-    popoverOptions: PopoverOptions | {};
+    ionPopoverOptions: Omit<PopoverOptions, 'mode' | 'component' | 'componentProps'>;
     /**
+     * Changes the mode of ion-popover and ion-datetime>
+     * Default: undefined
+     */
+    mode?: Mode;
+    /**
      * Possibility to overwrite the error css class
@@ -69,2 +79,37 @@ * Default: 'ionic-datepicker-error'
     /**
+     * Possibility to overwrite month names
+     * Default: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+     */
+    monthNames: string[];
+    /**
+     * Possibility to overwrite month shortnames
+     * Default: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+     */
+    monthShortNames: string[];
+    /**
+     * Possibility to overwrite day names
+     * Default: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+     */
+    dayNames: string[];
+    /**
+     * Possibility to overwrite day shortnames
+     * Default: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+     */
+    dayShortNames: string[];
+    /**
+     * Set okay label
+     * Default: 'Okay'
+     */
+    okayLabel: string;
+    /**
+     * Set cancel label
+     * Default: 'Abbrechen'
+     */
+    cancelLabel: string;
+    /**
+     * Set year label
+     * Default: 'Jahr'
+     */
+    yearLabel: string;
+    /**
      * Event that emits the iso date string everytime the date changes
@@ -77,9 +122,15 @@ */
     formattedDate: string;
-    date: any;
+    /**
+     * Stores the current selected date as iso string
+     */
+    date: string;
     private isDesktop;
     constructor();
     componentWillLoad(): void;
-    handleInput(ev: InputEvent): void;
+    private formatDate;
+    handleInput(ev: CustomEvent<{
+        value: string;
+    }>): void;
     handleDateClick(event: MouseEvent): Promise<void>;
     render(): any;
 }

package.json

 {
   "name": "@codaline-io/ionic-datepicker",
-  "version": "0.0.14",
+  "version": "0.0.15-0",
   "description": "A datepicker component for ionic",
@@ -27,13 +27,10 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@types/luxon": "^1.21.0",
     "@ionic/core": "^5.0.5",
     "@stencil/core": "^1.11.0",
     "gh-pages": "^2.2.0",
-    "js-datepicker": "^5.4.0",
-    "luxon": "^1.22.0"
+    "js-datepicker": "^5.4.0"
   },
   "peerDependencies": {
     "@ionic/core": "^5.0.5",
-    "js-datepicker": "^5.4.0",
-    "luxon": "^1.22.0"
+    "js-datepicker": "^5.4.0"
   },
@@ -40,0 +37,0 @@ "repository": {

readme.md

@@ -5,3 +5,3 @@ ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
 
-This is a datepicker component for ionic projects. It is using [js-datepicker](https://www.npmjs.com/package/js-datepicker) in an [ion-popover](https://ionicframework.com/docs/api/popover) and the possibility to use a native date input on mobile devices.
+This is a datepicker component for ionic projects. It is using [js-datepicker](https://www.npmjs.com/package/js-datepicker) in an [ion-popover](https://ionicframework.com/docs/api/popover) and the possibility to use an ion-datetime component on mobile devices.
 
@@ -18,3 +18,3 @@ ## [Live Demo & Preview](https://codaline-io.github.io/ionic-datepicker)
 
-- Install [`js-datepicker`](https://www.npmjs.com/package/js-datepicker) and [`luxon`](https://www.npmjs.com/package/luxon)
+- Install [`js-datepicker`](https://www.npmjs.com/package/js-datepicker)
 - Make them globally available (on `window`) load `js-datepicker` css (in an angular project, just add them to your `angular.json` as scripts and styles)
@@ -21,0 +21,0 @@ - Keep in mind that it is only usable in an ionic project

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

824083

increased by7.55%

Dependency count

2

decreased by-33.33%

Dev dependency count

4

decreased by-33.33%

Number of package files

83

increased by9.21%

Lines of code

11077

increased by13.16%

No dependency changes