@syncfusion/ej2-calendars 20.4.52 → 21.1.35

package/src/timepicker/timepicker-model.d.ts

@@ -1,4 +1,4 @@
-import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Animation, AnimationModel, Browser, BaseEventArgs } from '@syncfusion/ej2-base';import { EmitType, cldrData, L10n, Component, getDefaultDateObject, rippleEffect, RippleOptions, Event } from '@syncfusion/ej2-base';import { remove, addClass, detach, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, extend, getUniqueID, ModuleDeclaration, ChildProperty } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { FocusEventArgs, BlurEventArgs, ClearedEventArgs } from '../calendar/calendar';import { Input, InputObject, IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { ListBase, ListBaseOptions, createElementParams } from '@syncfusion/ej2-lists';import {MaskPlaceholderModel} from '../common/maskplaceholder-model';import { MaskPlaceholder } from '../common/maskplaceholder';
+import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Animation, AnimationModel, Browser, BaseEventArgs } from '@syncfusion/ej2-base';import { EmitType, cldrData, L10n, Component, getDefaultDateObject, rippleEffect, RippleOptions, Event } from '@syncfusion/ej2-base';import { remove, addClass, detach, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, extend, getUniqueID, ModuleDeclaration, ChildProperty } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { FocusEventArgs, BlurEventArgs, ClearedEventArgs } from '../calendar/calendar';import { Input, InputObject, IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { ListBase, ListBaseOptions, createElementParams } from '@syncfusion/ej2-lists';
 import {TimeFormatObject,ChangeEventArgs,PopupEventArgs,ItemEventArgs} from "./timepicker";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -8,10 +8,10 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface TimeMaskPlaceholderModel {
 
     /**
-     * Specifies the mask placeholder value for day property.
-     *
-     * @default 'day'
-     */
+ * Specifies the mask placeholder value for day property.
+ *
+ * @default 'day'
+ */
     day?: string;
 
     /**
@@ -297,14 +297,14 @@ export interface TimePickerModel extends ComponentModel{
      * Specifies whether it is a masked timepicker or not.
      * By default the timepicker component render without masked input.
      * If you need masked timepicker input then specify it as true.
-     * 
+     *
      * @default false
      */
     enableMask?: boolean;
 
     /**
      * Specifies the mask placeholder to be displayed on masked timepicker.
-     * 
+     *
      * @default {day:'day' , month:'month', year: 'year', hour:'hour',minute:'minute',second:'second',dayOfTheWeek: 'day of the week'}
      * @aspType TimePickerMaskPlaceholder
      */

package/src/timepicker/timepicker.d.ts

@@ -86,10 +86,10 @@ export declare namespace TimePickerBase {
 }
 export declare class TimeMaskPlaceholder extends ChildProperty<TimeMaskPlaceholder> {
     /**
-         * Specifies the mask placeholder value for day property.
-         *
-         * @default 'day'
-         */
+     * Specifies the mask placeholder value for day property.
+     *
+     * @default 'day'
+     */
     day: string;
     /**
      * Specifies the mask placeholder value for month property.
@@ -410,11 +410,11 @@ export declare class TimePicker extends Component<HTMLElement> implements IInput
      */
     enableMask: boolean;
     /**
-    * Specifies the mask placeholder to be displayed on masked timepicker.
-    *
-    * @default {day:'day' , month:'month', year: 'year', hour:'hour',minute:'minute',second:'second',dayOfTheWeek: 'day of the week'}
-    * @aspType TimePickerMaskPlaceholder
-    */
+     * Specifies the mask placeholder to be displayed on masked timepicker.
+     *
+     * @default {day:'day' , month:'month', year: 'year', hour:'hour',minute:'minute',second:'second',dayOfTheWeek: 'day of the week'}
+     * @aspType TimePickerMaskPlaceholder
+     */
     maskPlaceholder: TimeMaskPlaceholderModel;
     /**
      * Triggers when the value is changed.

package/src/timepicker/timepicker.js

@@ -190,7 +190,7 @@ var TimePicker = /** @class */ (function (_super) {
         this.bindEvents();
         this.validateDisable();
         this.setValue(this.getFormattedValue(this.value));
-        if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType == 'Always' || !this.floatLabelType || !this.placeholder)) {
+        if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {
             this.updateInputValue(this.maskedDateValue);
             this.checkErrorState(this.maskedDateValue);
         }
@@ -200,7 +200,7 @@ var TimePicker = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
         }
-        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+        if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
         this.renderComplete();
@@ -301,8 +301,8 @@ var TimePicker = /** @class */ (function (_super) {
             attributes(this.inputElement, { 'name': this.element.id });
         }
         if (this.enableMask) {
-            this.notify("createMask", {
-                module: "MaskedDateTime",
+            this.notify('createMask', {
+                module: 'MaskedDateTime'
             });
         }
     };
@@ -651,7 +651,8 @@ var TimePicker = /** @class */ (function (_super) {
     };
     TimePicker.prototype.checkErrorState = function (val) {
         var value = this.getDateObject(val);
-        if ((this.validateState(value) && !this.invalidValueString) || (this.enableMask && this.inputElement.value === this.maskedDateValue)) {
+        if ((this.validateState(value) && !this.invalidValueString) ||
+            (this.enableMask && this.inputElement.value === this.maskedDateValue)) {
             this.removeErrorClass();
         }
         else {
@@ -899,8 +900,8 @@ var TimePicker = /** @class */ (function (_super) {
             event.preventDefault();
             if (this.enableMask) {
                 event.preventDefault();
-                this.notify("setMaskSelection", {
-                    module: "MaskedDateTime"
+                this.notify('setMaskSelection', {
+                    module: 'MaskedDateTime'
                 });
                 return;
             }
@@ -963,8 +964,8 @@ var TimePicker = /** @class */ (function (_super) {
                 case 'down':
                     if (this.enableMask && !this.readonly && !this.isPopupOpen()) {
                         event.preventDefault();
-                        this.notify("keyDownHandler", {
-                            module: "MaskedDateTime",
+                        this.notify('keyDownHandler', {
+                            module: 'MaskedDateTime',
                             e: event
                         });
                     }
@@ -1009,12 +1010,12 @@ var TimePicker = /** @class */ (function (_super) {
                 case 'tab':
                 case 'shiftTab':
                     if (!this.isPopupOpen() && this.enableMask && !this.readonly) {
-                        if ((this.inputElement.selectionStart == 0 && this.inputElement.selectionEnd == this.inputElement.value.length) ||
-                            (this.inputElement.selectionEnd !== this.inputElement.value.length && event.action == 'tab') ||
-                            (this.inputElement.selectionStart !== 0 && event.action == 'shiftTab') || (event.action == 'left' || event.action == 'right')) {
+                        if ((this.inputElement.selectionStart === 0 && this.inputElement.selectionEnd === this.inputElement.value.length) ||
+                            (this.inputElement.selectionEnd !== this.inputElement.value.length && event.action === 'tab') ||
+                            (this.inputElement.selectionStart !== 0 && event.action === 'shiftTab') || (event.action === 'left' || event.action === 'right')) {
                             event.preventDefault();
                         }
-                        this.notify("keyDownHandler", { module: "MaskedDateTime",
+                        this.notify('keyDownHandler', { module: 'MaskedDateTime',
                             e: event
                         });
                     }
@@ -1131,8 +1132,8 @@ var TimePicker = /** @class */ (function (_super) {
         if (this.isValidLI(li)) {
             this.checkValue(li.getAttribute('data-value'));
             if (this.enableMask) {
-                this.notify("setMaskSelection", {
-                    module: "MaskedDateTime"
+                this.notify('createMask', {
+                    module: 'MaskedDateTime', navigated: true
                 });
             }
             this.selectedElement = li;
@@ -1278,8 +1279,8 @@ var TimePicker = /** @class */ (function (_super) {
         switch (e.code) {
             case 'Delete':
                 if (this.enableMask && !this.popupObj && !this.readonly) {
-                    this.notify("keyDownHandler", {
-                        module: "MaskedDateTime",
+                    this.notify('keyDownHandler', {
+                        module: 'MaskedDateTime',
                         e: e
                     });
                 }
@@ -1325,8 +1326,8 @@ var TimePicker = /** @class */ (function (_super) {
     };
     TimePicker.prototype.inputEventHandler = function () {
         if (this.enableMask) {
-            this.notify("inputHandler", {
-                module: "MaskedDateTime"
+            this.notify('inputHandler', {
+                module: 'MaskedDateTime'
             });
         }
     };
@@ -1376,8 +1377,8 @@ var TimePicker = /** @class */ (function (_super) {
             this.popupWrapper.scrollTop = 0;
         }
         if (this.enableMask) {
-            this.notify("clearHandler", {
-                module: "MaskedDateTime"
+            this.notify('clearHandler', {
+                module: 'MaskedDateTime'
             });
         }
         if (closest(this.element, 'form')) {
@@ -1504,10 +1505,10 @@ var TimePicker = /** @class */ (function (_super) {
                     if (!inputVal) {
                         this.updateInputValue(this.maskedDateValue);
                     }
-                    if (isNullOrUndefined(val) && value != this.maskedDateValue) {
+                    if (isNullOrUndefined(val) && value !== this.maskedDateValue) {
                         this.createMask();
                     }
-                    if (isNullOrUndefined(val) && value == this.maskedDateValue) {
+                    if (isNullOrUndefined(val) && value === this.maskedDateValue) {
                         this.updateInputValue(this.maskedDateValue);
                     }
                 }
@@ -1579,13 +1580,13 @@ var TimePicker = /** @class */ (function (_super) {
         else {
             this.updateInputValue(time);
             if (this.enableMask) {
-                if (time == '') {
+                if (time === '') {
                     this.updateInputValue(this.maskedDateValue);
                 }
-                if (isNullOrUndefined(time) && value != this.maskedDateValue) {
+                if (isNullOrUndefined(time) && value !== this.maskedDateValue) {
                     this.createMask();
                 }
-                if (isNullOrUndefined(time) && value == this.maskedDateValue) {
+                if (isNullOrUndefined(time) && value === this.maskedDateValue) {
                     this.updateInputValue(this.maskedDateValue);
                 }
             }
@@ -1593,8 +1594,8 @@ var TimePicker = /** @class */ (function (_super) {
         return time;
     };
     TimePicker.prototype.createMask = function () {
-        this.notify("createMask", {
-            module: "MaskedDateTime",
+        this.notify('createMask', {
+            module: 'MaskedDateTime'
         });
     };
     TimePicker.prototype.findNextElement = function (event) {
@@ -1705,7 +1706,8 @@ var TimePicker = /** @class */ (function (_super) {
         return elementIndex;
     };
     TimePicker.prototype.keyHandler = function (event) {
-        if (isNullOrUndefined(this.step) || this.step <= 0 || !isNullOrUndefined(this.inputWrapper) && this.inputWrapper.buttons[0].classList.contains(DISABLED)) {
+        if (isNullOrUndefined(this.step) || this.step <= 0 || !isNullOrUndefined(this.inputWrapper)
+            && this.inputWrapper.buttons[0].classList.contains(DISABLED)) {
             return;
         }
         var count = this.timeCollections.length;
@@ -1733,7 +1735,8 @@ var TimePicker = /** @class */ (function (_super) {
                 this.activeIndex = index = this.activeIndex < 0 ? (count - 1) : this.activeIndex;
                 this.activeIndex = index = this.validLiElement(this.activeIndex, (event.keyCode === 40 || event.keyCode === 39) ?
                     false : true);
-                nextItem = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];
+                nextItem = isNullOrUndefined(this.timeCollections[index]) ?
+                    this.timeCollections[0] : this.timeCollections[index];
             }
             else if (event.action === 'home') {
                 var index = this.validLiElement(0);
@@ -2022,7 +2025,7 @@ var TimePicker = /** @class */ (function (_super) {
         }
         this.closePopup(0, e);
         if (this.enableMask && this.maskedDateValue && this.placeholder && this.floatLabelType !== 'Always') {
-            if (this.inputElement.value == this.maskedDateValue && !this.value && (this.floatLabelType == 'Auto' || this.floatLabelType == 'Never' || this.placeholder)) {
+            if (this.inputElement.value === this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {
                 this.updateInputValue('');
             }
         }
@@ -2075,7 +2078,7 @@ var TimePicker = /** @class */ (function (_super) {
             this.selectInputText();
         }
         if (this.enableMask && !this.inputElement.value && this.placeholder) {
-            if (this.maskedDateValue && !this.value && (this.floatLabelType == 'Auto' || this.floatLabelType == 'Never' || this.placeholder)) {
+            if (this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {
                 this.updateInputValue(this.maskedDateValue);
                 this.inputElement.selectionStart = 0;
                 this.inputElement.selectionEnd = this.inputElement.value.length;
@@ -2321,8 +2324,8 @@ var TimePicker = /** @class */ (function (_super) {
                     this.updatePlaceHolder();
                     this.setValue(this.value);
                     if (this.enableMask) {
-                        this.notify("createMask", {
-                            module: "MaskedDateTime",
+                        this.notify('createMask', {
+                            module: 'MaskedDateTime'
                         });
                     }
                     break;
@@ -2374,8 +2377,8 @@ var TimePicker = /** @class */ (function (_super) {
                         this.preventChange = false;
                     }
                     if (this.enableMask) {
-                        this.notify("createMask", {
-                            module: "MaskedDateTime",
+                        this.notify('createMask', {
+                            module: 'MaskedDateTime'
                         });
                     }
                     break;
@@ -2409,8 +2412,8 @@ var TimePicker = /** @class */ (function (_super) {
                     break;
                 case 'enableMask':
                     if (this.enableMask) {
-                        this.notify("createMask", {
-                            module: "MaskedDateTime",
+                        this.notify('createMask', {
+                            module: 'MaskedDateTime'
                         });
                         this.updateInputValue(this.maskedDateValue);
                     }

package/styles/bootstrap-dark.css

@@ -344,7 +344,7 @@ ejs-calendar {
 }
 .e-calendar .e-footer-container,
 .e-bigger.e-small .e-calendar .e-footer-container {
-  background-color: #1a1a1a;
+  background-color: transparent;
   border-top: none;
   cursor: default;
   display: inline-block;
@@ -509,10 +509,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
@@ -898,7 +899,7 @@ ejs-calendar {
 *.e-bigger.e-time-wrapper .e-time-icon.e-icons,
 *.e-bigger .e-control-wrapper .e-time-wrapper .e-time-icon.e-icons,
 *.e-control-wrapper.e-bigger.e-time-wrapper .e-time-icon.e-icons {
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .e-bigger .e-timepicker.e-popup .e-list-parent.e-ul,
@@ -1051,7 +1052,7 @@ ejs-calendar {
 .e-bigger .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
 *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 20px;
+  font-size: 18px;
   margin: 0;
 }
 .e-bigger .e-input-group-icon.e-date-icon::before,
@@ -1234,7 +1235,7 @@ ejs-calendar {
 }
 
 .e-bigger .e-input-group-icon.e-range-icon, .e-bigger.e-control-wrapper .e-input-group-icon.e-range-icon, .e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
-  font-size: 20px;
+  font-size: 18px;
   margin: 0;
   outline: none;
 }
@@ -1326,8 +1327,8 @@ ejs-calendar {
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-day-span {
   direction: ltr;
   font-size: 13px;
-  height: 14px;
-  margin: 0 0 13px 0;
+  height: 20px;
+  margin: 0;
   text-align: center;
   -webkit-user-select: none;
       -ms-user-select: none;
@@ -1345,7 +1346,7 @@ ejs-calendar {
 .e-daterangepicker.e-popup .e-separator,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
   height: 1px;
-  margin: 0 16px;
+  margin: 0;
 }
 .e-daterangepicker.e-popup .e-calendar,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -1761,7 +1762,7 @@ ejs-calendar {
 
 .e-small .e-daterangepicker.e-popup .e-range-header,
 *.e-small.e-daterangepicker.e-popup .e-range-header {
-  margin: 10px 10px 0 10px;
+  margin: 0;
 }
 .e-small .e-daterangepicker.e-popup .e-range-header .e-start-label, .e-small .e-daterangepicker.e-popup .e-range-header .e-end-label,
 *.e-small.e-daterangepicker.e-popup .e-range-header .e-start-label,
@@ -1779,7 +1780,7 @@ ejs-calendar {
 .e-small .e-daterangepicker.e-popup .e-range-header .e-day-span,
 *.e-small.e-daterangepicker.e-popup .e-range-header .e-day-span {
   font-size: 12px;
-  margin: 0 0 10px 0;
+  margin: 0;
 }
 .e-small .e-daterangepicker.e-popup .e-range-header .e-separator,
 *.e-small.e-daterangepicker.e-popup .e-range-header .e-separator {
@@ -2141,7 +2142,7 @@ ejs-calendar {
 
 .e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
 *.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 20px;
+  font-size: 18px;
 }
 .e-bigger.e-datetime-wrapper .e-input-group-icon.e-time-icon,
 *.e-bigger .e-datetime-wrapper .e-input-group-icon.e-time-icon {

package/styles/bootstrap.css

@@ -510,10 +510,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
@@ -899,7 +900,7 @@ ejs-calendar {
 *.e-bigger.e-time-wrapper .e-time-icon.e-icons,
 *.e-bigger .e-control-wrapper .e-time-wrapper .e-time-icon.e-icons,
 *.e-control-wrapper.e-bigger.e-time-wrapper .e-time-icon.e-icons {
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .e-bigger .e-timepicker.e-popup .e-list-parent.e-ul,
@@ -1053,7 +1054,7 @@ ejs-calendar {
 .e-bigger .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
 *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 20px;
+  font-size: 18px;
   margin: 0;
 }
 .e-bigger .e-input-group-icon.e-date-icon::before,
@@ -1237,7 +1238,7 @@ ejs-calendar {
 }
 
 .e-bigger .e-input-group-icon.e-range-icon, .e-bigger.e-control-wrapper .e-input-group-icon.e-range-icon, .e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
-  font-size: 20px;
+  font-size: 18px;
   margin: 0;
   outline: none;
 }
@@ -1348,7 +1349,7 @@ ejs-calendar {
 .e-daterangepicker.e-popup .e-separator,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
   height: 1px;
-  margin: 0 16px;
+  margin: 0;
 }
 .e-daterangepicker.e-popup .e-calendar,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -1553,6 +1554,11 @@ ejs-calendar {
   max-width: 262px;
 }
 
+.e-bigger .e-daterangepicker.e-popup,
+*.e-bigger.e-daterangepicker.e-popup,
+*.e-device.e-daterangepicker.e-popup {
+  background-color: #fff;
+}
 .e-bigger .e-daterangepicker.e-popup.e-preset-wrapper,
 *.e-bigger.e-daterangepicker.e-popup.e-preset-wrapper,
 *.e-device.e-daterangepicker.e-popup.e-preset-wrapper {
@@ -2144,7 +2150,7 @@ ejs-calendar {
 
 .e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
 *.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 20px;
+  font-size: 18px;
 }
 .e-bigger.e-datetime-wrapper .e-input-group-icon.e-time-icon,
 *.e-bigger .e-datetime-wrapper .e-input-group-icon.e-time-icon {

package/styles/bootstrap4.css

@@ -510,10 +510,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
@@ -1781,13 +1782,14 @@ ejs-calendar {
 .e-bigger .e-daterangepicker.e-device.e-popup .e-range-header,
 *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header,
 *.e-device.e-daterangepicker.e-device.e-popup .e-range-header {
-  margin: 16px 16px 0 16px;
-  padding: 0;
+  margin: 0;
+  padding: 16px;
 }
 .e-bigger .e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
 *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
 *.e-device.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span {
   margin: 10px 0;
+  margin-bottom: 0;
 }
 
 .e-small .e-daterangepicker.e-popup .e-range-header,
@@ -2175,7 +2177,7 @@ ejs-calendar {
 
 .e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
 *.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
-  font-size: 20px;
+  font-size: 18px;
 }
 .e-bigger.e-datetime-wrapper .e-input-group-icon.e-time-icon,
 *.e-bigger .e-datetime-wrapper .e-input-group-icon.e-time-icon {

package/styles/bootstrap5-dark.css

@@ -59,7 +59,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-header {
   background: none;
   display: table;
-  font-weight: normal;
+  font-weight: 400;
   position: relative;
   text-align: center;
   width: 100%;
@@ -77,7 +77,7 @@ ejs-calendar {
   cursor: pointer;
   display: inline-block;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1;
   padding: 5px;
   vertical-align: middle;
@@ -160,12 +160,12 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-other-month > span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-other-year > span.e-day {
   display: inline-block;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-content tr.e-month-hide,
 .e-bigger.e-small .e-calendar .e-content tr.e-month-hide {
   display: none;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-content tr.e-month-hide, .e-calendar .e-content td.e-other-month, .e-calendar .e-content td.e-other-year,
 .e-bigger.e-small .e-calendar .e-content tr.e-month-hide,
@@ -203,7 +203,7 @@ ejs-calendar {
   display: inline-block;
   float: left;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
   text-align: left;
 }
 .e-calendar .e-header .e-title,
@@ -298,7 +298,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content span.e-day {
   border: none;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   height: 32px;
   line-height: 32px;
   width: 32px;
@@ -332,7 +332,7 @@ ejs-calendar {
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td > span.e-day {
-  font-weight: normal;
+  font-weight: 400;
   height: 56px;
   line-height: 56px;
   width: 56px;
@@ -439,7 +439,7 @@ ejs-calendar {
 .e-bigger.e-calendar .e-content.e-year span.e-day,
 *.e-bigger .e-calendar .e-content.e-year span.e-day {
   font-size: 16px;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-bigger.e-calendar .e-content.e-month table,
 *.e-bigger .e-calendar .e-content.e-month table {
@@ -534,14 +534,15 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 22px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 0;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
-  font-size: 13px;
+  font-size: 12px;
   line-height: 22px;
 }
 .e-small.e-calendar.e-rtl .e-header .e-title,
@@ -660,7 +661,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled span,
 .e-bigger.e-small .e-calendar .e-header .e-prev.e-disabled span {
   color: #6c757d;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-header .e-next.e-disabled, .e-calendar .e-header .e-prev.e-disabled,
 .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled,
@@ -706,7 +707,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
-  background: #31373d;
+  background: #444c54;
   border: none;
   border-radius: 4px;
   box-shadow: none;
@@ -1108,7 +1109,7 @@ ejs-calendar {
 /*! component icons */
 .e-input-group-icon.e-date-icon,
 *.e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 18px;
+  font-size: 16px;
   margin: 0;
   min-height: 18px;
   min-width: 30px;
@@ -1128,7 +1129,7 @@ ejs-calendar {
 .e-bigger .e-input-group-icon.e-date-icon,
 *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
 *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
-  font-size: 22px;
+  font-size: 18px;
   margin: 0;
   min-height: 18px;
   min-width: 36px;
@@ -1410,7 +1411,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-popup .e-range-header .e-change-icon,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-change-icon {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 500;
   text-align: center;
   width: 4%;
@@ -1456,7 +1457,7 @@ ejs-calendar {
   line-height: 24px;
   width: auto;
   float: none;
-  font-weight: normal;
+  font-weight: 400;
   margin-left: 0;
 }
 .e-daterangepicker.e-popup .e-calendar .e-header.e-month, .e-daterangepicker.e-popup .e-calendar .e-header.e-year, .e-daterangepicker.e-popup .e-calendar .e-header.e-decade,
@@ -1572,7 +1573,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item {
-  font-size: 13px;
+  font-size: 12px;
   height: 36px;
   line-height: 36px;
 }
@@ -1856,6 +1857,7 @@ ejs-calendar {
 *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
 *.e-device.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span {
   margin: 10px 0;
+  margin-bottom: 0;
 }
 
 .e-small .e-daterangepicker.e-popup .e-range-header,
@@ -2002,7 +2004,7 @@ ejs-calendar {
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover:not(.e-selected):hover span.e-day,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date:not(.e-selected) span.e-day,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day {
-  background-color: #495057;
+  background-color: #6c757d;
   border: none;
   color: #e9ecef;
 }