@syncfusion/ej2-calendars 19.2.62 → 19.3.53

package/styles/daterangepicker/bootstrap5.scss

@@ -0,0 +1,7 @@
+@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-inputs/styles/input/bootstrap5-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
+@import '../calendar/bootstrap5-definition.scss';
+@import 'bootstrap5-definition.scss';
+@import 'icons/bootstrap5.scss';
+@import 'all.scss';

package/styles/daterangepicker/icons/_bootstrap5-dark.scss

@@ -0,0 +1 @@
+@import './bootstrap5.scss';

package/styles/daterangepicker/icons/_bootstrap5.scss

@@ -0,0 +1,67 @@
+@include export-module('daterangepicker-bootstrap5-icons') {
+  /*! component icons */
+  .e-input-group-icon.e-range-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon {
+    border-bottom-right-radius: $range-icon-bottom-right-radius;
+    border-right: $range-control-border-right;
+    border-top-right-radius: $range-icon-top-right-radius;
+    font-size: $range-icon-font-size;
+    margin: $range-icon-margin;
+    min-height: $range-icon-container-min-height;
+    min-width: $range-icon-container-min-width;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e74c';
+      font-family: 'e-icons';
+  }
+
+    #{if(&, '&', '*')}:focus {
+      background: $range-icon-hover-color;
+      border-radius: $range-icon-border-radius;
+  }
+}
+
+  .e-daterangepicker {
+    #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
+      content: '\e748';
+    }#{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
+      content: '\e765';
+    }#{if(&, '&', '*')} .e-change-icon::before {
+      content: '\e7f9';
+    }#{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-next::before {
+      content: '\e765';
+    }#{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-prev::before {
+      content: '\e748';
+    }#{if(&, '&', '*')}.e-rtl .e-start-end .e-change-icon::before {
+      content: '\e773';
+    }
+  }
+
+  .e-bigger {
+    #{if(&, '&', '*')} .e-input-group-icon.e-range-icon,
+    #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon,
+    #{if(&, '&', '*')} .e-control-wrapper .e-input-group-icon.e-range-icon {
+      font-size: $range-bigger-icon-font-size;
+      margin: $range-icon-bigger-margin;
+      min-height: $range-bigger-icon-container-min-height;
+      min-width: $range-bigger-icon-container-min-width;
+      outline: none;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-range-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-range-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-range-icon {
+    font-size: $range-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-range-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-range-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
+    font-size: $range-bigger-small-icon-font-size;
+  }
+}
+

package/styles/daterangepicker/icons/_tailwind-dark.scss

@@ -1,63 +1 @@
-@include export-module('daterangepicker-tailwind-dark-icons') {
-  /*! component icons */
-  .e-input-group-icon.e-range-icon,
-  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon {
-    font-size: $range-icon-font-size;
-    margin: $range-icon-margin;
-    min-height: $range-icon-container-min-height;
-    min-width: $range-icon-container-min-width;
-    outline: none;
-
-    #{if(&, '&', '*')}::before {
-      content: '\e718';
-      font-family: 'e-icons';
-  }
-
-    #{if(&, '&', '*')}:focus {
-      background: $range-icon-hover-color;
-      border-radius: $range-icon-border-radius;
-  }
-}
-
-  .e-daterangepicker {
-    #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
-      content: '\e7b7';
-    }#{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
-      content: '\e70f';
-    }#{if(&, '&', '*')} .e-change-icon::before {
-      content: '\e7a8';
-    }#{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-next::before {
-      content: '\e70f';
-    }#{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-prev::before {
-      content: '\e7b7';
-    }#{if(&, '&', '*')}.e-rtl .e-start-end .e-change-icon::before {
-      content: '\e7a5';
-    }
-  }
-
-  .e-bigger {
-    #{if(&, '&', '*')} .e-input-group-icon.e-range-icon,
-    #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon,
-    #{if(&, '&', '*')} .e-control-wrapper .e-input-group-icon.e-range-icon {
-      font-size: $range-bigger-icon-font-size;
-      margin: $range-icon-bigger-margin;
-      min-height: $range-icon-container-min-height;
-      min-width: $range-icon-container-min-width;
-      outline: none;
-    }
-  }
-
-  // mouse small icon
-  .e-small .e-input-group-icon.e-range-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-range-icon,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-range-icon {
-    font-size: $range-small-icon-font-size;
-  }
-
-  // Touch small icon
-  .e-small.e-bigger .e-input-group-icon.e-range-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-range-icon,
-  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
-    font-size: $range-bigger-small-icon-font-size;
-  }
-}
+@import './tailwind.scss';

package/styles/daterangepicker/material-dark.css

@@ -783,11 +783,11 @@
 
 /*! daterangepicker theme */
 .e-date-range-wrapper .e-input-group-icon.e-icons.e-active {
-  color: #ff80ab;
+  color: #00b0ff;
 }
 
 .e-date-range-wrapper.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
-  color: #ff80ab;
+  color: #00b0ff;
 }
 
 .e-daterangepicker.e-popup,
@@ -817,8 +817,8 @@
 .e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span {
   background-color: transparent;
-  border: 1px solid #ff80ab;
-  color: #ff80ab;
+  border: 1px solid #00b0ff;
+  color: #00b0ff;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover span,
@@ -847,12 +847,12 @@
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-start-date.e-selected.e-today span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-end-date.e-selected.e-today span.e-day {
-  border: 1px solid #ff80ab;
+  border: 1px solid #00b0ff;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-selected.e-today:hover span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-selected.e-today:hover span.e-day {
-  border: 1px solid #ff80ab;
+  border: 1px solid #00b0ff;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover,
@@ -885,13 +885,13 @@
 .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
-  background-color: #ff80ab;
+  background-color: #00b0ff;
   color: #000;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-today span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-today span.e-day {
-  background-color: #ff80ab;
+  background-color: #00b0ff;
   color: #000;
 }
 
@@ -909,7 +909,7 @@
 .e-daterangepicker.e-popup .e-presets .e-list-item.e-active,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-list-item.e-active {
   background-color: transparent;
-  color: #ff80ab;
+  color: #00b0ff;
 }
 
 .e-daterangepicker.e-popup .e-presets .e-list-item.e-hover,

package/styles/datetimepicker/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/datetimepicker/_bootstrap5-definition.scss

@@ -0,0 +1,55 @@
+// size variables
+$datetime-default-text-indent: 12px !default;
+$datetime-list-bigger-line-height: 32px !default;
+$datetime-list-normal-line-height: 30px !default;
+$datetime-list-normal-font-size: $text-sm !default;
+$datetime-list-bigger-font-size: $text-base !default;
+$datetime-list-normal-text-indent: $datetime-default-text-indent !default;
+$datetime-list-bigger-text-indent: 16px !default;
+$datetime-popup-border-radius: 6px !default;
+$datetime-list-font-weight: $font-weight-normal !default;
+$datetime-list-normal-padding: 8px !default;
+$datetime-list-bigger-padding: 8px !default;
+$datetime-time-font-icon: '\e20c' !default;
+$datetime-icon-normal-font-size: $text-base !default;
+$datetime-icon-bigger-font-size: $text-lg !default;
+$datetime-date-icon-margin: 0 !default;
+$datetime-time-icon-margin: 0 !default;
+$datetime-time-bigger-icon-margin: 0 !default;
+$datetime-time-rtl-icon-margin: 0 !default;
+$datetime-time-rtl-bigger-icon-margin: 0 !default;
+$datetime-normal-min-height: 24px !default;
+$datetime-normal-min-width: 24px !default;
+$datetime-bigger-min-height: 26px !default;
+$datetime-bigger-min-width: 26px !default;
+$datetime-time-icon-border: 0 !default;
+$datetime-time-icon-border-style: none !default;
+$datetime-list-default-border-style: none !default;
+//mouse small
+$datetime-list-small-line-height: 26px !default;
+$datetime-list-small-text-indent: 8px !default;
+$datetime-list-small-font-size: $text-xs !default;
+// mouse small icon
+$datetime-icon-small-font-size: 14px !default;
+$datetime-small-min-width: 16px !default;
+//touch small
+$datetime-list-bigger-small-line-height: 30px !default;
+$datetime-list-bigger-small-text-indent: 16px !default;
+$datetime-list-bigger-small-font-size: $text-sm !default;
+// touch small icon
+$datetime-icon-bigger-small-font-size: $text-base !default;
+// color variables
+$datetime-popup-shadow: none !default;
+$datetime-list-default-font-color: $content-text-color !default;
+$datetime-list-border-color: 1px solid $border-light !default;
+$datetime-list-bg-color: $content-bg-color !default;
+$datetime-list-active-bg-color: $flyout-bg-color-pressed !default;
+$datetime-list-active-font-color: $flyout-text-color-pressed !default;
+$datetime-list-active-icon-color: $content-text-color-pressed !default;
+$datetime-list-hover-bg-color: $content-bg-color-hover !default;
+$datetime-list-hover-font-color: $content-text-color-hover !default;
+$datetime-list-popup-icon-active-color: $icon-color-pressed !default;
+$datetime-list-active-hover-bg-color: $flyout-bg-color-hover !default;
+$datetime-list-active-hover-font-color: $flyout-text-color-hover !default;
+$datetime-list-hover-border-color: none !default;
+$datetime-default-overlay: $content-bg-color-alt2 !default;

package/styles/datetimepicker/_tailwind-dark-definition.scss

@@ -1,53 +1 @@
-$datetime-default-text-indent: 12px !default;
-$datetime-list-bigger-line-height: 36px !default;
-$datetime-list-normal-line-height: 30px !default;
-$datetime-list-normal-font-size: $text-sm !default;
-$datetime-list-bigger-font-size: $text-base !default;
-$datetime-list-normal-text-indent: $datetime-default-text-indent !default;
-$datetime-list-bigger-text-indent: 16px !default;
-$datetime-popup-border-radius: 6px !default;
-$datetime-list-font-weight: $font-weight-normal !default;
-$datetime-popup-shadow: $shadow-lg !default;
-$datetime-list-default-font-color: $content-text-color !default;
-$datetime-list-border-color: 1px solid $border-light !default;
-$datetime-list-bg-color: $content-bg-color !default;
-$datetime-list-active-bg-color: $content-bg-color-pressed !default;
-$datetime-list-active-font-color: $content-text-color-pressed !default;
-$datetime-list-active-icon-color: $content-text-color-pressed !default;
-$datetime-list-hover-bg-color: $content-bg-color-hover !default;
-$datetime-list-hover-font-color: $content-text-color-hover !default;
-$datetime-list-popup-icon-active-color: $icon-color-pressed !default;
-$datetime-list-active-hover-bg-color: $content-bg-color-hover !default;
-$datetime-list-active-hover-font-color: $content-text-color-hover !default;
-$datetime-list-normal-padding: 8px !default;
-$datetime-list-bigger-padding: 8px !default;
-$datetime-time-font-icon: '\e20c' !default;
-$datetime-icon-normal-font-size: $text-base !default;
-$datetime-icon-bigger-font-size: $text-lg !default;
-$datetime-date-icon-margin: 0 !default;
-$datetime-time-icon-margin: 0 !default;
-$datetime-time-bigger-icon-margin: 0 !default;
-$datetime-time-rtl-icon-margin: 0 !default;
-$datetime-time-rtl-bigger-icon-margin: 0 !default;
-$datetime-normal-min-height: 24px !default;
-$datetime-normal-min-width: 24px !default;
-$datetime-bigger-min-height: 26px !default;
-$datetime-bigger-min-width: 26px !default;
-$datetime-time-icon-border: 0 !default;
-$datetime-time-icon-border-style: none !default;
-$datetime-list-hover-border-color: none !default;
-$datetime-list-default-border-style: none !default;
-$datetime-default-overlay: $content-bg-color-alt2 !default;
-//mouse small
-$datetime-list-small-line-height: 24px !default;
-$datetime-list-small-text-indent: 12px !default;
-$datetime-list-small-font-size: $text-xs !default;
-// mouse small icon
-$datetime-icon-small-font-size: 14px !default;
-$datetime-small-min-width: 16px !default;
-//touch small
-$datetime-list-bigger-small-line-height: 36px !default;
-$datetime-list-bigger-small-text-indent: 12px !default;
-$datetime-list-bigger-small-font-size: $text-sm !default;
-// touch small icon
-$datetime-icon-bigger-small-font-size: $text-base !default;
+@import './tailwind-definition.scss';

package/styles/datetimepicker/_tailwind-definition.scss

@@ -1,3 +1,4 @@
+// size variables
 $datetime-default-text-indent: 12px !default;
 $datetime-list-bigger-line-height: 36px !default;
 $datetime-list-normal-line-height: 30px !default;
@@ -7,18 +8,6 @@ $datetime-list-normal-text-indent: $datetime-default-text-indent !default;
 $datetime-list-bigger-text-indent: 16px !default;
 $datetime-popup-border-radius: 6px !default;
 $datetime-list-font-weight: $font-weight-normal !default;
-$datetime-popup-shadow: $shadow-lg !default;
-$datetime-list-default-font-color: $content-text-color !default;
-$datetime-list-border-color: 1px solid $border-light !default;
-$datetime-list-bg-color: $content-bg-color !default;
-$datetime-list-active-bg-color: $content-bg-color-pressed !default;
-$datetime-list-active-font-color: $content-text-color-pressed !default;
-$datetime-list-active-icon-color: $content-text-color-pressed !default;
-$datetime-list-hover-bg-color: $content-bg-color-hover !default;
-$datetime-list-hover-font-color: $content-text-color-hover !default;
-$datetime-list-popup-icon-active-color: $icon-color-pressed !default;
-$datetime-list-active-hover-bg-color: $content-bg-color-hover !default;
-$datetime-list-active-hover-font-color: $content-text-color-hover !default;
 $datetime-list-normal-padding: 8px !default;
 $datetime-list-bigger-padding: 8px !default;
 $datetime-time-font-icon: '\e20c' !default;
@@ -35,9 +24,7 @@ $datetime-bigger-min-height: 26px !default;
 $datetime-bigger-min-width: 26px !default;
 $datetime-time-icon-border: 0 !default;
 $datetime-time-icon-border-style: none !default;
-$datetime-list-hover-border-color: none !default;
 $datetime-list-default-border-style: none !default;
-$datetime-default-overlay: $content-bg-color-alt2 !default;
 //mouse small
 $datetime-list-small-line-height: 24px !default;
 $datetime-list-small-text-indent: 12px !default;
@@ -51,3 +38,18 @@ $datetime-list-bigger-small-text-indent: 12px !default;
 $datetime-list-bigger-small-font-size: $text-sm !default;
 // touch small icon
 $datetime-icon-bigger-small-font-size: $text-base !default;
+// color variables
+$datetime-popup-shadow: $shadow-lg !default;
+$datetime-list-default-font-color: $content-text-color !default;
+$datetime-list-border-color: 1px solid $border-light !default;
+$datetime-list-bg-color: $content-bg-color !default;
+$datetime-list-active-bg-color: $content-bg-color-pressed !default;
+$datetime-list-active-font-color: $content-text-color-pressed !default;
+$datetime-list-active-icon-color: $content-text-color-pressed !default;
+$datetime-list-hover-bg-color: $content-bg-color-hover !default;
+$datetime-list-hover-font-color: $content-text-color-hover !default;
+$datetime-list-popup-icon-active-color: $icon-color-pressed !default;
+$datetime-list-active-hover-bg-color: $content-bg-color-hover !default;
+$datetime-list-active-hover-font-color: $content-text-color-hover !default;
+$datetime-list-hover-border-color: none !default;
+$datetime-default-overlay: $content-bg-color-alt2 !default;

package/styles/datetimepicker/bootstrap5-dark.css

@@ -0,0 +1,205 @@
+/*! component icons */
+.e-datetime-wrapper .e-time-icon.e-icons::before {
+  content: '\e705';
+  font-family: 'e-icons';
+}
+
+.e-input-group.e-control-wrapper.e-datetime-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
+.e-float-input.e-control-wrapper.e-input-group.e-datetime-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.e-datetime-wrapper {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.e-datetime-wrapper .e-time-icon.e-icons::before {
+  font-size: 16px;
+}
+
+.e-datetime-wrapper.e-control-wrapper {
+  box-sizing: border-box;
+}
+
+.e-datetime-wrapper .e-time-icon.e-icons.e-disabled,
+.e-datetime-wrapper .e-date-icon.e-icons.e-disabled {
+  pointer-events: none;
+}
+
+.e-datetime-wrapper .e-clear-icon {
+  box-sizing: content-box;
+}
+
+.e-datetime-wrapper span {
+  cursor: pointer;
+}
+
+.e-datetime-wrapper .e-input-group-icon.e-date-icon,
+.e-datetime-wrapper .e-input-group-icon.e-time-icon {
+  font-size: 16px;
+  margin: 0;
+  outline: none;
+}
+
+.e-datetime-wrapper .e-input-group-icon.e-time-icon {
+  border: 0;
+  border-style: none;
+  margin: 0;
+}
+
+.e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon {
+  margin: 0;
+}
+
+.e-datetimepicker.e-time-modal {
+  background-color: #343a40;
+  height: 100%;
+  left: 0;
+  opacity: .5;
+  pointer-events: auto;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+}
+
+.e-datetimepicker.e-popup {
+  border-style: solid;
+  border-width: 1px;
+  overflow: auto;
+}
+
+.e-datetimepicker.e-popup .e-content {
+  position: relative;
+}
+
+.e-datetimepicker.e-popup .e-list-parent.e-ul {
+  margin: 0;
+  padding: 8px 0;
+}
+
+.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
+  color: #fff;
+  cursor: default;
+  font-size: 14px;
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-hover {
+  cursor: pointer;
+}
+
+.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
+  line-height: 30px;
+  text-indent: 12px;
+}
+
+.e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
+*.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
+  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 {
+  margin: 0;
+}
+
+.e-bigger.e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon,
+*.e-bigger .e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon {
+  margin: 0;
+}
+
+.e-bigger .e-datetimepicker.e-popup .e-list-parent.e-ul,
+*.e-bigger.e-datetimepicker.e-popup .e-list-parent.e-ul {
+  padding: 8px 0;
+}
+
+.e-bigger .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item,
+*.e-bigger.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
+  font-size: 16px;
+  line-height: 32px;
+  text-indent: 16px;
+}
+
+.e-small .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item,
+*.e-small.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
+  font-size: 12px;
+  line-height: 26px;
+  text-indent: 8px;
+}
+
+.e-small.e-bigger .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item,
+*.e-small.e-bigger.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item {
+  font-size: 14px;
+  line-height: 30px;
+  text-indent: 16px;
+}
+
+.e-small.e-datetime-wrapper .e-time-icon.e-icons::before,
+*.e-small .e-datetime-wrapper .e-time-icon.e-icons::before {
+  font-size: 14px;
+}
+
+.e-small.e-bigger.e-datetime-wrapper .e-time-icon.e-icons::before,
+*.e-small.e-bigger .e-datetime-wrapper .e-time-icon.e-icons::before {
+  font-size: 16px;
+}
+
+.e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
+  background-size: 250px 33px;
+  min-height: 33px;
+}
+
+.e-bigger .e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker,
+.e-bigger.e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
+  background-size: 250px 40px;
+  min-height: 40px;
+}
+
+/*! datetimepicker theme */
+.e-datetime-wrapper .e-input-group-icon.e-icons.e-active {
+  color: #fff;
+}
+
+.e-datetime-wrapper.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
+  color: #f8f9fa;
+}
+
+.e-datetimepicker.e-popup {
+  border: 1px solid #444c54;
+  border-radius: 6px;
+  box-shadow: none;
+}
+
+.e-datetimepicker.e-popup .e-list-parent.e-ul {
+  background-color: #212529;
+}
+
+.e-datetimepicker.e-popup .e-list-parent.e-ul li.e-list-item {
+  border: none;
+  color: #fff;
+}
+
+.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-hover,
+.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-navigation,
+.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item:focus {
+  background-color: #31373d;
+  border: none;
+  color: #fff;
+}
+
+.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-active {
+  background-color: #0d6efd;
+  color: #fff;
+}
+
+.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-active.e-hover {
+  background-color: #444c54;
+  color: #fff;
+}

package/styles/datetimepicker/bootstrap5-dark.scss

@@ -0,0 +1,8 @@
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-inputs/styles/input/bootstrap5-dark-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
+@import '../datepicker/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'icons/bootstrap5-dark.scss';
+@import 'all.scss';