feat(datepicker): currently broken version using tail.datetime instead

frontend/src/utils/form/datepicker.js

@@ -1,4 +1,4 @@
-import flatpickr from 'flatpickr';
+import datetime from 'tail.datetime';
 import { Utility } from '../../core/utility';
 
 const DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]';
@@ -6,25 +6,18 @@ const DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[
 const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
 
 const DATEPICKER_CONFIG = {
-  'datetime-local': {
-    enableTime: true,
-    altInput: true,
-    altFormat: 'j. F Y, H:i', // maybe interpolate these formats for locale
-    dateFormat: 'Y-m-dTH:i',
-    time_24hr: true,
+  'global': {
+    locale: 'de',
+    weekStart: 1,
+    stayOpen: true,
+    dateFormat: 'dd.mm.YYYY',
   },
+  'datetime-local': {},
   'date': {
-    altFormat: 'j. F Y',
-    dateFormat: 'Y-m-d',
-    altInput: true,
+    timeFormat: false,
   },
   'time': {
-    enableTime: true,
-    noCalendar: true,
-    altFormat: 'H:i',
-    dateFormat: 'H:i',
-    altInput: true,
-    time_24hr: true,
+    dateFormat: false,
   },
 };
 
@@ -33,9 +26,10 @@ const DATEPICKER_CONFIG = {
 })
 export class Datepicker {
 
-  flatpickrInstance;
+  datepickerInstance;
 
   constructor(element) {
+
     if (!element) {
       throw new Error('Datepicker utility needs to be passed an element!');
     }
@@ -44,19 +38,21 @@ export class Datepicker {
       return false;
     }
 
-    const flatpickrConfig = DATEPICKER_CONFIG[element.getAttribute('type')];
+    const datepickerGlobalConfig = DATEPICKER_CONFIG['global'];
+    const datepickerConfig = DATEPICKER_CONFIG[element.getAttribute('type')];
 
-    if (!flatpickrConfig) {
+    if (!datepickerConfig) {
       throw new Error('Datepicker utility called on unsupported element!');
     }
 
-    this.flatpickrInstance = flatpickr(element, flatpickrConfig);
+    // this.datepickerInstance = flatpickr(element, datepickerConfig);
+    this.datepickerInstance = datetime(element, { ...datepickerGlobalConfig, ...datepickerConfig });
 
     // mark initialized
     element.classList.add(DATEPICKER_INITIALIZED_CLASS);
   }
 
   destroy() {
-    this.flatpickrInstance.destroy();
+    this.datepickerInstance.destroy();
   }
 }

frontend/vendor/datetime.css

@@ -0,0 +1,740 @@
+@charset "UTF-8";
+/*
+ |  tail.datetime - The vanilla way to select dates and times!
+ |  @file       ./less/tail.datetime-default-green.less
+ |  @author     SamBrishes <sam@pytes.net>
+ |  @version    0.4.13 - Beta
+ |
+ |  @website    https://github.com/pytesNET/tail.DateTime
+ |  @license    X11 / MIT License
+ |  @copyright  Copyright © 2018 - 2019 SamBrishes, pytesNET <info@pytes.net>
+ */
+
+/* @start MAIN CALENDAR */
+.tail-datetime-calendar, .tail-datetime-calendar *, .tail-datetime-calendar *:before,
+.tail-datetime-calendar *:after{
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+.tail-datetime-calendar{
+    top: 0;
+    left: 0;
+    width: 275px;
+    height: auto;
+    margin: 15px;
+    padding: 0;
+    z-index: 3000;
+    display: block;
+    position: absolute;
+    visibility: hidden;
+    direction: ltr;
+    border-collapse: separate;
+    font-family: "Open Sans", Calibri, Arial, sans-serif;
+    background-color: white;
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-radius: 3px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125);
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125);
+}
+.tail-datetime-calendar:after{
+    clear: both;
+    content: "";
+    display: block;
+    font-size: 0;
+    visibility: hidden;
+}
+.tail-datetime-calendar.calendar-static{
+    top: auto;
+    left: auto;
+    margin-left: auto;
+    margin-right: auto;
+    position: static;
+    visibility: visible;
+}
+.tail-datetime-calendar button.calendar-close{
+    top: 100%;
+    right: 15px;
+    color: #303438;
+    width: 35px;
+    height: 25px;
+    margin: 1px 0 0 0;
+    padding: 5px 10px;
+    opacity: 0.5;
+    outline: none;
+    display: inline-block;
+    position: absolute;
+    font-size: 14px;
+    line-height: 1.125em;
+    text-shadow: none;
+    background-color: white;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
+                9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjMzAzNDM4IiBkP\
+                SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y\
+                NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg==");
+    background-repeat: no-repeat;
+    background-position: center center;
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-radius: 0 0 3px 3px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125);
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125);
+    transition: opacity 142ms linear;
+    -webkit-transition: opacity 142ms linear;
+}
+.tail-datetime-calendar button.calendar-close:hover{
+    opacity: 1;
+}
+/* @end MAIN CALENDAR */
+
+/* @start CALENDAR TOOLTIP */
+.tail-datetime-calendar .calendar-tooltip{
+    color: white;
+    width: auto;
+    margin: 0;
+    padding: 0;
+    display: block;
+    position: absolute;
+    background-color: #202428;
+    border-radius: 3px;
+}
+.tail-datetime-calendar .calendar-tooltip:before{
+    top: -7px;
+    left: 50%;
+    width: 0;
+    height: 0;
+    margin: 0 0 0 -6px;
+    content: "";
+    display: block;
+    position: absolute;
+    border-width: 0 7px 7px 7px;
+    border-style: solid;
+    border-color: transparent transparent #202428 transparent;
+}
+.tail-datetime-calendar .calendar-tooltip .tooltip-inner{
+    width: auto;
+    margin: 0;
+    padding: 4px 7px;
+    display: block;
+    font-size: 12px;
+    line-height: 14px;
+}
+/* @end CALENDAR TOOLTIP */
+
+/* @start CALENDAR ACTIONs */
+.tail-datetime-calendar .calendar-actions{
+    color: white;
+    width: 100%;
+    height: 36px;
+    margin: 0;
+    padding: 0;
+    display: table;
+    overflow: hidden;
+    border-spacing: 0;
+    border-collapse: separate;
+    background-color: #32B93C;
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-radius: 3px 3px 0 0;
+}
+.tail-datetime-calendar .calendar-actions span{
+    margin: 0;
+    padding: 0;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    line-height: 36px;
+    text-shadow: -1px -1px 0 #227d28;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+.tail-datetime-calendar .calendar-actions span[data-action]{
+    cursor: pointer;
+}
+.tail-datetime-calendar .calendar-actions span.action{
+    width: 36px;
+    font-size: 22px;
+}
+.tail-datetime-calendar .calendar-actions span.label{
+    width: auto;
+}
+.tail-datetime-calendar .calendar-actions span:first-child:before,
+.tail-datetime-calendar .calendar-actions span:last-child:before{
+    top: 5px;
+    bottom: 5px;
+    width: 1px;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    background-color: #27912f;
+}
+.tail-datetime-calendar .calendar-actions span:first-child:before{
+    right: -1px;
+}
+.tail-datetime-calendar .calendar-actions span:last-child:before{
+    left: -1px;
+}
+.tail-datetime-calendar .calendar-actions span:first-child:hover:before,
+.tail-datetime-calendar .calendar-actions span:last-child:hover:before{
+    display: none;
+}
+.tail-datetime-calendar .calendar-actions span[data-action]:hover{
+    background-color: #27912f;
+}
+.tail-datetime-calendar .calendar-actions span.action-prev{
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
+                9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iT\
+                TYgMkwwIDhsNiA2VjJ6Ii8+PC9zdmc+");
+}
+.tail-datetime-calendar .calendar-actions span.action-next{
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
+                9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iT\
+                TAgMTRsNi02LTYtNnYxMnoiLz48L3N2Zz4=");
+}
+.tail-datetime-calendar .calendar-actions span.action-submit{
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
+                9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\
+                SJNMTIgNWwtOCA4LTQtNCAxLjUtMS41TDQgMTBsNi41LTYuNUwxMiA1eiIvPjwvc3ZnPg==");
+}
+.tail-datetime-calendar .calendar-actions span.action-cancel{
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
+                9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\
+                SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y\
+                NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg==");
+}
+/* @end CALENDAR ACTIONs */
+
+/* @start CALENDAR DATEPICKER */
+.tail-datetime-calendar .calendar-datepicker{
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    display: block;
+    position: relative;
+}
+.tail-datetime-calendar .calendar-datepicker table{
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border-spacing: 0;
+    border-collapse: separate;
+}
+.tail-datetime-calendar .calendar-datepicker table tr th,
+.tail-datetime-calendar .calendar-datepicker table tr td{
+    color: #303438;
+    height: 30px;
+    padding: 0;
+    position: relative;
+    font-size: 13px;
+    text-align: center;
+    font-weight: normal;
+    text-shadow: none;
+    line-height: 30px;
+    background-color: transparent;
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-radius: 0px;
+}
+.tail-datetime-calendar .calendar-datepicker table tr th{
+    color: white;
+    background-color: #303438;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td{
+    cursor: pointer;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td span.inner{
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.date-disabled{
+    cursor: not-allowed;
+    color: #909498;
+    background-color: #F0F0F0;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.date-disabled:after{
+    left: 3px;
+    bottom: 3px;
+    width: 35px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    background-color: #bfbfbf;
+    transform-origin: 2px -5px;
+    transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.date-previous,
+.tail-datetime-calendar .calendar-datepicker table tr td.date-next{
+    color: #909498;
+    background-color: #F0F0F0;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.date-today:before,
+.tail-datetime-calendar .calendar-datepicker table tr td .tooltip-tick{
+    top: 5px;
+    width: 5px;
+    height: 5px;
+    margin: 0;
+    padding: 0;
+    z-index: 20;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-radius: 50%;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.date-today:before{
+    left: 5px;
+    background-color: #E67D1E;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td .tooltip-tick{
+    right: 5px;
+    background-color: #202428;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td .tooltip-tick:before,
+.tail-datetime-calendar .calendar-datepicker table tr td .tooltip-tick:after{
+    display: none;
+}
+.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day{
+    width: 14.28571429%;
+    height: 35px;
+}
+.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day span.inner{
+    width: 31px;
+    height: 31px;
+    line-height: 29px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    border-radius: 50%;
+}
+.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week:hover span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day:hover span.inner{
+    border-color: #cccccc;
+}
+.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week.date-disabled span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-disabled span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week.date-disabled:hover span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-disabled:hover span.inner{
+    border-color: transparent;
+}
+.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week.date-select span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week.date-select:hover span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select:hover span.inner{
+    color: #E67D1E;
+    border-color: #E67D1E;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade{
+    width: 33.33333333%;
+    height: 40px;
+    transition: color 142ms linear;
+    -webkit-transition: color 142ms linear;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month.date-today:before,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year.date-today:before,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade.date-today:before{
+    left: 50%;
+    margin-left: -2.5px;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner{
+    width: auto;
+    height: 31px;
+    line-height: 29px;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner:before,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner:before,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner:before,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner:after,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner:after,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner:after{
+    width: 20px;
+    height: 20px;
+    content: "";
+    z-index: 15;
+    display: inline-block;
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    transition: all 142ms linear;
+    -webkit-transition: all 142ms linear;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner:before,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner:before,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner:before{
+    top: 0;
+    left: 0;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month:hover span.inner:before,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year:hover span.inner:before,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade:hover span.inner:before{
+    top: 6px;
+    left: 6px;
+    border-top-color: #cccccc;
+    border-left-color: #cccccc;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner:after,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner:after,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner:after{
+    right: 0;
+    bottom: 0;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month:hover span.inner:after,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year:hover span.inner:after,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade:hover span.inner:after{
+    right: 6px;
+    bottom: 6px;
+    border-right-color: #cccccc;
+    border-bottom-color: #cccccc;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year,
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade{
+    width: 25%;
+}
+.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner{
+    height: 54px;
+    padding: 7px 15px;
+    text-align: left;
+    line-height: 20px;
+}
+/* @end CALENDAR DATEPICKER */
+
+/* @start CALENDAR TIMEPICKER */
+.tail-datetime-calendar .calendar-timepicker{
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    display: block;
+    text-align: center;
+    border-width: 1px 0 0 0;
+    border-style: solid;
+    border-color: #d9d9d9;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field{
+    width: 28%;
+    margin: 0;
+    padding: 15px 0 7px 0;
+    display: inline-block;
+    position: relative;
+    text-align: center;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field:first-of-type{
+    text-align: right;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field:last-of-type{
+    text-align: left;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]{
+    color: #303438;
+    width: 100%;
+    height: 29px;
+    margin: 0;
+    z-index: 4;
+    padding: 3px 20px 3px 5px;
+    outline: 0;
+    display: inline-block;
+    position: relative;
+    font-size: 12px;
+    text-align: center;
+    line-height: 23px;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    -webkit-appearance: textfield;
+    background-color: #F0F0F0;
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-radius: 3px;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    transition: color 142ms linear, border 142ms linear, background 142ms linear;
+    -webkit-transition: color 142ms linear, border 142ms linear, background 142ms linear;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]:hover{
+    color: #303438;
+    background-color: #E0E0E0;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]:focus{
+    color: white;
+    background-color: #E67D1E;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]:disabled{
+    cursor: not-allowed;
+    color: #A0A4A8;
+    background-color: #F6F6F6;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step{
+    min-width: 0px;
+    width: 20px;
+    height: 15px;
+    right: 0;
+    margin: 0;
+    padding: 0;
+    z-index: 15;
+    display: inline-block;
+    position: absolute;
+    background-color: #F0F0F0;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    transition: border 142ms linear, background 142ms linear;
+    -webkit-transition: border 142ms linear, background 142ms linear;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step:before{
+    top: 4px;
+    left: 50%;
+    width: 0;
+    height: 0;
+    margin: 0 0 0 -4px;
+    padding: 0;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    transition: border 142ms linear;
+    -webkit-transition: border 142ms linear;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-up{
+    top: 15px;
+    border-width: 0 0 1px 1px;
+    border-style: solid;
+    border-color: white;
+    border-radius: 0 2px 0 0;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-up:hover{
+    background-color: #E0E0E0;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-up:before{
+    border-width: 0 4px 5px 4px;
+    border-style: solid;
+    border-color: transparent transparent #303438 transparent;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-down{
+    top: 29px;
+    border-width: 1px 0 0 1px;
+    border-style: solid;
+    border-color: white;
+    border-radius: 0 0 2px 0;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-down:hover{
+    background-color: #E0E0E0;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-down:before{
+    border-width: 5px 4px 0 4px;
+    border-style: solid;
+    border-color: #303438 transparent transparent transparent;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button.step-up{
+    border-color: rgba(255, 255, 255, 0.8);
+    background-color: #E67D1E;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button.step-up:hover{
+    background-color: #bc6415;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button.step-up:before{
+    border-bottom-color: white;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button + button.step-down{
+    border-color: rgba(255, 255, 255, 0.8);
+    background-color: #E67D1E;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button + button.step-down:hover{
+    background-color: #bc6415;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button + button.step-down:before{
+    border-top-color: white;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button.step-up{
+    cursor: not-allowed;
+    border-color: rgba(255, 255, 255, 0.8);
+    background-color: #F6F6F6;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button.step-up:hover{
+    background-color: #F6F6F6;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button.step-up:before{
+    border-bottom-color: #A0A4A8;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button + button.step-down{
+    cursor: not-allowed;
+    border-color: rgba(255, 255, 255, 0.8);
+    background-color: #F6F6F6;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button + button.step-down:hover{
+    background-color: #F6F6F6;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button + button.step-down:before{
+    border-top-color: #A0A4A8;
+}
+.tail-datetime-calendar .calendar-timepicker .timepicker-field label{
+    color: #303438;
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-size: 12px;
+    text-align: center;
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch{
+    cursor: pointer;
+    margin: 15px 0 -5px 0;
+    display: block;
+    text-align: center;
+    vertical-align: top;
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch:before,
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch:after{
+    width: auto;
+    margin: 0;
+    padding: 0 5px;
+    font-size: 12px;
+    line-height: 16px;
+    vertical-align: top;
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch:before{
+    content: attr(data-am);
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch:after{
+    content: attr(data-pm);
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"]{
+    display: none;
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"] + span{
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"] + span:before{
+    width: 50px;
+    height: 16px;
+    content: "";
+    display: inline-block;
+    vertical-align: top;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #32B93C;
+    border-radius: 14px;
+    transition: border 284ms linear;
+    -webkit-transition: border 284ms linear;
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"] + span:after{
+    top: 3px;
+    left: 4px;
+    right: 30px;
+    width: auto;
+    height: 10px;
+    margin: 0;
+    padding: 0;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    background-color: #32B93C;
+    border-radius: 15px;
+    vertical-align: top;
+    transition: left 284ms linear, right 284ms linear 284ms, background 284ms linear;
+    -webkit-transition: left 284ms linear, right 284ms linear 284ms, background 284ms linear;
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"]:checked + span:before{
+    border-color: #E67D1E;
+}
+.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"]:checked + span:after{
+    left: 30px;
+    right: 4px;
+    background-color: #E67D1E;
+    transition: right 284ms linear, left 284ms linear 284ms, background 284ms linear;
+    -webkit-transition: right 284ms linear, left 284ms linear 284ms, background 284ms linear;
+}
+.tail-datetime-calendar .calendar-actions + .calendar-timepicker{
+    border-width: 0;
+}
+/* @end CALENDAR TIMEPICKER */
+
+/* @start RTL */
+.tail-datetime-calendar.rtl{
+    direction: rtl;
+}
+.tail-datetime-calendar.rtl .calendar-actions span.action-next,
+.tail-datetime-calendar.rtl .calendar-actions span.action-prev{
+    transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+}
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.date-disabled:after{
+    right: 3px;
+    transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+}
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.date-today:before{
+    right: 5px;
+}
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td .tooltip-tick{
+    left: 5px;
+}
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-month.date-today:before,
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-year.date-today:before,
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade.date-today:before{
+    right: 50%;
+    margin-right: -2.5px;
+}
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-month:hover span.inner:before,
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-year:hover span.inner:before,
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade:hover span.inner:before{
+    right: 6px;
+    border-right-color: #cccccc;
+}
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-month span.inner:after,
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-year span.inner:after,
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade span.inner:after{
+    left: 0;
+}
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-month:hover span.inner:after,
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-year:hover span.inner:after,
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade:hover span.inner:after{
+    left: 6px;
+    border-left-color: #cccccc;
+}
+.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade span.inner{
+    text-align: right;
+}
+.tail-datetime-calendar.rtl .calendar-timepicker .timepicker-field:first-child{
+    text-align: left;
+    padding-left: 0;
+    padding-right: 25px;
+}
+.tail-datetime-calendar.rtl .calendar-timepicker .timepicker-field:last-child{
+    text-align: right;
+    padding-left: 25px;
+    padding-right: 0;
+}
+.tail-datetime-calendar.rtl .calendar-timepicker .timepicker-field:first-child input[type="text"]{
+    margin-left: -1px;
+    margin-right: 0;
+    border-radius: 0 3px 3px 0;
+}
+.tail-datetime-calendar.rtl .calendar-timepicker .timepicker-field:last-child input[type="text"]{
+    margin-left: 0;
+    margin-right: -1px;
+    border-radius: 3px 0 0 3px;
+}
+/* @end RTL */
+
+/*# sourceMappingURL=tail.datetime-default-green.map */

frontend/vendor/main.js

@@ -1,2 +1,3 @@
 import './fontawesome.css';
-import './flatpickr.css';
+// import './flatpickr.css';
+import './datetime.css';

package.json

@@ -90,6 +90,7 @@
   },
   "dependencies": {
     "flatpickr": "^4.5.7",
-    "npm": "^6.9.2"
+    "npm": "^6.9.2",
+    "tail.datetime": "^0.4.13"
   }
 }