[FIX] web: remove old datetimepicker and change by bootstrap datetimepicker

2 files changed, 287 insertions, 0 deletions

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
new file mode 100644
index 00000000000..7f5288332e7
--- /dev/null
+++ b/addons/web/static/lib/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker-build.less
@@ -0,0 +1,5 @@
+// Import boostrap variables including default color palette and fonts
+@import "../bootstrap/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
new file mode 100755
index 00000000000..48e9f1215a3
--- /dev/null
+++ b/addons/web/static/lib/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker.less
@@ -0,0 +1,282 @@
+/*!
+ * Datetimepicker for Bootstrap v3
+ * 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: 4px;
+
+    &.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: 4px;
+    }
+
+    td {
+        height: 54px;
+        line-height: 54px;
+        width: 54px;
+
+        &.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: block;
+            width: 54px;
+            height: 54px;
+            line-height: 54px;
+            float: left;
+            margin: 2px 1.5px;
+            cursor: pointer;
+            border-radius: 4px;
+
+            &: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;
+
+        &.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;
+    }
+}