enhance logs + prepare jinja variables

- add datepicker library - disabled update live if to date chosen, and reverse - add futur variables for home, menu - change head path
2022-11-19 16:37:34 +01:00 · 2022-11-19 16:37:34 +01:00 · 0f5756cfb4
parent 08e7c2104b
commit 0f5756cfb4
249 changed files with 6389 additions and 3167 deletions
--- a/src/ui/static/css/air-datepicker/air-datepicker.css
+++ b/src/ui/static/css/air-datepicker/air-datepicker.css
--- a/src/ui/static/css/datepicker-foundation.css
+++ b/src/ui/static/css/datepicker-foundation.css
@ -0,0 +1,275 @@
+.datepicker {
+  display: none;
+}
+
+.datepicker.active {
+  display: block;
+}
+
+.datepicker-dropdown {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  padding-top: 4px;
+}
+
+.datepicker-dropdown.datepicker-orient-top {
+  padding-top: 0;
+  padding-bottom: 4px;
+}
+
+.datepicker-picker {
+  display: inline-block;
+  border-radius: 0;
+  background-color: #fefefe;
+}
+
+.datepicker-dropdown .datepicker-picker {
+  box-shadow: 0 0 0 1px #cacaca;
+}
+
+.datepicker-picker span {
+  display: block;
+  flex: 1;
+  border: 0;
+  border-radius: 0;
+  cursor: default;
+  text-align: center;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.datepicker-main {
+  padding: 2px;
+}
+
+.datepicker-footer {
+  box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
+  background-color: #e6e6e6;
+}
+
+.datepicker-grid,
+.datepicker-view .days-of-week,
+.datepicker-view,
+.datepicker-controls {
+  display: flex;
+}
+
+.datepicker-grid {
+  flex-wrap: wrap;
+}
+
+.datepicker-view .days .datepicker-cell,
+.datepicker-view .dow {
+  flex-basis: 14.2857142857%;
+}
+
+.datepicker-view.datepicker-grid .datepicker-cell {
+  flex-basis: 25%;
+}
+
+.datepicker-cell,
+.datepicker-view .week {
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+
+.datepicker-title {
+  box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
+  background-color: #e6e6e6;
+  padding: 0.375rem 0.75rem;
+  text-align: center;
+  font-weight: bold;
+}
+
+.datepicker-header .datepicker-controls {
+  padding: 2px 2px 0;
+}
+
+.datepicker-controls .button {
+  margin: 0;
+  background-color: #fefefe;
+  color: #0a0a0a;
+}
+
+.datepicker-controls .button:hover,
+.datepicker-controls .button:focus {
+  background-color: #d8d8d8;
+}
+
+.datepicker-controls .button:hover[disabled],
+.datepicker-controls .button:focus[disabled] {
+  opacity: 0.25;
+  background-color: #fefefe;
+  color: #0a0a0a;
+}
+
+.datepicker-header .datepicker-controls .button {
+  border-color: transparent;
+  font-weight: bold;
+}
+
+.datepicker-footer .datepicker-controls .button {
+  margin: calc(0.375rem - 1px) 0.375rem;
+  border-radius: 0;
+  width: 100%;
+  font-size: 0.75rem;
+}
+
+.datepicker-controls .view-switch {
+  flex: auto;
+}
+
+.datepicker-controls .prev-btn,
+.datepicker-controls .next-btn {
+  padding-right: 0.375rem;
+  padding-left: 0.375rem;
+  width: 2.25rem;
+}
+
+.datepicker-controls .prev-btn.disabled,
+.datepicker-controls .next-btn.disabled {
+  visibility: hidden;
+}
+
+.datepicker-view .dow {
+  height: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 0.875rem;
+  font-weight: bold;
+}
+
+.datepicker-view .week {
+  width: 2.25rem;
+  color: #8a8a8a;
+  font-size: 0.75rem;
+}
+
+@media (max-width: 22.5rem) {
+  .datepicker-view .week {
+    width: 1.96875rem;
+  }
+}
+
+.datepicker-grid {
+  width: 15.75rem;
+}
+
+@media (max-width: 22.5rem) {
+  .calendar-weeks + .days .datepicker-grid {
+    width: 13.78125rem;
+  }
+}
+
+.datepicker-cell:not(.disabled):hover {
+  background-color: #f8f8f8;
+  cursor: pointer;
+}
+
+.datepicker-cell.focused:not(.selected) {
+  background-color: #f1f1f1;
+}
+
+.datepicker-cell.selected,
+.datepicker-cell.selected:hover {
+  background-color: #1779ba;
+  color: #fefefe;
+  font-weight: semibold;
+}
+
+.datepicker-cell.disabled {
+  color: #e6e6e6;
+}
+
+.datepicker-cell.prev:not(.disabled),
+.datepicker-cell.next:not(.disabled) {
+  color: #cacaca;
+}
+
+.datepicker-cell.prev.selected,
+.datepicker-cell.next.selected {
+  color: #e5e5e5;
+}
+
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
+  border-radius: 0;
+  background-color: #f7f7f7;
+}
+
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
+  background-color: #f1f1f1;
+}
+
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
+  background-color: #f1f1f1;
+}
+
+.datepicker-cell.today:not(.selected) {
+  background-color: #d7ecfa;
+}
+
+.datepicker-cell.today:not(.selected):not(.disabled) {
+  color: #8a8a8a;
+}
+
+.datepicker-cell.today.focused:not(.selected) {
+  background-color: #cbe7f9;
+}
+
+.datepicker-cell.range-end:not(.selected),
+.datepicker-cell.range-start:not(.selected) {
+  background-color: #767676;
+  color: #fefefe;
+}
+
+.datepicker-cell.range-end.focused:not(.selected),
+.datepicker-cell.range-start.focused:not(.selected) {
+  background-color: #707070;
+}
+
+.datepicker-cell.range-start {
+  border-radius: 0 0 0 0;
+}
+
+.datepicker-cell.range-end {
+  border-radius: 0 0 0 0;
+}
+
+.datepicker-cell.range {
+  border-radius: 0;
+  background-color: #e6e6e6;
+}
+
+.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
+  background-color: #e0e0e0;
+}
+
+.datepicker-cell.range.disabled {
+  color: #cdcdcd;
+}
+
+.datepicker-cell.range.focused {
+  background-color: #d9d9d9;
+}
+
+.datepicker-cell.range.today {
+  background-color: #b3dbf6;
+}
+
+.datepicker-view.datepicker-grid .datepicker-cell {
+  height: 4.5rem;
+  line-height: 4.5rem;
+}
+
+.datepicker-input.in-edit {
+  border-color: #a4a4a4;
+}
+
+.datepicker-input.in-edit:focus,
+.datepicker-input.in-edit:active {
+  box-shadow: 0 0 0.25em 0.25em rgba(164, 164, 164, 0.2);
+}
--- a/src/ui/static/css/datepicker-foundation.min.css
+++ b/src/ui/static/css/datepicker-foundation.min.css
@ -0,0 +1 @@
+.datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:10}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fefefe;border-radius:0;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 0 0 1px #cacaca}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:0;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#e6e6e6;box-shadow:inset 0 1px 1px hsla(0,0%,4%,.1)}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#e6e6e6;box-shadow:inset 0 -1px 1px hsla(0,0%,4%,.1);font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{background-color:#fefefe;color:#0a0a0a;margin:0}.datepicker-controls .button:focus,.datepicker-controls .button:hover{background-color:#d8d8d8}.datepicker-controls .button:focus[disabled],.datepicker-controls .button:hover[disabled]{background-color:#fefefe;color:#0a0a0a;opacity:.25}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-footer .datepicker-controls .button{border-radius:0;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#8a8a8a;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f8f8f8;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#f1f1f1}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#1779ba;color:#fefefe;font-weight:semibold}.datepicker-cell.disabled{color:#e6e6e6}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#cacaca}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e5e5e5}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f7f7f7;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused,.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#f1f1f1}.datepicker-cell.today:not(.selected){background-color:#d7ecfa}.datepicker-cell.today:not(.selected):not(.disabled){color:#8a8a8a}.datepicker-cell.today.focused:not(.selected){background-color:#cbe7f9}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#767676;color:#fefefe}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#707070}.datepicker-cell.range-end,.datepicker-cell.range-start{border-radius:0 0 0 0}.datepicker-cell.range{background-color:#e6e6e6;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#e0e0e0}.datepicker-cell.range.disabled{color:#cdcdcd}.datepicker-cell.range.focused{background-color:#d9d9d9}.datepicker-cell.range.today{background-color:#b3dbf6}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#a4a4a4}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em hsla(0,0%,64%,.2)}
--- a/src/ui/static/css/datepicker.css
+++ b/src/ui/static/css/datepicker.css
@ -0,0 +1,318 @@
+.datepicker {
+  display: none;
+}
+
+.datepicker.active {
+  display: block;
+}
+
+.datepicker-dropdown {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  padding-top: 4px;
+}
+
+.datepicker-dropdown.datepicker-orient-top {
+  padding-top: 0;
+  padding-bottom: 4px;
+}
+
+.datepicker-picker {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: white;
+}
+
+.datepicker-dropdown .datepicker-picker {
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+}
+
+.datepicker-picker span {
+  display: block;
+  flex: 1;
+  border: 0;
+  border-radius: 4px;
+  cursor: default;
+  text-align: center;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.datepicker-main {
+  padding: 2px;
+}
+
+.datepicker-footer {
+  box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
+  background-color: whitesmoke;
+}
+
+.datepicker-grid,
+.datepicker-view .days-of-week,
+.datepicker-view,
+.datepicker-controls {
+  display: flex;
+}
+
+.datepicker-grid {
+  flex-wrap: wrap;
+}
+
+.datepicker-view .days .datepicker-cell,
+.datepicker-view .dow {
+  flex-basis: 14.2857142857%;
+}
+
+.datepicker-view.datepicker-grid .datepicker-cell {
+  flex-basis: 25%;
+}
+
+.datepicker-cell,
+.datepicker-view .week {
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+
+.datepicker-title {
+  box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
+  background-color: whitesmoke;
+  padding: 0.375rem 0.75rem;
+  text-align: center;
+  font-weight: 700;
+}
+
+.datepicker-header .datepicker-controls {
+  padding: 2px 2px 0;
+}
+
+.datepicker-controls .button {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  border: 1px solid #dbdbdb;
+  border-radius: 4px;
+  box-shadow: none;
+  background-color: white;
+  cursor: pointer;
+  padding: calc(0.375em - 1px) 0.75em;
+  height: 2.25em;
+  vertical-align: top;
+  text-align: center;
+  line-height: 1.5;
+  white-space: nowrap;
+  color: #363636;
+  font-size: 1rem;
+}
+
+.datepicker-controls .button:focus,
+.datepicker-controls .button:active {
+  outline: none;
+}
+
+.datepicker-controls .button:hover {
+  border-color: #b5b5b5;
+  color: #363636;
+}
+
+.datepicker-controls .button:focus {
+  border-color: #3273dc;
+  color: #363636;
+}
+
+.datepicker-controls .button:focus:not(:active) {
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+}
+
+.datepicker-controls .button:active {
+  border-color: #4a4a4a;
+  color: #363636;
+}
+
+.datepicker-controls .button[disabled] {
+  cursor: not-allowed;
+}
+
+.datepicker-header .datepicker-controls .button {
+  border-color: transparent;
+  font-weight: bold;
+}
+
+.datepicker-header .datepicker-controls .button:hover {
+  background-color: #f9f9f9;
+}
+
+.datepicker-header .datepicker-controls .button:focus:not(:active) {
+  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+}
+
+.datepicker-header .datepicker-controls .button:active {
+  background-color: #f2f2f2;
+}
+
+.datepicker-header .datepicker-controls .button[disabled] {
+  box-shadow: none;
+}
+
+.datepicker-footer .datepicker-controls .button {
+  margin: calc(0.375rem - 1px) 0.375rem;
+  border-radius: 2px;
+  width: 100%;
+  font-size: 0.75rem;
+}
+
+.datepicker-controls .view-switch {
+  flex: auto;
+}
+
+.datepicker-controls .prev-btn,
+.datepicker-controls .next-btn {
+  padding-right: 0.375rem;
+  padding-left: 0.375rem;
+  width: 2.25rem;
+}
+
+.datepicker-controls .prev-btn.disabled,
+.datepicker-controls .next-btn.disabled {
+  visibility: hidden;
+}
+
+.datepicker-view .dow {
+  height: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.datepicker-view .week {
+  width: 2.25rem;
+  color: #b5b5b5;
+  font-size: 0.75rem;
+}
+
+@media (max-width: 22.5rem) {
+  .datepicker-view .week {
+    width: 1.96875rem;
+  }
+}
+
+.datepicker-grid {
+  width: 15.75rem;
+}
+
+@media (max-width: 22.5rem) {
+  .calendar-weeks + .days .datepicker-grid {
+    width: 13.78125rem;
+  }
+}
+
+.datepicker-cell:not(.disabled):hover {
+  background-color: #f9f9f9;
+  cursor: pointer;
+}
+
+.datepicker-cell.focused:not(.selected) {
+  background-color: #e8e8e8;
+}
+
+.datepicker-cell.selected,
+.datepicker-cell.selected:hover {
+  background-color: #3273dc;
+  color: #fff;
+  font-weight: 600;
+}
+
+.datepicker-cell.disabled {
+  color: #dbdbdb;
+}
+
+.datepicker-cell.prev:not(.disabled),
+.datepicker-cell.next:not(.disabled) {
+  color: #7a7a7a;
+}
+
+.datepicker-cell.prev.selected,
+.datepicker-cell.next.selected {
+  color: #e6e6e6;
+}
+
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
+  border-radius: 0;
+  background-color: whitesmoke;
+}
+
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
+  background-color: #eeeeee;
+}
+
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
+  background-color: #e8e8e8;
+}
+
+.datepicker-cell.today:not(.selected) {
+  background-color: #00d1b2;
+}
+
+.datepicker-cell.today:not(.selected):not(.disabled) {
+  color: #fff;
+}
+
+.datepicker-cell.today.focused:not(.selected) {
+  background-color: #00c4a7;
+}
+
+.datepicker-cell.range-end:not(.selected),
+.datepicker-cell.range-start:not(.selected) {
+  background-color: #b5b5b5;
+  color: #fff;
+}
+
+.datepicker-cell.range-end.focused:not(.selected),
+.datepicker-cell.range-start.focused:not(.selected) {
+  background-color: #afafaf;
+}
+
+.datepicker-cell.range-start {
+  border-radius: 4px 0 0 4px;
+}
+
+.datepicker-cell.range-end {
+  border-radius: 0 4px 4px 0;
+}
+
+.datepicker-cell.range {
+  border-radius: 0;
+  background-color: #dbdbdb;
+}
+
+.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
+  background-color: #d5d5d5;
+}
+
+.datepicker-cell.range.disabled {
+  color: #c2c2c2;
+}
+
+.datepicker-cell.range.focused {
+  background-color: #cfcfcf;
+}
+
+.datepicker-view.datepicker-grid .datepicker-cell {
+  height: 4.5rem;
+  line-height: 4.5rem;
+}
+
+.datepicker-input.in-edit {
+  border-color: #2366d1;
+}
+
+.datepicker-input.in-edit:focus,
+.datepicker-input.in-edit:active {
+  box-shadow: 0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);
+}
--- a/src/ui/static/css/datepicker.min.css
+++ b/src/ui/static/css/datepicker.min.css
--- a/src/ui/static/js/air-datepicker/air-datepicker.d.ts
+++ b/src/ui/static/js/air-datepicker/air-datepicker.d.ts
@ -1,146 +0,0 @@
-declare type AirDatepickerSelector = string | HTMLElement;
-
-export declare type AirDatepickerLocale = {
-    days: string[],
-    daysShort: string[],
-    daysMin: string[],
-    months: string[],
-    monthsShort: string[],
-    today: string,
-    clear: string,
-    dateFormat: string,
-    timeFormat: string,
-    firstDay: 0 | 1 | 2 | 3 | 4 | 5 | 6,
-}
-
-export declare type AirDatepickerButton = {
-    content: string | ((dp: AirDatepicker) => string),
-    tagName?: keyof HTMLElementTagNameMap,
-    className?: string,
-    attrs?: Record<string, string>,
-    onClick?: (dp: AirDatepicker) => void
-}
-
-export declare type AirDatepickerButtonPresets = 'clear' | 'today';
-
-export declare type AirDatepickerPosition = 'left' | 'left top' | 'left bottom' | 'top' | 'top left' | 'top right' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom left' | 'bottom right';
-export declare type AirDatepickerViews = 'days' | 'months' | 'years';
-export declare type AirDatepickerViewsSingle = 'day' | 'month' | 'year';
-export declare type AirDatepickerDate = string | number | Date;
-export declare type AirDatepickerNavEntry = string | ((dp: AirDatepicker) => string);
-export declare type AirDatepickerDecade = [number, number];
-export declare type AirDatepickerPositionCallback = (
-    {
-        $datepicker,
-        $target,
-        $pointer,
-        isViewChange,
-        done
-    }: {
-        $datepicker: HTMLDivElement,
-        $target: HTMLInputElement,
-        $pointer: HTMLElement,
-        isViewChange: boolean,
-        done: () => void
-    }) => void | (() => void)
-
-export declare type AirDatepickerOptions = {
-    classes: string
-    inline: boolean,
-    locale: Partial<AirDatepickerLocale>,
-    startDate: AirDatepickerDate,
-    firstDay: number,
-    isMobile: boolean,
-    visible: boolean,
-    weekends: [number, number],
-    dateFormat: string | ((d: Date) => string),
-    altField: AirDatepickerSelector,
-    altFieldDateFormat: string,
-    toggleSelected: boolean,
-    keyboardNav: boolean,
-    selectedDates: AirDatepickerDate[] | false,
-    container: AirDatepickerSelector,
-    position: AirDatepickerPosition | AirDatepickerPositionCallback,
-    offset: number,
-    view: AirDatepickerViews,
-    minView: AirDatepickerViews,
-    showOtherMonths: boolean,
-    selectOtherMonths: boolean,
-    moveToOtherMonthsOnSelect: boolean,
-    showOtherYears: boolean,
-    selectOtherYears: boolean,
-    moveToOtherYearsOnSelect: boolean,
-    minDate: AirDatepickerDate | false,
-    maxDate: AirDatepickerDate | false,
-    disableNavWhenOutOfRange: true,
-    multipleDates: number | true | false,
-    multipleDatesSeparator: string,
-    range: boolean,
-    dynamicRange: boolean,
-    buttons: AirDatepickerButtonPresets | AirDatepickerButton | (AirDatepickerButtonPresets| AirDatepickerButton)[] | false,
-    monthsField: keyof AirDatepickerLocale,
-    showEvent: string,
-    autoClose: boolean,
-    prevHtml: string,
-    nextHtml: string,
-    navTitles: {
-        days?: AirDatepickerNavEntry,
-        months?: AirDatepickerNavEntry,
-        years?: AirDatepickerNavEntry
-    },
-    timepicker: boolean,
-    onlyTimepicker: boolean,
-    dateTimeSeparator: string,
-    timeFormat: string,
-    minHours: number,
-    maxHours: number,
-    minMinutes: number,
-    maxMinutes: number,
-    hoursStep: number,
-    minutesStep: number,
-
-    onSelect: ({date, formattedDate, datepicker}: {date: Date | Date[], formattedDate: string | string[], datepicker: AirDatepicker}) => void,
-    onChangeViewDate: ({month, year, decade}: {month: number, year: number, decade: AirDatepickerDecade}) => void,
-    onChangeView: (view: AirDatepickerViews) => void,
-    onRenderCell: (params: {date: Date, cellType: AirDatepickerViewsSingle, datepicker: AirDatepicker}) => ({
-        disabled?: boolean,
-        classes?: string,
-        html?: string
-        attrs?: Record<string, string | number | undefined>
-    } | void),
-    onShow: (isAnimationComplete: boolean) => void,
-    onHide: (isAnimationComplete: boolean) => void,
-    onClickDayName: ({dayIndex, datepicker}: {dayIndex: number, datepicker: AirDatepicker}) => void
-}
-
-
-declare class AirDatepicker<E extends HTMLElement = HTMLInputElement> {
-    constructor(el: string | E, opts? : Partial<AirDatepickerOptions>)
-    static version: string
-    show: () => void
-    hide: () => void
-    next: () => void
-    prev: () => void
-    selectDate: (date: AirDatepickerDate | AirDatepickerDate[], opts?: {updateTime?: boolean, silent?: boolean}) => void
-    unselectDate: (date: AirDatepickerDate) => void
-    clear: () => void
-    formatDate: (date: AirDatepickerDate, format: string) => string
-    destroy: () => void
-    update: (newOpts: Partial<AirDatepickerOptions>) => void
-    setCurrentView: (newView: AirDatepickerViews) => void
-    setViewDate: (newViewDate: AirDatepickerDate) => void
-    setFocusDate: (date: AirDatepickerDate | false, opts?: {viewDateTransition?: boolean}) => void
-    up: (date?: AirDatepickerDate) => void
-    down: (date?: AirDatepickerDate) => void
-
-    $el: E
-    $datepicker: HTMLDivElement
-    viewDate: Date
-    currentView: AirDatepickerViews
-    selectedDates: Date[]
-    focusDate: Date | false
-    visible: boolean
-}
-
-
-export default AirDatepicker;
--- a/src/ui/static/js/air-datepicker/air-datepicker.js
+++ b/src/ui/static/js/air-datepicker/air-datepicker.js
--- a/src/ui/static/js/air-datepicker/index.es.js
+++ b/src/ui/static/js/air-datepicker/index.es.js
@ -1,2 +0,0 @@
-import AirDatepicker from "air-datepicker";
-export default AirDatepicker;
--- a/src/ui/static/js/air-datepicker/locale/ar.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/ar.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/ar' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const ar: AirDatepickerLocale;
-
-    export default ar;
-}
--- a/src/ui/static/js/air-datepicker/locale/ar.js
+++ b/src/ui/static/js/air-datepicker/locale/ar.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['الأحد', 'الأثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعه', 'السبت'],
-  daysShort: ['الأحد', 'الأثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعه', 'السبت'],
-  daysMin: ['الأحد', 'الأثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعه', 'السبت'],
-  months: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'اكتوبر', 'نوفمبر', 'ديسمبر'],
-  monthsShort: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'اكتوبر', 'نوفمبر', 'ديسمبر'],
-  today: 'اليوم',
-  clear: 'حذف',
-  dateFormat: 'dd/MM/yyyy',
-  timeFormat: 'hh:mm aa',
-  firstDay: 0
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/cs.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/cs.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/cs' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const cs: AirDatepickerLocale;
-
-    export default cs;
-}
--- a/src/ui/static/js/air-datepicker/locale/cs.js
+++ b/src/ui/static/js/air-datepicker/locale/cs.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota'],
-  daysShort: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
-  daysMin: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
-  months: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'],
-  monthsShort: ['Led', 'Úno', 'Bře', 'Dub', 'Kvě', 'Čvn', 'Čvc', 'Srp', 'Zář', 'Říj', 'Lis', 'Pro'],
-  today: 'Dnes',
-  clear: 'Vymazat',
-  dateFormat: 'dd.MM.yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/da.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/da.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/da' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const da: AirDatepickerLocale;
-
-    export default da;
-}
--- a/src/ui/static/js/air-datepicker/locale/da.js
+++ b/src/ui/static/js/air-datepicker/locale/da.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
-  daysShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
-  daysMin: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
-  months: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
-  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
-  today: 'I dag',
-  clear: 'Nulstil',
-  dateFormat: 'dd/MM/yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/de.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/de.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/de' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const de: AirDatepickerLocale;
-
-    export default de;
-}
--- a/src/ui/static/js/air-datepicker/locale/de.js
+++ b/src/ui/static/js/air-datepicker/locale/de.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
-  daysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
-  daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-  months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-  monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
-  today: 'Heute',
-  clear: 'Aufräumen',
-  dateFormat: 'dd.MM.yyyy',
-  timeFormat: 'HH:ii',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/en.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/en.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/en' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const en: AirDatepickerLocale;
-
-    export default en;
-}
--- a/src/ui/static/js/air-datepicker/locale/en.js
+++ b/src/ui/static/js/air-datepicker/locale/en.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-  daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-  daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-  today: 'Today',
-  clear: 'Clear',
-  dateFormat: 'MM/dd/yyyy',
-  timeFormat: 'hh:mm aa',
-  firstDay: 0
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/es.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/es.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/es' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const es: AirDatepickerLocale;
-
-    export default es;
-}
--- a/src/ui/static/js/air-datepicker/locale/es.js
+++ b/src/ui/static/js/air-datepicker/locale/es.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
-  daysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
-  daysMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
-  months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
-  monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
-  today: 'Hoy',
-  clear: 'Limpiar',
-  dateFormat: 'dd/MM/yyyy',
-  timeFormat: 'hh:mm aa',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/fi.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/fi.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/fi' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const fi: AirDatepickerLocale;
-
-    export default fi;
-}
--- a/src/ui/static/js/air-datepicker/locale/fi.js
+++ b/src/ui/static/js/air-datepicker/locale/fi.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Sunnuntai', 'Maanantai', 'Tiistai', 'Keskiviikko', 'Torstai', 'Perjantai', 'Lauantai'],
-  daysShort: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
-  daysMin: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
-  months: ['Tammikuu', 'Helmikuu', 'Maaliskuu', 'Huhtikuu', 'Toukokuu', 'Kesäkuu', 'Heinäkuu', 'Elokuu', 'Syyskuu', 'Lokakuu', 'Marraskuu', 'Joulukuu'],
-  monthsShort: ['Tammi', 'Helmi', 'Maalis', 'Huhti', 'Touko', 'Kesä', 'Heinä', 'Elo', 'Syys', 'Loka', 'Marras', 'Joulu'],
-  today: 'Tänään',
-  clear: 'Tyhjennä',
-  dateFormat: 'dd.MM.yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/fr.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/fr.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/fr' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const fr: AirDatepickerLocale;
-
-    export default fr;
-}
--- a/src/ui/static/js/air-datepicker/locale/fr.js
+++ b/src/ui/static/js/air-datepicker/locale/fr.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
-  daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
-  daysMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
-  months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
-  monthsShort: ['Jan', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Dec'],
-  today: "Aujourd'hui",
-  clear: 'Effacer',
-  dateFormat: 'dd/MM/yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/hu.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/hu.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/hu' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const hu: AirDatepickerLocale;
-
-    export default hu;
-}
--- a/src/ui/static/js/air-datepicker/locale/hu.js
+++ b/src/ui/static/js/air-datepicker/locale/hu.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Vasárnap', 'Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat'],
-  daysShort: ['Va', 'Hé', 'Ke', 'Sze', 'Cs', 'Pé', 'Szo'],
-  daysMin: ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'],
-  months: ['Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'],
-  monthsShort: ['Jan', 'Feb', 'Már', 'Ápr', 'Máj', 'Jún', 'Júl', 'Aug', 'Szep', 'Okt', 'Nov', 'Dec'],
-  today: 'Ma',
-  clear: 'Törlés',
-  dateFormat: 'yyyy-MM-dd',
-  timeFormat: 'hh:mm aa',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/it.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/it.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/it' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const it: AirDatepickerLocale;
-
-    export default it;
-}
--- a/src/ui/static/js/air-datepicker/locale/it.js
+++ b/src/ui/static/js/air-datepicker/locale/it.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],
-  daysShort: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
-  daysMin: ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa'],
-  months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
-  monthsShort: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
-  today: 'Oggi',
-  clear: 'Cancella',
-  dateFormat: 'dd/MM/yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/ja.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/ja.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/ja' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const ja: AirDatepickerLocale;
-
-    export default ja;
-}
--- a/src/ui/static/js/air-datepicker/locale/ja.js
+++ b/src/ui/static/js/air-datepicker/locale/ja.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
-  daysShort: ['日', '月', '火', '水', '木', '金', '土'],
-  daysMin: ['日', '月', '火', '水', '木', '金', '土'],
-  months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-  monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-  today: '今日',
-  clear: 'クリア',
-  dateFormat: 'yyyy/MM/dd',
-  timeFormat: 'HH:mm',
-  firstDay: 0
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/ko.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/ko.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/ko' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const ko: AirDatepickerLocale;
-
-    export default ko;
-}
--- a/src/ui/static/js/air-datepicker/locale/ko.js
+++ b/src/ui/static/js/air-datepicker/locale/ko.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
-  daysShort: ['일', '월', '화', '수', '목', '금', '토'],
-  daysMin: ['일', '월', '화', '수', '목', '금', '토'],
-  months: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
-  monthsShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
-  today: '오늘',
-  clear: '초기화',
-  dateFormat: 'MM/dd/yyyy',
-  timeFormat: 'hh:mm aa',
-  firstDay: 0
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/nl.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/nl.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/nl' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const nl: AirDatepickerLocale;
-
-    export default nl;
-}
--- a/src/ui/static/js/air-datepicker/locale/nl.js
+++ b/src/ui/static/js/air-datepicker/locale/nl.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
-  daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
-  daysMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
-  months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
-  monthsShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
-  today: 'Vandaag',
-  clear: 'Legen',
-  dateFormat: 'dd-MM-yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 0
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/pl.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/pl.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/pl' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const pl: AirDatepickerLocale;
-
-    export default pl;
-}
--- a/src/ui/static/js/air-datepicker/locale/pl.js
+++ b/src/ui/static/js/air-datepicker/locale/pl.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
-  daysShort: ['Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob'],
-  daysMin: ['Nd', 'Pn', 'Wt', 'Śr', 'Czw', 'Pt', 'So'],
-  months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
-  monthsShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
-  today: 'Dzisiaj',
-  clear: 'Wyczyść',
-  dateFormat: 'yyyy-MM-dd',
-  timeFormat: 'hh:mm:aa',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/pt-BR.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/pt-BR.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/pt-BR' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const pt-BR: AirDatepickerLocale;
-
-    export default pt-BR;
-}
--- a/src/ui/static/js/air-datepicker/locale/pt-BR.js
+++ b/src/ui/static/js/air-datepicker/locale/pt-BR.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
-  daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
-  daysMin: ['Do', 'Se', 'Te', 'Qu', 'Qu', 'Se', 'Sa'],
-  months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
-  monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
-  today: 'Hoje',
-  clear: 'Limpar',
-  dateFormat: 'dd/MM/yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 0
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/pt.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/pt.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/pt' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const pt: AirDatepickerLocale;
-
-    export default pt;
-}
--- a/src/ui/static/js/air-datepicker/locale/pt.js
+++ b/src/ui/static/js/air-datepicker/locale/pt.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
-  daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
-  daysMin: ['Do', 'Se', 'Te', 'Qa', 'Qi', 'Sx', 'Sa'],
-  months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
-  monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
-  today: 'Hoje',
-  clear: 'Limpar',
-  dateFormat: 'dd/MM/yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/ro.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/ro.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/ro' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const ro: AirDatepickerLocale;
-
-    export default ro;
-}
--- a/src/ui/static/js/air-datepicker/locale/ro.js
+++ b/src/ui/static/js/air-datepicker/locale/ro.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă'],
-  daysShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
-  daysMin: ['D', 'L', 'Ma', 'Mi', 'J', 'V', 'S'],
-  months: ['Ianuarie', 'Februarie', 'Martie', 'Aprilie', 'Mai', 'Iunie', 'Iulie', 'August', 'Septembrie', 'Octombrie', 'Noiembrie', 'Decembrie'],
-  monthsShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
-  today: 'Azi',
-  clear: 'Şterge',
-  dateFormat: 'dd.MM.yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/ru.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/ru.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/ru' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const ru: AirDatepickerLocale;
-
-    export default ru;
-}
--- a/src/ui/static/js/air-datepicker/locale/ru.js
+++ b/src/ui/static/js/air-datepicker/locale/ru.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
-  daysShort: ['Вос', 'Пон', 'Вто', 'Сре', 'Чет', 'Пят', 'Суб'],
-  daysMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
-  months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
-  monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
-  today: 'Сегодня',
-  clear: 'Очистить',
-  dateFormat: 'dd.MM.yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/si.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/si.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/si' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const si: AirDatepickerLocale;
-
-    export default si;
-}
--- a/src/ui/static/js/air-datepicker/locale/si.js
+++ b/src/ui/static/js/air-datepicker/locale/si.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['ඉරිදා', 'සදුදා', 'අඟහරැවදා', 'බදාදා', 'බ්‍රහස්‍පතින්‍', 'සිකුරාදා', 'සෙනසුරාදා'],
-  daysShort: ['ඉරිදා', 'සදුදා', 'අඟහ', 'බදාදා', 'බ්‍රහස්‍', 'සිකුරා', 'සෙන'],
-  daysMin: ['ඉරි', 'සදු', 'අඟ', 'බදා', 'බ්‍රහ', 'සිකු', 'සෙ'],
-  months: ['ජනවාරි', 'පෙබරවාරි', 'මාර්තු', 'අප්‍රේල්', 'මැයි', 'ජූනි', 'ජූලි', 'අගෝස්තු', 'සැප්තැම්බර්', 'ඔක්තෝබර්', 'නොවැම්බර්', 'දෙසැම්බර්'],
-  monthsShort: ['ජන', 'පෙබ', 'මාර්', 'අප්‍රේල්', 'මැයි', 'ජූනි', 'ජූලි', 'අගෝ', 'සැප්', 'ඔක්', 'නොවැ', 'දෙසැ'],
-  today: 'අද',
-  clear: 'යලි සකසන්න',
-  dateFormat: 'yyyy-mm-dd',
-  timeFormat: 'hh:ii aa',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/sk.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/sk.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/sk' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const sk: AirDatepickerLocale;
-
-    export default sk;
-}
--- a/src/ui/static/js/air-datepicker/locale/sk.js
+++ b/src/ui/static/js/air-datepicker/locale/sk.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota'],
-  daysShort: ['Ned', 'Pon', 'Uto', 'Str', 'Štv', 'Pia', 'Sob'],
-  daysMin: ['Ne', 'Po', 'Ut', 'St', 'Št', 'Pi', 'So'],
-  months: ['Január', 'Február', 'Marec', 'Apríl', 'Máj', 'Jún', 'Júl', 'August', 'September', 'Október', 'November', 'December'],
-  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Máj', 'Jún', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
-  today: 'Dnes',
-  clear: 'Vymazať',
-  dateFormat: 'dd.MM.yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/sv.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/sv.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/sv' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const sv: AirDatepickerLocale;
-
-    export default sv;
-}
--- a/src/ui/static/js/air-datepicker/locale/sv.js
+++ b/src/ui/static/js/air-datepicker/locale/sv.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag'],
-  daysShort: ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör'],
-  daysMin: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'],
-  months: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
-  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
-  today: 'I dag',
-  clear: 'Nollställ',
-  dateFormat: 'yyyy-MM-dd',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/th.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/th.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/th' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const th: AirDatepickerLocale;
-
-    export default th;
-}
--- a/src/ui/static/js/air-datepicker/locale/th.js
+++ b/src/ui/static/js/air-datepicker/locale/th.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['วันอาทิตย์', 'วันจันทร์', 'วันอังคาร', 'วันพุธ', 'วันพฤหัสบดี', 'วันศุกร์', 'วันเสาร์'],
-  daysShort: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
-  daysMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
-  months: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
-  monthsShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'],
-  today: 'วันนี้',
-  clear: 'ล้าง',
-  dateFormat: 'dd/MM/yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 0
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/tr.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/tr.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/tr' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const tr: AirDatepickerLocale;
-
-    export default tr;
-}
--- a/src/ui/static/js/air-datepicker/locale/tr.js
+++ b/src/ui/static/js/air-datepicker/locale/tr.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
-  daysShort: ['Pzr', 'Pts', 'Sl', 'Çar', 'Per', 'Cum', 'Cts'],
-  daysMin: ['Pa', 'Pt', 'Sl', 'Ça', 'Pe', 'Cu', 'Ct'],
-  months: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
-  monthsShort: ['Oca', 'Şbt', 'Mrt', 'Nsn', 'Mys', 'Hzr', 'Tmz', 'Ağt', 'Eyl', 'Ekm', 'Ksm', 'Arl'],
-  today: 'Bugün',
-  clear: 'Temizle',
-  dateFormat: 'dd.MM.yyyy',
-  timeFormat: 'hh:mm aa',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/uk.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/uk.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/uk' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const uk: AirDatepickerLocale;
-
-    export default uk;
-}
--- a/src/ui/static/js/air-datepicker/locale/uk.js
+++ b/src/ui/static/js/air-datepicker/locale/uk.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['Неділя', 'Понеділок', 'Вівторок', 'Середа', 'Четвер', 'П’ятниця', 'Субота'],
-  daysShort: ['Нед', 'Пнд', 'Вів', 'Срд', 'Чтв', 'Птн', 'Сбт'],
-  daysMin: ['Нд', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
-  months: ['Січень', 'Лютий', 'Березень', 'Квітень', 'Травень', 'Червень', 'Липень', 'Серпень', 'Вересень', 'Жовтень', 'Листопад', 'Грудень'],
-  monthsShort: ['Січ', 'Лют', 'Бер', 'Кві', 'Тра', 'Чер', 'Лип', 'Сер', 'Вер', 'Жов', 'Лис', 'Гру'],
-  today: 'Сьогодні',
-  clear: 'Очистити',
-  dateFormat: 'dd.MM.yyyy',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/air-datepicker/locale/zh.d.ts
+++ b/src/ui/static/js/air-datepicker/locale/zh.d.ts
@ -1,6 +0,0 @@
-declare module 'air-datepicker/locale/zh' {
-    import {AirDatepickerLocale} from 'air-datepicker';
-    const zh: AirDatepickerLocale;
-
-    export default zh;
-}
--- a/src/ui/static/js/air-datepicker/locale/zh.js
+++ b/src/ui/static/js/air-datepicker/locale/zh.js
@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
-  daysShort: ['日', '一', '二', '三', '四', '五', '六'],
-  daysMin: ['日', '一', '二', '三', '四', '五', '六'],
-  months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-  monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-  today: '今天',
-  clear: '清除',
-  dateFormat: 'yyyy-MM-dd',
-  timeFormat: 'HH:mm',
-  firstDay: 1
-};
-exports.default = _default;
--- a/src/ui/static/js/datepicker/DateRangePicker.js
+++ b/src/ui/static/js/datepicker/DateRangePicker.js
@ -0,0 +1,210 @@
+import {registerListeners, unregisterListeners} from './lib/event.js';
+import {formatDate} from './lib/date-format.js';
+import Datepicker from './Datepicker.js';
+
+// filter out the config options inapproprite to pass to Datepicker
+function filterOptions(options) {
+  const newOpts = Object.assign({}, options);
+
+  delete newOpts.inputs;
+  delete newOpts.allowOneSidedRange;
+  delete newOpts.maxNumberOfDates; // to ensure each datepicker handles a single date
+
+  return newOpts;
+}
+
+function setupDatepicker(rangepicker, changeDateListener, el, options) {
+  registerListeners(rangepicker, [
+    [el, 'changeDate', changeDateListener],
+  ]);
+  new Datepicker(el, options, rangepicker);
+}
+
+function onChangeDate(rangepicker, ev) {
+  // to prevent both datepickers trigger the other side's update each other
+  if (rangepicker._updating) {
+    return;
+  }
+  rangepicker._updating = true;
+
+  const target = ev.target;
+  if (target.datepicker === undefined) {
+    return;
+  }
+
+  const datepickers = rangepicker.datepickers;
+  const setDateOptions = {render: false};
+  const changedSide = rangepicker.inputs.indexOf(target);
+  const otherSide = changedSide === 0 ? 1 : 0;
+  const changedDate = datepickers[changedSide].dates[0];
+  const otherDate = datepickers[otherSide].dates[0];
+
+  if (changedDate !== undefined && otherDate !== undefined) {
+    // if the start of the range > the end, swap them
+    if (changedSide === 0 && changedDate > otherDate) {
+      datepickers[0].setDate(otherDate, setDateOptions);
+      datepickers[1].setDate(changedDate, setDateOptions);
+    } else if (changedSide === 1 && changedDate < otherDate) {
+      datepickers[0].setDate(changedDate, setDateOptions);
+      datepickers[1].setDate(otherDate, setDateOptions);
+    }
+  } else if (!rangepicker.allowOneSidedRange) {
+    // to prevent the range from becoming one-sided, copy changed side's
+    // selection (no matter if it's empty) to the other side
+    if (changedDate !== undefined || otherDate !== undefined) {
+      setDateOptions.clear = true;
+      datepickers[otherSide].setDate(datepickers[changedSide].dates, setDateOptions);
+    }
+  }
+  datepickers[0].picker.update().render();
+  datepickers[1].picker.update().render();
+  delete rangepicker._updating;
+}
+
+/**
+ * Class representing a date range picker
+ */
+export default class DateRangePicker  {
+  /**
+   * Create a date range picker
+   * @param  {Element} element - element to bind a date range picker
+   * @param  {Object} [options] - config options
+   */
+  constructor(element, options = {}) {
+    const inputs = Array.isArray(options.inputs)
+      ? options.inputs
+      : Array.from(element.querySelectorAll('input'));
+    if (inputs.length < 2) {
+      return;
+    }
+
+    element.rangepicker = this;
+    this.element = element;
+    this.inputs = inputs.slice(0, 2);
+    this.allowOneSidedRange = !!options.allowOneSidedRange;
+
+    const changeDateListener = onChangeDate.bind(null, this);
+    const cleanOptions = filterOptions(options);
+    // in order for initial date setup to work right when pcicLvel > 0,
+    // let Datepicker constructor add the instance to the rangepicker
+    const datepickers = [];
+    Object.defineProperty(this, 'datepickers', {
+      get() {
+        return datepickers;
+      },
+    });
+    setupDatepicker(this, changeDateListener, this.inputs[0], cleanOptions);
+    setupDatepicker(this, changeDateListener, this.inputs[1], cleanOptions);
+    Object.freeze(datepickers);
+    // normalize the range if inital dates are given
+    if (datepickers[0].dates.length > 0) {
+      onChangeDate(this, {target: this.inputs[0]});
+    } else if (datepickers[1].dates.length > 0) {
+      onChangeDate(this, {target: this.inputs[1]});
+    }
+  }
+
+  /**
+   * @type {Array} - selected date of the linked date pickers
+   */
+  get dates() {
+    return this.datepickers.length === 2
+      ? [
+          this.datepickers[0].dates[0],
+          this.datepickers[1].dates[0],
+        ]
+      : undefined;
+  }
+
+  /**
+   * Set new values to the config options
+   * @param {Object} options - config options to update
+   */
+  setOptions(options) {
+    this.allowOneSidedRange = !!options.allowOneSidedRange;
+
+    const cleanOptions = filterOptions(options);
+    this.datepickers[0].setOptions(cleanOptions);
+    this.datepickers[1].setOptions(cleanOptions);
+  }
+
+  /**
+   * Destroy the DateRangePicker instance
+   * @return {DateRangePicker} - the instance destroyed
+   */
+  destroy() {
+    this.datepickers[0].destroy();
+    this.datepickers[1].destroy();
+    unregisterListeners(this);
+    delete this.element.rangepicker;
+  }
+
+  /**
+   * Get the start and end dates of the date range
+   *
+   * The method returns Date objects by default. If format string is passed,
+   * it returns date strings formatted in given format.
+   * The result array always contains 2 items (start date/end date) and
+   * undefined is used for unselected side. (e.g. If none is selected,
+   * the result will be [undefined, undefined]. If only the end date is set
+   * when allowOneSidedRange config option is true, [undefined, endDate] will
+   * be returned.)
+   *
+   * @param  {String} [format] - Format string to stringify the dates
+   * @return {Array} - Start and end dates
+   */
+  getDates(format = undefined) {
+    const callback = format
+      ? date => formatDate(date, format, this.datepickers[0].config.locale)
+      : date => new Date(date);
+
+    return this.dates.map(date => date === undefined ? date : callback(date));
+  }
+
+  /**
+   * Set the start and end dates of the date range
+   *
+   * The method calls datepicker.setDate() internally using each of the
+   * arguments in start→end order.
+   *
+   * When a clear: true option object is passed instead of a date, the method
+   * clears the date.
+   *
+   * If an invalid date, the same date as the current one or an option object
+   * without clear: true is passed, the method considers that argument as an
+   * "ineffective" argument because calling datepicker.setDate() with those
+   * values makes no changes to the date selection.
+   *
+   * When the allowOneSidedRange config option is false, passing {clear: true}
+   * to clear the range works only when it is done to the last effective
+   * argument (in other words, passed to rangeEnd or to rangeStart along with
+   * ineffective rangeEnd). This is because when the date range is changed,
+   * it gets normalized based on the last change at the end of the changing
+   * process.
+   *
+   * @param {Date|Number|String|Object} rangeStart - Start date of the range
+   * or {clear: true} to clear the date
+   * @param {Date|Number|String|Object} rangeEnd - End date of the range
+   * or {clear: true} to clear the date
+   */
+  setDates(rangeStart, rangeEnd) {
+    const [datepicker0, datepicker1] = this.datepickers;
+    const origDates = this.dates;
+
+    // If range normalization runs on every change, we can't set a new range
+    // that starts after the end of the current range correctly because the
+    // normalization process swaps start↔︎end right after setting the new start
+    // date. To prevent this, the normalization process needs to run once after
+    // both of the new dates are set.
+    this._updating = true;
+    datepicker0.setDate(rangeStart);
+    datepicker1.setDate(rangeEnd);
+    delete this._updating;
+
+    if (datepicker1.dates[0] !== origDates[1]) {
+      onChangeDate(this, {target: this.inputs[1]});
+    } else if (datepicker0.dates[0] !== origDates[0]) {
+      onChangeDate(this, {target: this.inputs[0]});
+    }
+  }
+}
--- a/src/ui/static/js/datepicker/Datepicker.js
+++ b/src/ui/static/js/datepicker/Datepicker.js
@ -0,0 +1,502 @@
+import {lastItemOf, stringToArray, isInRange} from './lib/utils.js';
+import {today, regularizeDate} from './lib/date.js';
+import {parseDate, formatDate} from './lib/date-format.js';
+import {isActiveElement} from './lib/dom.js';
+import {registerListeners, unregisterListeners} from './lib/event.js';
+import {locales} from './i18n/base-locales.js';
+import defaultOptions from './options/defaultOptions.js';
+import processOptions from './options/processOptions.js';
+import Picker from './picker/Picker.js';
+import {triggerDatepickerEvent} from './events/functions.js';
+import {onKeydown, onFocus, onMousedown, onClickInput, onPaste} from './events/inputFieldListeners.js';
+import {onClickOutside} from './events/otherListeners.js';
+
+function stringifyDates(dates, config) {
+  return dates
+    .map(dt => formatDate(dt, config.format, config.locale))
+    .join(config.dateDelimiter);
+}
+
+// parse input dates and create an array of time values for selection
+// returns undefined if there are no valid dates in inputDates
+// when origDates (current selection) is passed, the function works to mix
+// the input dates into the current selection
+function processInputDates(datepicker, inputDates, clear = false) {
+  // const {config, dates: origDates, rangepicker} = datepicker;
+  const {config, dates: origDates, rangeSideIndex} = datepicker;
+  if (inputDates.length === 0) {
+    // empty input is considered valid unless origiDates is passed
+    return clear ? [] : undefined;
+  }
+
+  // const rangeEnd = rangepicker && datepicker === rangepicker.datepickers[1];
+  let newDates = inputDates.reduce((dates, dt) => {
+    let date = parseDate(dt, config.format, config.locale);
+    if (date === undefined) {
+      return dates;
+    }
+    // adjust to 1st of the month/Jan 1st of the year
+    // or to the last day of the monh/Dec 31st of the year if the datepicker
+    // is the range-end picker of a rangepicker
+    date = regularizeDate(date, config.pickLevel, rangeSideIndex);
+    if (
+      isInRange(date, config.minDate, config.maxDate)
+      && !dates.includes(date)
+      && !config.datesDisabled.includes(date)
+      && (config.pickLevel > 0 || !config.daysOfWeekDisabled.includes(new Date(date).getDay()))
+    ) {
+      dates.push(date);
+    }
+    return dates;
+  }, []);
+  if (newDates.length === 0) {
+    return;
+  }
+  if (config.multidate && !clear) {
+    // get the synmetric difference between origDates and newDates
+    newDates = newDates.reduce((dates, date) => {
+      if (!origDates.includes(date)) {
+        dates.push(date);
+      }
+      return dates;
+    }, origDates.filter(date => !newDates.includes(date)));
+  }
+  // do length check always because user can input multiple dates regardless of the mode
+  return config.maxNumberOfDates && newDates.length > config.maxNumberOfDates
+    ? newDates.slice(config.maxNumberOfDates * -1)
+    : newDates;
+}
+
+// refresh the UI elements
+// modes: 1: input only, 2, picker only, 3 both
+function refreshUI(datepicker, mode = 3, quickRender = true) {
+  const {config, picker, inputField} = datepicker;
+  if (mode & 2) {
+    const newView = picker.active ? config.pickLevel : config.startView;
+    picker.update().changeView(newView).render(quickRender);
+  }
+  if (mode & 1 && inputField) {
+    inputField.value = stringifyDates(datepicker.dates, config);
+  }
+}
+
+function setDate(datepicker, inputDates, options) {
+  let {clear, render, autohide, revert} = options;
+  if (render === undefined) {
+    render = true;
+  }
+  if (!render) {
+    autohide = false;
+  } else if (autohide === undefined) {
+    autohide = datepicker.config.autohide;
+  }
+
+  const newDates = processInputDates(datepicker, inputDates, clear);
+  if (!newDates && !revert) {
+    return;
+  }
+  if (newDates && newDates.toString() !== datepicker.dates.toString()) {
+    datepicker.dates = newDates;
+    refreshUI(datepicker, render ? 3 : 1);
+    triggerDatepickerEvent(datepicker, 'changeDate');
+  } else {
+    refreshUI(datepicker, 1);
+  }
+
+  if (autohide) {
+    datepicker.hide();
+  }
+}
+
+/**
+ * Class representing a date picker
+ */
+export default class Datepicker {
+  /**
+   * Create a date picker
+   * @param  {Element} element - element to bind a date picker
+   * @param  {Object} [options] - config options
+   * @param  {DateRangePicker} [rangepicker] - DateRangePicker instance the
+   * date picker belongs to. Use this only when creating date picker as a part
+   * of date range picker
+   */
+  constructor(element, options = {}, rangepicker = undefined) {
+    element.datepicker = this;
+    this.element = element;
+
+    const config = this.config = Object.assign({
+      buttonClass: (options.buttonClass && String(options.buttonClass)) || 'button',
+      container: null,
+      defaultViewDate: today(),
+      maxDate: undefined,
+      minDate: undefined,
+    }, processOptions(defaultOptions, this));
+    // configure by type
+    const inline = this.inline = element.tagName !== 'INPUT';
+    let inputField;
+    if (inline) {
+      config.container = element;
+    } else {
+      if (options.container) {
+        // omit string type check because it doesn't guarantee to avoid errors
+        // (invalid selector string causes abend with sytax error)
+        config.container = options.container instanceof HTMLElement
+          ? options.container
+          : document.querySelector(options.container);
+      }
+      inputField = this.inputField = element;
+      inputField.classList.add('datepicker-input');
+    }
+    if (rangepicker) {
+      // check validiry
+      const index = rangepicker.inputs.indexOf(inputField);
+      const datepickers = rangepicker.datepickers;
+      if (index < 0 || index > 1 || !Array.isArray(datepickers)) {
+        throw Error('Invalid rangepicker object.');
+      }
+      // attach itaelf to the rangepicker here so that processInputDates() can
+      // determine if this is the range-end picker of the rangepicker while
+      // setting inital values when pickLevel > 0
+      datepickers[index] = this;
+      // add getter for rangepicker
+      Object.defineProperty(this, 'rangepicker', {
+        get() {
+          return rangepicker;
+        },
+      });
+      Object.defineProperty(this, 'rangeSideIndex', {
+        get() {
+          return index;
+        },
+      });
+    }
+
+    // set up config
+    this._options = options;
+    Object.assign(config, processOptions(options, this));
+
+    // set initial dates
+    let initialDates;
+    if (inline) {
+      initialDates = stringToArray(element.dataset.date, config.dateDelimiter);
+      delete element.dataset.date;
+    } else {
+      initialDates = stringToArray(inputField.value, config.dateDelimiter);
+    }
+    this.dates = [];
+    // process initial value
+    const inputDateValues = processInputDates(this, initialDates);
+    if (inputDateValues && inputDateValues.length > 0) {
+      this.dates = inputDateValues;
+    }
+    if (inputField) {
+      inputField.value = stringifyDates(this.dates, config);
+    }
+
+    const picker = this.picker = new Picker(this);
+
+    if (inline) {
+      this.show();
+    } else {
+      // set up event listeners in other modes
+      const onMousedownDocument = onClickOutside.bind(null, this);
+      const listeners = [
+        [inputField, 'keydown', onKeydown.bind(null, this)],
+        [inputField, 'focus', onFocus.bind(null, this)],
+        [inputField, 'mousedown', onMousedown.bind(null, this)],
+        [inputField, 'click', onClickInput.bind(null, this)],
+        [inputField, 'paste', onPaste.bind(null, this)],
+        [document, 'mousedown', onMousedownDocument],
+        [document, 'touchstart', onMousedownDocument],
+        [window, 'resize', picker.place.bind(picker)]
+      ];
+      registerListeners(this, listeners);
+    }
+  }
+
+  /**
+   * Format Date object or time value in given format and language
+   * @param  {Date|Number} date - date or time value to format
+   * @param  {String|Object} format - format string or object that contains
+   * toDisplay() custom formatter, whose signature is
+   * - args:
+   *   - date: {Date} - Date instance of the date passed to the method
+   *   - format: {Object} - the format object passed to the method
+   *   - locale: {Object} - locale for the language specified by `lang`
+   * - return:
+   *     {String} formatted date
+   * @param  {String} [lang=en] - language code for the locale to use
+   * @return {String} formatted date
+   */
+  static formatDate(date, format, lang) {
+    return formatDate(date, format, lang && locales[lang] || locales.en);
+  }
+
+  /**
+   * Parse date string
+   * @param  {String|Date|Number} dateStr - date string, Date object or time
+   * value to parse
+   * @param  {String|Object} format - format string or object that contains
+   * toValue() custom parser, whose signature is
+   * - args:
+   *   - dateStr: {String|Date|Number} - the dateStr passed to the method
+   *   - format: {Object} - the format object passed to the method
+   *   - locale: {Object} - locale for the language specified by `lang`
+   * - return:
+   *     {Date|Number} parsed date or its time value
+   * @param  {String} [lang=en] - language code for the locale to use
+   * @return {Number} time value of parsed date
+   */
+  static parseDate(dateStr, format, lang) {
+    return parseDate(dateStr, format, lang && locales[lang] || locales.en);
+  }
+
+  /**
+   * @type {Object} - Installed locales in `[languageCode]: localeObject` format
+   * en`:_English (US)_ is pre-installed.
+   */
+  static get locales() {
+    return locales;
+  }
+
+  /**
+   * @type {Boolean} - Whether the picker element is shown. `true` whne shown
+   */
+  get active() {
+    return !!(this.picker && this.picker.active);
+  }
+
+  /**
+   * @type {HTMLDivElement} - DOM object of picker element
+   */
+  get pickerElement() {
+    return this.picker ? this.picker.element : undefined;
+  }
+
+  /**
+   * Set new values to the config options
+   * @param {Object} options - config options to update
+   */
+  setOptions(options) {
+    const picker = this.picker;
+    const newOptions = processOptions(options, this);
+    Object.assign(this._options, options);
+    Object.assign(this.config, newOptions);
+    picker.setOptions(newOptions);
+
+    refreshUI(this, 3);
+  }
+
+  /**
+   * Show the picker element
+   */
+  show() {
+    if (this.inputField) {
+      if (this.inputField.disabled) {
+        return;
+      }
+      if (!isActiveElement(this.inputField) && !this.config.disableTouchKeyboard) {
+        this._showing = true;
+        this.inputField.focus();
+        delete this._showing;
+      }
+    }
+    this.picker.show();
+  }
+
+  /**
+   * Hide the picker element
+   * Not available on inline picker
+   */
+  hide() {
+    if (this.inline) {
+      return;
+    }
+    this.picker.hide();
+    this.picker.update().changeView(this.config.startView).render();
+  }
+
+  /**
+   * Destroy the Datepicker instance
+   * @return {Detepicker} - the instance destroyed
+   */
+  destroy() {
+    this.hide();
+    unregisterListeners(this);
+    this.picker.detach();
+    if (!this.inline) {
+      this.inputField.classList.remove('datepicker-input');
+    }
+    delete this.element.datepicker;
+    return this;
+  }
+
+  /**
+   * Get the selected date(s)
+   *
+   * The method returns a Date object of selected date by default, and returns
+   * an array of selected dates in multidate mode. If format string is passed,
+   * it returns date string(s) formatted in given format.
+   *
+   * @param  {String} [format] - Format string to stringify the date(s)
+   * @return {Date|String|Date[]|String[]} - selected date(s), or if none is
+   * selected, empty array in multidate mode and untitled in sigledate mode
+   */
+  getDate(format = undefined) {
+    const callback = format
+      ? date => formatDate(date, format, this.config.locale)
+      : date => new Date(date);
+
+    if (this.config.multidate) {
+      return this.dates.map(callback);
+    }
+    if (this.dates.length > 0) {
+      return callback(this.dates[0]);
+    }
+  }
+
+  /**
+   * Set selected date(s)
+   *
+   * In multidate mode, you can pass multiple dates as a series of arguments
+   * or an array. (Since each date is parsed individually, the type of the
+   * dates doesn't have to be the same.)
+   * The given dates are used to toggle the select status of each date. The
+   * number of selected dates is kept from exceeding the length set to
+   * maxNumberOfDates.
+   *
+   * With clear: true option, the method can be used to clear the selection
+   * and to replace the selection instead of toggling in multidate mode.
+   * If the option is passed with no date arguments or an empty dates array,
+   * it works as "clear" (clear the selection then set nothing), and if the
+   * option is passed with new dates to select, it works as "replace" (clear
+   * the selection then set the given dates)
+   *
+   * When render: false option is used, the method omits re-rendering the
+   * picker element. In this case, you need to call refresh() method later in
+   * order for the picker element to reflect the changes. The input field is
+   * refreshed always regardless of this option.
+   *
+   * When invalid (unparsable, repeated, disabled or out-of-range) dates are
+   * passed, the method ignores them and applies only valid ones. In the case
+   * that all the given dates are invalid, which is distinguished from passing
+   * no dates, the method considers it as an error and leaves the selection
+   * untouched. (The input field also remains untouched unless revert: true
+   * option is used.)
+   *
+   * @param {...(Date|Number|String)|Array} [dates] - Date strings, Date
+   * objects, time values or mix of those for new selection
+   * @param {Object} [options] - function options
+   * - clear: {boolean} - Whether to clear the existing selection
+   *     defualt: false
+   * - render: {boolean} - Whether to re-render the picker element
+   *     default: true
+   * - autohide: {boolean} - Whether to hide the picker element after re-render
+   *     Ignored when used with render: false
+   *     default: config.autohide
+   * - revert: {boolean} - Whether to refresh the input field when all the
+   *     passed dates are invalid
+   *     default: false
+   */
+  setDate(...args) {
+    const dates = [...args];
+    const opts = {};
+    const lastArg = lastItemOf(args);
+    if (
+      typeof lastArg === 'object'
+      && !Array.isArray(lastArg)
+      && !(lastArg instanceof Date)
+      && lastArg
+    ) {
+      Object.assign(opts, dates.pop());
+    }
+
+    const inputDates = Array.isArray(dates[0]) ? dates[0] : dates;
+    setDate(this, inputDates, opts);
+  }
+
+  /**
+   * Update the selected date(s) with input field's value
+   * Not available on inline picker
+   *
+   * The input field will be refreshed with properly formatted date string.
+   *
+   * In the case that all the entered dates are invalid (unparsable, repeated,
+   * disabled or out-of-range), whixh is distinguished from empty input field,
+   * the method leaves the input field untouched as well as the selection by
+   * default. If revert: true option is used in this case, the input field is
+   * refreshed with the existing selection.
+   *
+   * @param  {Object} [options] - function options
+   * - autohide: {boolean} - whether to hide the picker element after refresh
+   *     default: false
+   * - revert: {boolean} - Whether to refresh the input field when all the
+   *     passed dates are invalid
+   *     default: false
+   */
+  update(options = undefined) {
+    if (this.inline) {
+      return;
+    }
+
+    const opts = Object.assign(options || {}, {clear: true, render: true});
+    const inputDates = stringToArray(this.inputField.value, this.config.dateDelimiter);
+    setDate(this, inputDates, opts);
+  }
+
+  /**
+   * Refresh the picker element and the associated input field
+   * @param {String} [target] - target item when refreshing one item only
+   * 'picker' or 'input'
+   * @param {Boolean} [forceRender] - whether to re-render the picker element
+   * regardless of its state instead of optimized refresh
+   */
+  refresh(target = undefined, forceRender = false) {
+    if (target && typeof target !== 'string') {
+      forceRender = target;
+      target = undefined;
+    }
+
+    let mode;
+    if (target === 'picker') {
+      mode = 2;
+    } else if (target === 'input') {
+      mode = 1;
+    } else {
+      mode = 3;
+    }
+    refreshUI(this, mode, !forceRender);
+  }
+
+  /**
+   * Enter edit mode
+   * Not available on inline picker or when the picker element is hidden
+   */
+  enterEditMode() {
+    if (this.inline || !this.picker.active || this.editMode) {
+      return;
+    }
+    this.editMode = true;
+    this.inputField.classList.add('in-edit');
+  }
+
+  /**
+   * Exit from edit mode
+   * Not available on inline picker
+   * @param  {Object} [options] - function options
+   * - update: {boolean} - whether to call update() after exiting
+   *     If false, input field is revert to the existing selection
+   *     default: false
+   */
+  exitEditMode(options = undefined) {
+    if (this.inline || !this.editMode) {
+      return;
+    }
+    const opts = Object.assign({update: false}, options);
+    delete this.editMode;
+    this.inputField.classList.remove('in-edit');
+    if (opts.update) {
+      this.update(opts);
+    }
+  }
+}
--- a/src/ui/static/js/datepicker/datepicker-full.js
+++ b/src/ui/static/js/datepicker/datepicker-full.js
@ -0,0 +1,5 @@
+import Datepicker from './Datepicker.js';
+import DateRangePicker from './DateRangePicker.js';
+
+window.Datepicker = Datepicker;
+window.DateRangePicker = DateRangePicker;
--- a/src/ui/static/js/datepicker/datepicker-full.min.js
+++ b/src/ui/static/js/datepicker/datepicker-full.min.js
--- a/src/ui/static/js/datepicker/datepicker.min.js
+++ b/src/ui/static/js/datepicker/datepicker.min.js
--- a/src/ui/static/js/datepicker/events/functions.js
+++ b/src/ui/static/js/datepicker/events/functions.js
@ -0,0 +1,48 @@
+import {limitToRange} from '../lib/utils.js';
+import {addMonths, addYears} from '../lib/date.js';
+
+export function triggerDatepickerEvent(datepicker, type) {
+  const detail = {
+    date: datepicker.getDate(),
+    viewDate: new Date(datepicker.picker.viewDate),
+    viewId: datepicker.picker.currentView.id,
+    datepicker,
+  };
+  datepicker.element.dispatchEvent(new CustomEvent(type, {detail}));
+}
+
+// direction: -1 (to previous), 1 (to next)
+export function goToPrevOrNext(datepicker, direction) {
+  const {minDate, maxDate} = datepicker.config;
+  const {currentView, viewDate} = datepicker.picker;
+  let newViewDate;
+  switch (currentView.id) {
+    case 0:
+      newViewDate = addMonths(viewDate, direction);
+      break;
+    case 1:
+      newViewDate = addYears(viewDate, direction);
+      break;
+    default:
+      newViewDate = addYears(viewDate, direction * currentView.navStep);
+  }
+  newViewDate = limitToRange(newViewDate, minDate, maxDate);
+  datepicker.picker.changeFocus(newViewDate).render();
+}
+
+export function switchView(datepicker) {
+  const viewId = datepicker.picker.currentView.id;
+  if (viewId === datepicker.config.maxView) {
+    return;
+  }
+  datepicker.picker.changeView(viewId + 1).render();
+}
+
+export function unfocus(datepicker) {
+  if (datepicker.config.updateOnBlur) {
+    datepicker.update({revert: true});
+  } else {
+    datepicker.refresh('input');
+  }
+  datepicker.hide();
+}
--- a/src/ui/static/js/datepicker/events/inputFieldListeners.js
+++ b/src/ui/static/js/datepicker/events/inputFieldListeners.js
@ -0,0 +1,195 @@
+import {isInRange} from '../lib/utils.js';
+import {isActiveElement} from '../lib/dom.js';
+import {addDays, addMonths, addYears, startOfYearPeriod} from '../lib/date.js';
+import {goToPrevOrNext, switchView, unfocus} from './functions.js';
+
+// Find the closest date that doesn't meet the condition for unavailable date
+// Returns undefined if no available date is found
+// addFn: function to calculate the next date
+//   - args: time value, amount
+// increase: amount to pass to addFn
+// testFn: function to test the unavailablity of the date
+//   - args: time value; retun: true if unavailable
+function findNextAvailableOne(date, addFn, increase, testFn, min, max) {
+  if (!isInRange(date, min, max)) {
+    return;
+  }
+  if (testFn(date)) {
+    const newDate = addFn(date, increase);
+    return findNextAvailableOne(newDate, addFn, increase, testFn, min, max);
+  }
+  return date;
+}
+
+// direction: -1 (left/up), 1 (right/down)
+// vertical: true for up/down, false for left/right
+function moveByArrowKey(datepicker, ev, direction, vertical) {
+  const picker = datepicker.picker;
+  const currentView = picker.currentView;
+  const step = currentView.step || 1;
+  let viewDate = picker.viewDate;
+  let addFn;
+  let testFn;
+  switch (currentView.id) {
+    case 0:
+      if (vertical) {
+        viewDate = addDays(viewDate, direction * 7);
+      } else if (ev.ctrlKey || ev.metaKey) {
+        viewDate = addYears(viewDate, direction);
+      } else {
+        viewDate = addDays(viewDate, direction);
+      }
+      addFn = addDays;
+      testFn = (date) => currentView.disabled.includes(date);
+      break;
+    case 1:
+      viewDate = addMonths(viewDate, vertical ? direction * 4 : direction);
+      addFn = addMonths;
+      testFn = (date) => {
+        const dt = new Date(date);
+        const {year, disabled} = currentView;
+        return dt.getFullYear() === year && disabled.includes(dt.getMonth());
+      };
+      break;
+    default:
+      viewDate = addYears(viewDate, direction * (vertical ? 4 : 1) * step);
+      addFn = addYears;
+      testFn = date => currentView.disabled.includes(startOfYearPeriod(date, step));
+  }
+  viewDate = findNextAvailableOne(
+    viewDate,
+    addFn,
+    direction < 0 ? -step : step,
+    testFn,
+    currentView.minDate,
+    currentView.maxDate
+  );
+  if (viewDate !== undefined) {
+    picker.changeFocus(viewDate).render();
+  }
+}
+
+export function onKeydown(datepicker, ev) {
+  const key = ev.key;
+  if (key === 'Tab') {
+    unfocus(datepicker);
+    return;
+  }
+
+  const picker = datepicker.picker;
+  const {id, isMinView} = picker.currentView;
+  if (!picker.active) {
+    if (key === 'ArrowDown') {
+      picker.show();
+    } else {
+      if (key === 'Enter') {
+        datepicker.update();
+      } else if (key === 'Escape') {
+        picker.show();
+      }
+      return;
+    }
+  } else if (datepicker.editMode) {
+    if (key === 'Enter') {
+      datepicker.exitEditMode({update: true, autohide: datepicker.config.autohide});
+    } else if (key === 'Escape') {
+      picker.hide();
+    }
+    return;
+  } else {
+    if (key === 'ArrowLeft') {
+      if (ev.ctrlKey || ev.metaKey) {
+        goToPrevOrNext(datepicker, -1);
+      } else if (ev.shiftKey) {
+        datepicker.enterEditMode();
+        return;
+      } else {
+        moveByArrowKey(datepicker, ev, -1, false);
+      }
+    } else if (key === 'ArrowRight') {
+      if (ev.ctrlKey || ev.metaKey) {
+        goToPrevOrNext(datepicker, 1);
+      } else if (ev.shiftKey) {
+        datepicker.enterEditMode();
+        return;
+      } else {
+        moveByArrowKey(datepicker, ev, 1, false);
+      }
+    } else if (key === 'ArrowUp') {
+      if (ev.ctrlKey || ev.metaKey) {
+        switchView(datepicker);
+      } else if (ev.shiftKey) {
+        datepicker.enterEditMode();
+        return;
+      } else {
+        moveByArrowKey(datepicker, ev, -1, true);
+      }
+    } else if (key === 'ArrowDown') {
+      if (ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+        datepicker.enterEditMode();
+        return;
+      }
+      moveByArrowKey(datepicker, ev, 1, true);
+    } else if (key === 'Enter') {
+      if (isMinView) {
+        datepicker.setDate(picker.viewDate);
+        return;
+      }
+      picker.changeView(id - 1).render();
+    } else {
+      if (key === 'Escape') {
+        picker.hide();
+      } else if (
+        key === 'Backspace'
+        || key === 'Delete'
+        || (key.length === 1 && !ev.ctrlKey && !ev.metaKey)
+      ) {
+        datepicker.enterEditMode();
+      }
+      return;
+    }
+  }
+  ev.preventDefault();
+}
+
+export function onFocus(datepicker) {
+  if (datepicker.config.showOnFocus && !datepicker._showing) {
+    datepicker.show();
+  }
+}
+
+// for the prevention for entering edit mode while getting focus on click
+export function onMousedown(datepicker, ev) {
+  const el = ev.target;
+  if (datepicker.picker.active || datepicker.config.showOnClick) {
+    el._active = isActiveElement(el);
+    el._clicking = setTimeout(() => {
+      delete el._active;
+      delete el._clicking;
+    }, 2000);
+  }
+}
+
+export function onClickInput(datepicker, ev) {
+  const el = ev.target;
+  if (!el._clicking) {
+    return;
+  }
+  clearTimeout(el._clicking);
+  delete el._clicking;
+
+  if (el._active) {
+    datepicker.enterEditMode();
+  }
+  delete el._active;
+
+  if (datepicker.config.showOnClick) {
+    datepicker.show();
+  }
+}
+
+export function onPaste(datepicker, ev) {
+  if (ev.clipboardData.types.includes('text/plain')) {
+    datepicker.enterEditMode();
+  }
+}
--- a/src/ui/static/js/datepicker/events/otherListeners.js
+++ b/src/ui/static/js/datepicker/events/otherListeners.js
@ -0,0 +1,20 @@
+import {isActiveElement} from '../lib/dom.js';
+import {findElementInEventPath} from '../lib/event.js';
+import {unfocus} from './functions.js';
+
+// for the `document` to delegate the events from outside the picker/input field
+export function onClickOutside(datepicker, ev) {
+  const {element, picker} = datepicker;
+  // check both picker's and input's activeness to make updateOnBlur work in
+  // the cases where...
+  // - picker is hidden by ESC key press → input stays focused
+  // - input is unfocused by closing mobile keyboard → piker is kept shown
+  if (!picker.active && !isActiveElement(element)) {
+    return;
+  }
+  const pickerElem = picker.element;
+  if (findElementInEventPath(ev, el => el === element || el === pickerElem)) {
+    return;
+  }
+  unfocus(datepicker);
+}
--- a/src/ui/static/js/datepicker/events/pickerListeners.js
+++ b/src/ui/static/js/datepicker/events/pickerListeners.js
@ -0,0 +1,68 @@
+import {today, addMonths, addYears} from '../lib/date.js';
+import {findElementInEventPath} from '../lib/event.js';
+import {goToPrevOrNext, switchView} from './functions.js';
+
+function goToSelectedMonthOrYear(datepicker, selection) {
+  const picker = datepicker.picker;
+  const viewDate = new Date(picker.viewDate);
+  const viewId = picker.currentView.id;
+  const newDate = viewId === 1
+    ? addMonths(viewDate, selection - viewDate.getMonth())
+    : addYears(viewDate, selection - viewDate.getFullYear());
+
+  picker.changeFocus(newDate).changeView(viewId - 1).render();
+}
+
+export function onClickTodayBtn(datepicker) {
+  const picker = datepicker.picker;
+  const currentDate = today();
+  if (datepicker.config.todayBtnMode === 1) {
+    if (datepicker.config.autohide) {
+      datepicker.setDate(currentDate);
+      return;
+    }
+    datepicker.setDate(currentDate, {render: false});
+    picker.update();
+  }
+  if (picker.viewDate !== currentDate) {
+    picker.changeFocus(currentDate);
+  }
+  picker.changeView(0).render();
+}
+
+export function onClickClearBtn(datepicker) {
+  datepicker.setDate({clear: true});
+}
+
+export function onClickViewSwitch(datepicker) {
+  switchView(datepicker);
+}
+
+export function onClickPrevBtn(datepicker) {
+  goToPrevOrNext(datepicker, -1);
+}
+
+export function onClickNextBtn(datepicker) {
+  goToPrevOrNext(datepicker, 1);
+}
+
+// For the picker's main block to delegete the events from `datepicker-cell`s
+export function onClickView(datepicker, ev) {
+  const target = findElementInEventPath(ev, '.datepicker-cell');
+  if (!target || target.classList.contains('disabled')) {
+    return;
+  }
+
+  const {id, isMinView} = datepicker.picker.currentView;
+  if (isMinView) {
+    datepicker.setDate(Number(target.dataset.date));
+  } else if (id === 1) {
+    goToSelectedMonthOrYear(datepicker, Number(target.dataset.month));
+  } else {
+    goToSelectedMonthOrYear(datepicker, Number(target.dataset.year));
+  }
+}
+
+export function onMousedownPicker(ev) {
+  ev.preventDefault();
+}
--- a/src/ui/static/js/datepicker/i18n/base-locales.js
+++ b/src/ui/static/js/datepicker/i18n/base-locales.js
@ -0,0 +1,13 @@
+// default locales
+export const locales = {
+  en: {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    clear: "Clear",
+    titleFormat: "MM y"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/ar-DZ.js
+++ b/src/ui/static/js/datepicker/i18n/locales/ar-DZ.js
@ -0,0 +1,19 @@
+/**
+ * Arabic-Algeria translation for bootstrap-datepicker
+ * Rabah Saadi <infosrabah@gmail.com>
+ */
+export default {
+  'ar-DZ': {
+    days: ["الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت", "الأحد"],
+    daysShort: ["أحد", "اثنين", "ثلاثاء", "أربعاء", "خميس", "جمعة", "سبت", "أحد"],
+    daysMin: ["ح", "ن", "ث", "ع", "خ", "ج", "س", "ح"],
+    months: ["جانفي","فيفري","مارس","أفريل","ماي","جوان","جويليه","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],
+    monthsShort: ["جانفي","فيفري","مارس","أفريل","ماي","جوان","جويليه","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],
+    today: "هذا اليوم",
+    rtl: true,
+    monthsTitle: "أشهر",
+    clear: "إزالة",
+    format: "yyyy/mm/dd",
+    weekStart: 0
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/ar-tn.js
+++ b/src/ui/static/js/datepicker/i18n/locales/ar-tn.js
@ -0,0 +1,15 @@
+/**
+ * Arabic-Tunisia translation for bootstrap-datepicker
+ * Souhaieb Besbes <besbes.souhaieb@gmail.com>
+ */
+export default {
+  'ar-tn': {
+    days: ["الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت", "الأحد"],
+    daysShort: ["أحد", "اثنين", "ثلاثاء", "أربعاء", "خميس", "جمعة", "سبت", "أحد"],
+    daysMin: ["ح", "ن", "ث", "ع", "خ", "ج", "س", "ح"],
+    months: ["جانفي","فيفري","مارس","أفريل","ماي","جوان","جويليه","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],
+    monthsShort: ["جانفي","فيفري","مارس","أفريل","ماي","جوان","جويليه","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],
+    today: "هذا اليوم",
+    rtl: true
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/ar.js
+++ b/src/ui/static/js/datepicker/i18n/locales/ar.js
@ -0,0 +1,15 @@
+/**
+ * Arabic translation for bootstrap-datepicker
+ * Mohammed Alshehri <alshehri866@gmail.com>
+ */
+export default {
+  ar: {
+    days: ["الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت", "الأحد"],
+    daysShort: ["أحد", "اثنين", "ثلاثاء", "أربعاء", "خميس", "جمعة", "سبت", "أحد"],
+    daysMin: ["ح", "ن", "ث", "ع", "خ", "ج", "س", "ح"],
+    months: ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"],
+    monthsShort: ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"],
+    today: "هذا اليوم",
+    rtl: true
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/az.js
+++ b/src/ui/static/js/datepicker/i18n/locales/az.js
@ -0,0 +1,14 @@
+// Azerbaijani
+export default {
+  az: {
+    days: ["Bazar", "Bazar ertəsi", "Çərşənbə axşamı", "Çərşənbə", "Cümə axşamı", "Cümə", "Şənbə"],
+    daysShort: ["B.", "B.e", "Ç.a", "Ç.", "C.a", "C.", "Ş."],
+    daysMin: ["B.", "B.e", "Ç.a", "Ç.", "C.a", "C.", "Ş."],
+    months: ["Yanvar", "Fevral", "Mart", "Aprel", "May", "İyun", "İyul", "Avqust", "Sentyabr", "Oktyabr", "Noyabr", "Dekabr"],
+    monthsShort: ["Yan", "Fev", "Mar", "Apr", "May", "İyun", "İyul", "Avq", "Sen", "Okt", "Noy", "Dek"],
+    today: "Bu gün",
+    weekStart: 1,
+    clear: "Təmizlə",
+    monthsTitle: 'Aylar'
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/bg.js
+++ b/src/ui/static/js/datepicker/i18n/locales/bg.js
@ -0,0 +1,14 @@
+/**
+ * Bulgarian translation for bootstrap-datepicker
+ * Apostol Apostolov <apostol.s.apostolov@gmail.com>
+ */
+export default {
+  bg: {
+    days: ["Неделя", "Понеделник", "Вторник", "Сряда", "Четвъртък", "Петък", "Събота"],
+    daysShort: ["Нед", "Пон", "Вто", "Сря", "Чет", "Пет", "Съб"],
+    daysMin: ["Н", "П", "В", "С", "Ч", "П", "С"],
+    months: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
+    monthsShort: ["Ян", "Фев", "Мар", "Апр", "Май", "Юни", "Юли", "Авг", "Сеп", "Окт", "Ное", "Дек"],
+    today: "днес"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/bm.js
+++ b/src/ui/static/js/datepicker/i18n/locales/bm.js
@ -0,0 +1,18 @@
+/**
+ * Bamanankan (bm) translation for bootstrap-datepicker
+ * Fatou Fall <fatou@medicmobile.org>
+ */
+export default {
+  bm: {
+    days: ["Kari","Ntɛnɛn","Tarata","Araba","Alamisa","Juma","Sibiri"],
+    daysShort: ["Kar","Ntɛ","Tar","Ara","Ala","Jum","Sib"],
+    daysMin: ["Ka","Nt","Ta","Ar","Al","Ju","Si"],
+    months: ["Zanwuyekalo","Fewuruyekalo","Marisikalo","Awirilikalo","Mɛkalo","Zuwɛnkalo","Zuluyekalo","Utikalo","Sɛtanburukalo","ɔkutɔburukalo","Nowanburukalo","Desanburukalo"],
+    monthsShort: ["Zan","Few","Mar","Awi","Mɛ","Zuw","Zul","Uti","Sɛt","ɔku","Now","Des"],
+    today: "Bi",
+    monthsTitle: "Kalo",
+    clear: "Ka jɔsi",
+    weekStart: 1,
+    format: "dd/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/bn.js
+++ b/src/ui/static/js/datepicker/i18n/locales/bn.js
@ -0,0 +1,19 @@
+/**
+ * Bengali (Bangla) translation for bootstrap-datepicker
+ * Karim Khan <kkhancse91@gmail.com>
+ * Orif N. Jr. <orif.zade@gmail.com>
+ */
+export default {
+  bn: {
+    days: ["রবিবার","সোমবার","মঙ্গলবার","বুধবার","বৃহস্পতিবার","শুক্রবার","শনিবার"],
+    daysShort: ["রবিবার","সোমবার","মঙ্গলবার","বুধবার","বৃহস্পতিবার","শুক্রবার","শনিবার"],
+    daysMin: ["রবি","সোম","মঙ্গল","বুধ","বৃহস্পতি","শুক্র","শনি"],
+    months: ["জানুয়ারী","ফেব্রুয়ারি","মার্চ","এপ্রিল","মে","জুন","জুলাই","অগাস্ট","সেপ্টেম্বর","অক্টোবর","নভেম্বর","ডিসেম্বর"],
+    monthsShort: ["জানুয়ারী","ফেব্রুয়ারি","মার্চ","এপ্রিল","মে","জুন","জুলাই","অগাস্ট","সেপ্টেম্বর","অক্টোবর","নভেম্বর","ডিসেম্বর"],
+    today: "আজ",
+    monthsTitle: "মাস",
+    clear: "পরিষ্কার",
+    weekStart: 0,
+    format: "mm/dd/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/br.js
+++ b/src/ui/static/js/datepicker/i18n/locales/br.js
@ -0,0 +1,18 @@
+/**
+ * Breton translation for bootstrap-datepicker
+ * Gwenn Meynier <tornoz@laposte.net>
+ */
+export default {
+  br: {
+    days: ["Sul", "Lun", "Meurzh", "Merc'her", "Yaou", "Gwener", "Sadorn"],
+    daysShort: ["Sul", "Lun", "Meu.", "Mer.", "Yao.", "Gwe.", "Sad."],
+    daysMin: ["Su", "L", "Meu", "Mer", "Y", "G", "Sa"],
+    months: ["Genver", "C'hwevrer", "Meurzh", "Ebrel", "Mae", "Mezheven", "Gouere", "Eost", "Gwengolo", "Here", "Du", "Kerzu"],
+    monthsShort: ["Genv.", "C'hw.", "Meur.", "Ebre.", "Mae", "Mezh.", "Goue.", "Eost", "Gwen.", "Here", "Du", "Kerz."],
+    today: "Hiziv",
+    monthsTitle: "Miz",
+    clear: "Dilemel",
+    weekStart: 1,
+    format: "dd/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/bs.js
+++ b/src/ui/static/js/datepicker/i18n/locales/bs.js
@ -0,0 +1,15 @@
+/**
+ * Bosnian translation for bootstrap-datepicker
+ */
+export default {
+  bs: {
+    days: ["Nedjelja","Ponedjeljak", "Utorak", "Srijeda", "Četvrtak", "Petak", "Subota"],
+    daysShort: ["Ned", "Pon", "Uto", "Sri", "Čet", "Pet", "Sub"],
+    daysMin: ["N", "Po", "U", "Sr", "Č", "Pe", "Su"],
+    months: ["Januar", "Februar", "Mart", "April", "Maj", "Juni", "Juli", "August", "Septembar", "Oktobar", "Novembar", "Decembar"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
+    today: "Danas",
+    weekStart: 1,
+    format: "dd.mm.yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/ca.js
+++ b/src/ui/static/js/datepicker/i18n/locales/ca.js
@ -0,0 +1,18 @@
+/**
+ * Catalan translation for bootstrap-datepicker
+ * J. Garcia <jogaco.en@gmail.com>
+ */
+export default {
+  ca: {
+    days: ["diumenge", "dilluns", "dimarts", "dimecres", "dijous", "divendres", "dissabte"],
+    daysShort: ["dg.",  "dl.", "dt.", "dc.", "dj.", "dv.", "ds."],
+    daysMin: ["dg", "dl", "dt", "dc", "dj", "dv", "ds"],
+    months: ["gener", "febrer", "març", "abril", "maig", "juny", "juliol", "agost", "setembre", "octubre", "novembre", "desembre"],
+    monthsShort: ["gen.", "febr.", "març", "abr.", "maig", "juny", "jul.", "ag.", "set.", "oct.", "nov.", "des."],
+    today: "Avui",
+    monthsTitle: "Mesos",
+    clear: "Esborra",
+    weekStart: 1,
+    format: "dd/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/cs.js
+++ b/src/ui/static/js/datepicker/i18n/locales/cs.js
@ -0,0 +1,19 @@
+/**
+ * Czech translation for bootstrap-datepicker
+ * Matěj Koubík <matej@koubik.name>
+ * Fixes by Michal Remiš <michal.remis@gmail.com>
+ */
+export default {
+  cs: {
+    days: ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"],
+    daysShort: ["Ned", "Pon", "Úte", "Stř", "Čtv", "Pát", "Sob"],
+    daysMin: ["Ne", "Po", "Út", "St", "Čt", "Pá", "So"],
+    months: ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"],
+    monthsShort: ["Led", "Úno", "Bře", "Dub", "Kvě", "Čer", "Čnc", "Srp", "Zář", "Říj", "Lis", "Pro"],
+    today: "Dnes",
+    clear: "Vymazat",
+    monthsTitle: "Měsíc",
+    weekStart: 1,
+    format: "dd.mm.yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/cy.js
+++ b/src/ui/static/js/datepicker/i18n/locales/cy.js
@ -0,0 +1,14 @@
+/**
+ * Welsh translation for bootstrap-datepicker
+ * S. Morris <s.morris@bangor.ac.uk>
+ */
+export default {
+  cy: {
+    days: ["Sul", "Llun", "Mawrth", "Mercher", "Iau", "Gwener", "Sadwrn"],
+    daysShort: ["Sul", "Llu", "Maw", "Mer", "Iau", "Gwe", "Sad"],
+    daysMin: ["Su", "Ll", "Ma", "Me", "Ia", "Gwe", "Sa"],
+    months: ["Ionawr", "Chewfror", "Mawrth", "Ebrill", "Mai", "Mehefin", "Gorfennaf", "Awst", "Medi", "Hydref", "Tachwedd", "Rhagfyr"],
+    monthsShort: ["Ion", "Chw", "Maw", "Ebr", "Mai", "Meh", "Gor", "Aws", "Med", "Hyd", "Tach", "Rha"],
+    today: "Heddiw"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/da.js
+++ b/src/ui/static/js/datepicker/i18n/locales/da.js
@ -0,0 +1,19 @@
+/**
+ * Danish translation for bootstrap-datepicker
+ * Christian Pedersen <https: //github.com/chripede>
+ * Ivan Mylyanyk <https: //github.com/imylyanyk>
+ */
+export default {
+  da: {
+    days: ["Søndag", "Mandag", "Tirsdag", "Onsdag", "Torsdag", "Fredag", "Lørdag"],
+    daysShort: ["Søn", "Man", "Tir", "Ons", "Tor", "Fre", "Lør"],
+    daysMin: ["Sø", "Ma", "Ti", "On", "To", "Fr", "Lø"],
+    months: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
+    today: "I Dag",
+    weekStart: 1,
+    clear: "Nulstil",
+    format: "dd/mm/yyyy",
+    monthsTitle: "Måneder"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/de.js
+++ b/src/ui/static/js/datepicker/i18n/locales/de.js
@ -0,0 +1,18 @@
+/**
+ * German translation for bootstrap-datepicker
+ * Sam Zurcher <sam@orelias.ch>
+ */
+export default {
+  de: {
+    days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
+    daysShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+    daysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+    months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
+    monthsShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
+    today: "Heute",
+    monthsTitle: "Monate",
+    clear: "Löschen",
+    weekStart: 1,
+    format: "dd.mm.yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/el.js
+++ b/src/ui/static/js/datepicker/i18n/locales/el.js
@ -0,0 +1,16 @@
+/**
+ * Greek translation for bootstrap-datepicker
+ */
+export default {
+  el: {
+    days: ["Κυριακή", "Δευτέρα", "Τρίτη", "Τετάρτη", "Πέμπτη", "Παρασκευή", "Σάββατο"],
+    daysShort: ["Κυρ", "Δευ", "Τρι", "Τετ", "Πεμ", "Παρ", "Σαβ"],
+    daysMin: ["Κυ", "Δε", "Τρ", "Τε", "Πε", "Πα", "Σα"],
+    months: ["Ιανουάριος", "Φεβρουάριος", "Μάρτιος", "Απρίλιος", "Μάιος", "Ιούνιος", "Ιούλιος", "Αύγουστος", "Σεπτέμβριος", "Οκτώβριος", "Νοέμβριος", "Δεκέμβριος"],
+    monthsShort: ["Ιαν", "Φεβ", "Μαρ", "Απρ", "Μάι", "Ιουν", "Ιουλ", "Αυγ", "Σεπ", "Οκτ", "Νοε", "Δεκ"],
+    today: "Σήμερα",
+    clear: "Καθαρισμός",
+    weekStart: 1,
+    format: "d/m/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/en-AU.js
+++ b/src/ui/static/js/datepicker/i18n/locales/en-AU.js
@ -0,0 +1,18 @@
+/**
+ * Australian English translation for bootstrap-datepicker
+ * Steve Chapman <steven.p.chapman@gmail.com>
+ */
+export default {
+  'en-AU': {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    monthsTitle: "Months",
+    clear: "Clear",
+    weekStart: 1,
+    format: "d/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/en-CA.js
+++ b/src/ui/static/js/datepicker/i18n/locales/en-CA.js
@ -0,0 +1,18 @@
+/**
+ * Canadian English translation for bootstrap-datepicker
+ * Mike Nacey <mnacey@gmail.com>
+ */
+export default {
+  'en-CA': {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    monthsTitle: "Months",
+    clear: "Clear",
+    weekStart: 0,
+    format: "yyyy-mm-dd"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/en-GB.js
+++ b/src/ui/static/js/datepicker/i18n/locales/en-GB.js
@ -0,0 +1,18 @@
+/**
+ * British English translation for bootstrap-datepicker
+ * Xavier Dutreilh <xavier@dutreilh.com>
+ */
+export default {
+  'en-GB': {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    monthsTitle: "Months",
+    clear: "Clear",
+    weekStart: 1,
+    format: "dd/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/en-IE.js
+++ b/src/ui/static/js/datepicker/i18n/locales/en-IE.js
@ -0,0 +1,17 @@
+/**
+ * Irish English translation for bootstrap-datepicker
+ */
+export default {
+  'en-IE': {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    monthsTitle: "Months",
+    clear: "Clear",
+    weekStart: 1,
+    format: "dd/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/en-NZ.js
+++ b/src/ui/static/js/datepicker/i18n/locales/en-NZ.js
@ -0,0 +1,17 @@
+/**
+ * New Zealand English translation for bootstrap-datepicker
+ */
+export default {
+  'en-NZ': {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    monthsTitle: "Months",
+    clear: "Clear",
+    weekStart: 1,
+    format: "d/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/en-ZA.js
+++ b/src/ui/static/js/datepicker/i18n/locales/en-ZA.js
@ -0,0 +1,17 @@
+/**
+ * South African English translation for bootstrap-datepicker
+ */
+export default {
+  'en-ZA': {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    monthsTitle: "Months",
+    clear: "Clear",
+    weekStart: 1,
+    format: "yyyy/mm/d"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/eo.js
+++ b/src/ui/static/js/datepicker/i18n/locales/eo.js
@ -0,0 +1,17 @@
+/**
+ * Esperanto translation for bootstrap-datepicker
+ * Emmanuel Debanne <https: //github.com/debanne>
+ */
+export default {
+  eo: {
+    days: ["dimanĉo", "lundo", "mardo", "merkredo", "ĵaŭdo", "vendredo", "sabato"],
+    daysShort: ["dim.", "lun.", "mar.", "mer.", "ĵaŭ.", "ven.", "sam."],
+    daysMin: ["d", "l", "ma", "me", "ĵ", "v", "s"],
+    months: ["januaro", "februaro", "marto", "aprilo", "majo", "junio", "julio", "aŭgusto", "septembro", "oktobro", "novembro", "decembro"],
+    monthsShort: ["jan.", "feb.", "mar.", "apr.", "majo", "jun.", "jul.", "aŭg.", "sep.", "okt.", "nov.", "dec."],
+    today: "Hodiaŭ",
+    clear: "Nuligi",
+    weekStart: 1,
+    format: "yyyy-mm-dd"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/es.js
+++ b/src/ui/static/js/datepicker/i18n/locales/es.js
@ -0,0 +1,18 @@
+/**
+ * Spanish translation for bootstrap-datepicker
+ * Bruno Bonamin <bruno.bonamin@gmail.com>
+ */
+export default {
+  es: {
+    days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
+    daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
+    daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
+    months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
+    monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
+    today: "Hoy",
+    monthsTitle: "Meses",
+    clear: "Borrar",
+    weekStart: 1,
+    format: "dd/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/et.js
+++ b/src/ui/static/js/datepicker/i18n/locales/et.js
@ -0,0 +1,18 @@
+/**
+ * Estonian translation for bootstrap-datepicker
+ * Ando Roots <https: //github.com/anroots>
+ * Fixes by Illimar Tambek <<https: //github.com/ragulka>
+ */
+export default {
+  et: {
+    days: ["Pühapäev", "Esmaspäev", "Teisipäev", "Kolmapäev", "Neljapäev", "Reede", "Laupäev"],
+    daysShort: ["Pühap", "Esmasp", "Teisip", "Kolmap", "Neljap", "Reede", "Laup"],
+    daysMin: ["P", "E", "T", "K", "N", "R", "L"],
+    months: ["Jaanuar", "Veebruar", "Märts", "Aprill", "Mai", "Juuni", "Juuli", "August", "September", "Oktoober", "November", "Detsember"],
+    monthsShort: ["Jaan", "Veebr", "Märts", "Apr", "Mai", "Juuni", "Juuli", "Aug", "Sept", "Okt", "Nov", "Dets"],
+    today: "Täna",
+    clear: "Tühjenda",
+    weekStart: 1,
+    format: "dd.mm.yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/eu.js
+++ b/src/ui/static/js/datepicker/i18n/locales/eu.js
@ -0,0 +1,18 @@
+/**
+ * Basque translation for bootstrap-datepicker
+ * Arkaitz Etxeberria <kondi80@gmail.com>
+ */
+export default {
+  eu: {
+    days: ['Igandea', 'Astelehena', 'Asteartea', 'Asteazkena', 'Osteguna', 'Ostirala', 'Larunbata'],
+    daysShort: ['Ig', 'Al', 'Ar', 'Az', 'Og', 'Ol', 'Lr'],
+    daysMin: ['Ig', 'Al', 'Ar', 'Az', 'Og', 'Ol', 'Lr'],
+    months: ['Urtarrila', 'Otsaila', 'Martxoa', 'Apirila', 'Maiatza', 'Ekaina', 'Uztaila', 'Abuztua', 'Iraila', 'Urria', 'Azaroa', 'Abendua'],
+    monthsShort: ['Urt', 'Ots', 'Mar', 'Api', 'Mai', 'Eka', 'Uzt', 'Abu', 'Ira', 'Urr', 'Aza', 'Abe'],
+    today: "Gaur",
+    monthsTitle: "Hilabeteak",
+    clear: "Ezabatu",
+    weekStart: 1,
+    format: "yyyy/mm/dd"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/fa.js
+++ b/src/ui/static/js/datepicker/i18n/locales/fa.js
@ -0,0 +1,17 @@
+/**
+ * Persian translation for bootstrap-datepicker
+ * Mostafa Rokooie <mostafa.rokooie@gmail.com>
+ */
+export default {
+  fa: {
+    days: ["یک‌شنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", "پنج‌شنبه", "جمعه", "شنبه", "یک‌شنبه"],
+    daysShort: ["یک", "دو", "سه", "چهار", "پنج", "جمعه", "شنبه", "یک"],
+    daysMin: ["ی", "د", "س", "چ", "پ", "ج", "ش", "ی"],
+    months: ["ژانویه", "فوریه", "مارس", "آوریل", "مه", "ژوئن", "ژوئیه", "اوت", "سپتامبر", "اکتبر", "نوامبر", "دسامبر"],
+    monthsShort: ["ژان", "فور", "مار", "آور", "مه", "ژون", "ژوی", "اوت", "سپت", "اکت", "نوا", "دسا"],
+    today: "امروز",
+    clear: "پاک کن",
+    weekStart: 1,
+    format: "yyyy/mm/dd"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/fi.js
+++ b/src/ui/static/js/datepicker/i18n/locales/fi.js
@ -0,0 +1,17 @@
+/**
+ * Finnish translation for bootstrap-datepicker
+ * Jaakko Salonen <https: //github.com/jsalonen>
+ */
+export default {
+  fi: {
+    days: ["sunnuntai", "maanantai", "tiistai", "keskiviikko", "torstai", "perjantai", "lauantai"],
+    daysShort: ["sun", "maa", "tii", "kes", "tor", "per", "lau"],
+    daysMin: ["su", "ma", "ti", "ke", "to", "pe", "la"],
+    months: ["tammikuu", "helmikuu", "maaliskuu", "huhtikuu", "toukokuu", "kesäkuu", "heinäkuu", "elokuu", "syyskuu", "lokakuu", "marraskuu", "joulukuu"],
+    monthsShort: ["tammi", "helmi", "maalis", "huhti", "touko", "kesä", "heinä", "elo", "syys", "loka", "marras", "joulu"],
+    today: "tänään",
+    clear: "Tyhjennä",
+    weekStart: 1,
+    format: "d.m.yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/fo.js
+++ b/src/ui/static/js/datepicker/i18n/locales/fo.js
@ -0,0 +1,15 @@
+/**
+ * Faroese translation for bootstrap-datepicker
+ * Theodor Johannesen <https: //github.com/theodorjohannesen>
+ */
+export default {
+  fo: {
+    days: ["Sunnudagur", "Mánadagur", "Týsdagur", "Mikudagur", "Hósdagur", "Fríggjadagur", "Leygardagur"],
+    daysShort: ["Sun", "Mán", "Týs", "Mik", "Hós", "Frí", "Ley"],
+    daysMin: ["Su", "Má", "Tý", "Mi", "Hó", "Fr", "Le"],
+    months: ["Januar", "Februar", "Marts", "Apríl", "Mei", "Juni", "Juli", "August", "Septembur", "Oktobur", "Novembur", "Desembur"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Des"],
+    today: "Í Dag",
+    clear: "Reinsa"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/fr-CH.js
+++ b/src/ui/static/js/datepicker/i18n/locales/fr-CH.js
@ -0,0 +1,21 @@
+/**
+ * French (Switzerland) translation for bootstrap-datepicker
+ * Christoph Jossi <c.jossi@ascami.ch>
+ * Based on
+ * French translation for bootstrap-datepicker
+ * Nico Mollet <nico.mollet@gmail.com>
+ */
+export default {
+  'fr-CH': {
+    days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
+    daysShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
+    daysMin: ["D", "L", "Ma", "Me", "J", "V", "S"],
+    months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
+    monthsShort: ["Jan", "Fév", "Mar", "Avr", "Mai", "Jui", "Jul", "Aou", "Sep", "Oct", "Nov", "Déc"],
+    today: "Aujourd'hui",
+    monthsTitle: "Mois",
+    clear: "Effacer",
+    weekStart: 1,
+    format: "dd.mm.yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/fr.js
+++ b/src/ui/static/js/datepicker/i18n/locales/fr.js
@ -0,0 +1,18 @@
+/**
+ * French translation for bootstrap-datepicker
+ * Nico Mollet <nico.mollet@gmail.com>
+ */
+export default {
+  fr: {
+    days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
+    daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
+    daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
+    months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
+    monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
+    today: "Aujourd'hui",
+    monthsTitle: "Mois",
+    clear: "Effacer",
+    weekStart: 1,
+    format: "dd/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/gl.js
+++ b/src/ui/static/js/datepicker/i18n/locales/gl.js
@ -0,0 +1,16 @@
+/**
+ * Galician translation
+ */
+export default {
+  gl: {
+    days: ["Domingo", "Luns", "Martes", "Mércores", "Xoves", "Venres", "Sábado"],
+    daysShort: ["Dom", "Lun", "Mar", "Mér", "Xov", "Ven", "Sáb"],
+    daysMin: ["Do", "Lu", "Ma", "Me", "Xo", "Ve", "Sa"],
+    months: ["Xaneiro", "Febreiro", "Marzo", "Abril", "Maio", "Xuño", "Xullo", "Agosto", "Setembro", "Outubro", "Novembro", "Decembro"],
+    monthsShort: ["Xan", "Feb", "Mar", "Abr", "Mai", "Xun", "Xul", "Ago", "Sep", "Out", "Nov", "Dec"],
+    today: "Hoxe",
+    clear: "Limpar",
+    weekStart: 1,
+    format: "dd/mm/yyyy"
+  }
+};
--- a/src/ui/static/js/datepicker/i18n/locales/he.js
+++ b/src/ui/static/js/datepicker/i18n/locales/he.js
@ -0,0 +1,15 @@
+/**
+ * Hebrew translation for bootstrap-datepicker
+ * Sagie Maoz <sagie@maoz.info>
+ */
+export default {
+  he: {
+    days: ["ראשון", "שני", "שלישי", "רביעי", "חמישי", "שישי", "שבת", "ראשון"],
+    daysShort: ["א", "ב", "ג", "ד", "ה", "ו", "ש", "א"],
+    daysMin: ["א", "ב", "ג", "ד", "ה", "ו", "ש", "א"],
+    months: ["ינואר", "פברואר", "מרץ", "אפריל", "מאי", "יוני", "יולי", "אוגוסט", "ספטמבר", "אוקטובר", "נובמבר", "דצמבר"],
+    monthsShort: ["ינו", "פבר", "מרץ", "אפר", "מאי", "יונ", "יול", "אוג", "ספט", "אוק", "נוב", "דצמ"],
+    today: "היום",
+    rtl: true
+  }
+};
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				.datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:10}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fefefe;border-radius:0;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 0 0 1px #cacaca}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:0;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#e6e6e6;box-shadow:inset 0 1px 1px hsla(0,0%,4%,.1)}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#e6e6e6;box-shadow:inset 0 -1px 1px hsla(0,0%,4%,.1);font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{background-color:#fefefe;color:#0a0a0a;margin:0}.datepicker-controls .button:focus,.datepicker-controls .button:hover{background-color:#d8d8d8}.datepicker-controls .button:focus[disabled],.datepicker-controls .button:hover[disabled]{background-color:#fefefe;color:#0a0a0a;opacity:.25}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-footer .datepicker-controls .button{border-radius:0;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#8a8a8a;font-size:.75rem;width:2.25rem}@media (max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f8f8f8;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#f1f1f1}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#1779ba;color:#fefefe;font-weight:semibold}.datepicker-cell.disabled{color:#e6e6e6}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#cacaca}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e5e5e5}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f7f7f7;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused,.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#f1f1f1}.datepicker-cell.today:not(.selected){background-color:#d7ecfa}.datepicker-cell.today:not(.selected):not(.disabled){color:#8a8a8a}.datepicker-cell.today.focused:not(.selected){background-color:#cbe7f9}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#767676;color:#fefefe}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#707070}.datepicker-cell.range-end,.datepicker-cell.range-start{border-radius:0 0 0 0}.datepicker-cell.range{background-color:#e6e6e6;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#e0e0e0}.datepicker-cell.range.disabled{color:#cdcdcd}.datepicker-cell.range.focused{background-color:#d9d9d9}.datepicker-cell.range.today{background-color:#b3dbf6}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#a4a4a4}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em hsla(0,0%,64%,.2)}