[REF] web: update bootstrap-datetimepicker lib and adapt datepicker widget

from 3.0.3 to 4.17.42

3 files changed, 352 insertions, 295 deletions

diff --git a/addons/web/static/lib/bootstrap-datetimepicker/src/less/_bootstrap-datetimepicker.less b/addons/web/static/lib/bootstrap-datetimepicker/src/less/_bootstrap-datetimepicker.less
new file mode 100644
index 00000000000..a92cd378abe
--- /dev/null
+++ b/addons/web/static/lib/bootstrap-datetimepicker/src/less/_bootstrap-datetimepicker.less
@@ -0,0 +1,352 @@
+/*!
+ * Datetimepicker for Bootstrap 3
+ * version : 4.17.42
+ * https://github.com/Eonasdan/bootstrap-datetimepicker/
+ */
+@bs-datetimepicker-timepicker-font-size: 1.2em;
+@bs-datetimepicker-active-bg: @btn-primary-bg;
+@bs-datetimepicker-active-color: @btn-primary-color;
+@bs-datetimepicker-border-radius: @border-radius-base;
+@bs-datetimepicker-btn-hover-bg: @gray-lighter;
+@bs-datetimepicker-disabled-color: @gray-light;
+@bs-datetimepicker-alternate-color: @gray-light;
+@bs-datetimepicker-secondary-border-color: #ccc;
+@bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2);
+@bs-datetimepicker-primary-border-color: white;
+@bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+
+.bootstrap-datetimepicker-widget {
+    list-style: none;
+
+    &.dropdown-menu {
+        margin: 2px 0;
+        padding: 4px;
+        width: 19em;
+
+        &.timepicker-sbs {
+            @media (min-width: @screen-sm-min) {
+                width: 38em;
+            }
+
+            @media (min-width: @screen-md-min) {
+                width: 38em;
+            }
+
+            @media (min-width: @screen-lg-min) {
+                width: 38em;
+            }
+        }
+
+        &:before, &:after {
+            content: '';
+            display: inline-block;
+            position: absolute;
+        }
+
+        &.bottom {
+            &:before {
+                border-left: 7px solid transparent;
+                border-right: 7px solid transparent;
+                border-bottom: 7px solid @bs-datetimepicker-secondary-border-color;
+                border-bottom-color: @bs-datetimepicker-secondary-border-color-rgba;
+                top: -7px;
+                left: 7px;
+            }
+
+            &:after {
+                border-left: 6px solid transparent;
+                border-right: 6px solid transparent;
+                border-bottom: 6px solid @bs-datetimepicker-primary-border-color;
+                top: -6px;
+                left: 8px;
+            }
+        }
+
+        &.top {
+            &:before {
+                border-left: 7px solid transparent;
+                border-right: 7px solid transparent;
+                border-top: 7px solid @bs-datetimepicker-secondary-border-color;
+                border-top-color: @bs-datetimepicker-secondary-border-color-rgba;
+                bottom: -7px;
+                left: 6px;
+            }
+
+            &:after {
+                border-left: 6px solid transparent;
+                border-right: 6px solid transparent;
+                border-top: 6px solid @bs-datetimepicker-primary-border-color;
+                bottom: -6px;
+                left: 7px;
+            }
+        }
+
+        &.pull-right {
+            &:before {
+                left: auto;
+                right: 6px;
+            }
+
+            &:after {
+                left: auto;
+                right: 7px;
+            }
+        }
+    }
+
+    .list-unstyled {
+        margin: 0;
+    }
+
+    a[data-action] {
+        padding: 6px 0;
+    }
+
+    a[data-action]:active {
+        box-shadow: none;
+    }
+
+    .timepicker-hour, .timepicker-minute, .timepicker-second {
+        width: 54px;
+        font-weight: bold;
+        font-size: @bs-datetimepicker-timepicker-font-size;
+        margin: 0;
+    }
+
+    button[data-action] {
+        padding: 6px;
+    }
+
+    .btn[data-action="incrementHours"]::after {
+        .sr-only();
+        content: "Increment Hours";
+    }
+
+    .btn[data-action="incrementMinutes"]::after {
+        .sr-only();
+        content: "Increment Minutes";
+    }
+
+    .btn[data-action="decrementHours"]::after {
+        .sr-only();
+        content: "Decrement Hours";
+    }
+
+    .btn[data-action="decrementMinutes"]::after {
+        .sr-only();
+        content: "Decrement Minutes";
+    }
+
+    .btn[data-action="showHours"]::after {
+        .sr-only();
+        content: "Show Hours";
+    }
+
+    .btn[data-action="showMinutes"]::after {
+        .sr-only();
+        content: "Show Minutes";
+    }
+
+    .btn[data-action="togglePeriod"]::after {
+        .sr-only();
+        content: "Toggle AM/PM";
+    }
+
+    .btn[data-action="clear"]::after {
+        .sr-only();
+        content: "Clear the picker";
+    }
+
+    .btn[data-action="today"]::after {
+        .sr-only();
+        content: "Set the date to today";
+    }
+
+    .picker-switch {
+        text-align: center;
+
+        &::after {
+            .sr-only();
+            content: "Toggle Date and Time Screens";
+        }
+
+        td {
+            padding: 0;
+            margin: 0;
+            height: auto;
+            width: auto;
+            line-height: inherit;
+
+            span {
+                line-height: 2.5;
+                height: 2.5em;
+                width: 100%;
+            }
+        }
+    }
+
+    table {
+        width: 100%;
+        margin: 0;
+
+
+        & td,
+        & th {
+            text-align: center;
+            border-radius: @bs-datetimepicker-border-radius;
+        }
+
+        & th {
+            height: 20px;
+            line-height: 20px;
+            width: 20px;
+
+            &.picker-switch {
+                width: 145px;
+            }
+
+            &.disabled,
+            &.disabled:hover {
+                background: none;
+                color: @bs-datetimepicker-disabled-color;
+                cursor: not-allowed;
+            }
+
+            &.prev::after {
+                .sr-only();
+                content: "Previous Month";
+            }
+
+            &.next::after {
+                .sr-only();
+                content: "Next Month";
+            }
+        }
+
+        & thead tr:first-child th {
+            cursor: pointer;
+
+            &:hover {
+                background: @bs-datetimepicker-btn-hover-bg;
+            }
+        }
+
+        & td {
+            height: 54px;
+            line-height: 54px;
+            width: 54px;
+
+            &.cw {
+                font-size: .8em;
+                height: 20px;
+                line-height: 20px;
+                color: @bs-datetimepicker-alternate-color;
+            }
+
+            &.day {
+                height: 20px;
+                line-height: 20px;
+                width: 20px;
+            }
+
+            &.day:hover,
+            &.hour:hover,
+            &.minute:hover,
+            &.second:hover {
+                background: @bs-datetimepicker-btn-hover-bg;
+                cursor: pointer;
+            }
+
+            &.old,
+            &.new {
+                color: @bs-datetimepicker-alternate-color;
+            }
+
+            &.today {
+                position: relative;
+
+                &:before {
+                    content: '';
+                    display: inline-block;
+                    border: solid transparent;
+                    border-width: 0 0 7px 7px;
+                    border-bottom-color: @bs-datetimepicker-active-bg;
+                    border-top-color: @bs-datetimepicker-secondary-border-color-rgba;
+                    position: absolute;
+                    bottom: 4px;
+                    right: 4px;
+                }
+            }
+
+            &.active,
+            &.active:hover {
+                background-color: @bs-datetimepicker-active-bg;
+                color: @bs-datetimepicker-active-color;
+                text-shadow: @bs-datetimepicker-text-shadow;
+            }
+
+            &.active.today:before {
+                border-bottom-color: #fff;
+            }
+
+            &.disabled,
+            &.disabled:hover {
+                background: none;
+                color: @bs-datetimepicker-disabled-color;
+                cursor: not-allowed;
+            }
+
+            span {
+                display: inline-block;
+                width: 54px;
+                height: 54px;
+                line-height: 54px;
+                margin: 2px 1.5px;
+                cursor: pointer;
+                border-radius: @bs-datetimepicker-border-radius;
+
+                &:hover {
+                    background: @bs-datetimepicker-btn-hover-bg;
+                }
+
+                &.active {
+                    background-color: @bs-datetimepicker-active-bg;
+                    color: @bs-datetimepicker-active-color;
+                    text-shadow: @bs-datetimepicker-text-shadow;
+                }
+
+                &.old {
+                    color: @bs-datetimepicker-alternate-color;
+                }
+
+                &.disabled,
+                &.disabled:hover {
+                    background: none;
+                    color: @bs-datetimepicker-disabled-color;
+                    cursor: not-allowed;
+                }
+            }
+        }
+    }
+
+    &.usetwentyfour {
+        td.hour {
+            height: 27px;
+            line-height: 27px;
+        }
+    }
+	
+	&.wider {
+		width: 21em;
+	}
+
+	& .datepicker-decades .decade {
+        line-height: 1.8em !important;
+    }
+}
+
+.input-group.date {
+    & .input-group-addon {
+        cursor: pointer;
+    }
+}
diff --git a/addons/web/static/lib/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker-build.less b/addons/web/static/lib/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker-build.less
deleted file mode 100644
index 4a17370153b..00000000000
--- a/addons/web/static/lib/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker-build.less
+++ /dev/null
@@ -1,5 +0,0 @@
-// Import boostrap variables including default color palette and fonts
-@import "../../node_modules/bootstrap/less/variables.less";
-
-// Import datepicker component
-@import "bootstrap-datetimepicker.less";
diff --git a/addons/web/static/lib/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker.less b/addons/web/static/lib/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker.less
deleted file mode 100755
index 49fbc15d300..00000000000
--- a/addons/web/static/lib/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker.less
+++ /dev/null
@@ -1,290 +0,0 @@
-/*!
- * Datetimepicker for Bootstrap v3
-//! version : 3.0.3
- * https://github.com/Eonasdan/bootstrap-datetimepicker/
- */
-.bootstrap-datetimepicker-widget {
-    top: 0;
-    left: 0;
-    width: 250px;
-    padding: 4px;
-    margin-top: 1px;
-    z-index: 99999 !important;
-    border-radius: @border-radius-base;
-
-    &.timepicker-sbs {
-        width: 600px;
-    }
-
-    &.bottom {
-        &:before {
-            content: '';
-            display: inline-block;
-            border-left: 7px solid transparent;
-            border-right: 7px solid transparent;
-            border-bottom: 7px solid #ccc;
-            border-bottom-color: rgba(0,0,0,.2);
-            position: absolute;
-            top: -7px;
-            left: 7px;
-        }
-
-        &:after {
-            content: '';
-            display: inline-block;
-            border-left: 6px solid transparent;
-            border-right: 6px solid transparent;
-            border-bottom: 6px solid white;
-            position: absolute;
-            top: -6px;
-            left: 8px;
-        }
-    }
-
-    &.top {
-        &:before {
-            content: '';
-            display: inline-block;
-            border-left: 7px solid transparent;
-            border-right: 7px solid transparent;
-            border-top: 7px solid #ccc;
-            border-top-color: rgba(0,0,0,.2);
-            position: absolute;
-            bottom: -7px;
-            left: 6px;
-        }
-
-        &:after {
-            content: '';
-            display: inline-block;
-            border-left: 6px solid transparent;
-            border-right: 6px solid transparent;
-            border-top: 6px solid white;
-            position: absolute;
-            bottom: -6px;
-            left: 7px;
-        }
-    }
-
-    & .dow {
-        width: 14.2857%;
-    }
-
-    &.pull-right {
-        &:before {
-            left: auto;
-            right: 6px;
-        }
-
-        &:after {
-            left: auto;
-            right: 7px;
-        }
-    }
-
-    >ul {
-        list-style-type: none;
-        margin: 0;
-    }
-
-    a[data-action] {
-      padding: 6px 0;
-    }
-
-    .timepicker-hour, .timepicker-minute, .timepicker-second {
-        width: 54px;
-        font-weight: bold;
-        font-size: 1.2em;
-        margin: 0;
-    }
-
-    button[data-action] {
-      padding: 6px;
-    }
-
-    table[data-hour-format="12"] .separator {
-        width: 4px;
-        padding: 0;
-        margin: 0;
-    }
-
-    .datepicker > div {
-        display: none;
-    }
-
-    .picker-switch {
-        text-align: center;
-    }
-
-    table {
-        width: 100%;
-        margin: 0;
-    }
-
-    td,
-    th {
-        text-align: center;
-        border-radius: @border-radius-base;
-    }
-
-    td {
-        height: 54px;
-        line-height: 54px;
-        width: 54px;
-
-        &.cw
-        {
-            font-size: 10px;
-            height: 20px;
-            line-height: 20px;
-            color: @gray-light;
-        }
-
-        &.day
-        {
-            height: 20px;
-            line-height: 20px;
-            width: 20px;
-        }
-
-        &.day:hover,
-        &.hour:hover,
-        &.minute:hover,
-        &.second:hover {
-            background: @gray-lighter;
-            cursor: pointer;
-        }
-
-        &.old,
-        &.new {
-            color: @gray-light;
-        }
-
-        &.today {
-            position: relative;
-
-            &:before {
-                content: '';
-                display: inline-block;
-                border-left: 7px solid transparent;
-                border-bottom: 7px solid @btn-primary-bg;
-                border-top-color: rgba(0, 0, 0, 0.2);
-                position: absolute;
-                bottom: 4px;
-                right: 4px;
-            }
-        }
-
-        &.active,
-        &.active:hover {
-            background-color: @btn-primary-bg;
-            color: #fff;
-            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-        }
-
-            &.active.today:before {
-                border-bottom-color: #fff;
-            }
-
-        &.disabled,
-        &.disabled:hover {
-            background: none;
-            color: @gray-light;
-            cursor: not-allowed;
-        }
-
-        span {
-            display: inline-block;
-            width: 54px;
-            height: 54px;
-            line-height: 54px;
-            margin: 2px 1.5px;
-            cursor: pointer;
-            border-radius: @border-radius-base;
-
-            &:hover {
-                background: @gray-lighter;
-            }
-
-            &.active {
-                background-color: @btn-primary-bg;
-                color: #fff;
-                text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-            }
-
-            &.old {
-                color: @gray-light;
-            }
-
-            &.disabled,
-            &.disabled:hover {
-                background: none;
-                color: @gray-light;
-                cursor: not-allowed;
-            }
-        }
-    }
-
-    th {
-        height: 20px;
-        line-height: 20px;
-        width: 20px;
-
-        &.picker-switch {
-            width: 145px;
-        }
-
-        &.next,
-        &.prev {
-            font-size: @font-size-base * 1.5;
-        }
-
-        &.disabled,
-        &.disabled:hover {
-            background: none;
-            color: @gray-light;
-            cursor: not-allowed;
-        }
-    }
-
-    thead tr:first-child th {
-        cursor: pointer;
-
-        &:hover {
-            background: @gray-lighter;
-        }
-    }
-}
-
-.input-group {
-    &.date {
-        .input-group-addon span {
-            display: block;
-            cursor: pointer;
-            width: 16px;
-            height: 16px;
-        }
-    }
-}
-
-.bootstrap-datetimepicker-widget.left-oriented {
-    &:before {
-        left: auto;
-        right: 6px;
-    }
-
-    &:after {
-        left: auto;
-        right: 7px;
-    }
-}
-
-.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td {
-    padding: 0px !important;
-}
-
-@media screen and (max-width: 767px) {
-    .bootstrap-datetimepicker-widget.timepicker-sbs {
-        width: 283px;
-    }
-}