vueless 0.0.1

package/library.vue-tailwind-3/TDatepicker/index.js

@@ -0,0 +1,1051 @@
+import { h } from "vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+
+import TDropdown from "../t-dropdown";
+import {
+  buildDateParser,
+  buildDateFormatter,
+  compareDates,
+  addDays,
+  addMonths,
+  addYears,
+  dayIsPartOfTheConditions,
+  dateIsOutOfRange,
+  isSameDay,
+  extractLocaleFromProps,
+} from "../services/date.service";
+import HtmlInput from "../base/HtmlInput";
+import { English } from "../l10n/default";
+import TDatepickerTrigger from "./components/t-date-trigger";
+import TDatepickerViews from "./components/t-datepicker-views";
+import TDatepickerTimeSelector from "./components/t-datepicker-time-selector";
+import VueTailwindService from "../services/vueTailwind.service";
+
+const { isNumeric } = VueTailwindService;
+
+var CalendarView;
+
+(function (CalendarView) {
+  CalendarView["Day"] = "day";
+  CalendarView["Month"] = "month";
+  CalendarView["Year"] = "year";
+})(CalendarView || (CalendarView = {}));
+
+var Key;
+
+(function (Key) {
+  Key[(Key["LEFT"] = 37)] = "LEFT";
+  Key[(Key["UP"] = 38)] = "UP";
+  Key[(Key["RIGHT"] = 39)] = "RIGHT";
+  Key[(Key["DOWN"] = 40)] = "DOWN";
+  Key[(Key["ENTER"] = 13)] = "ENTER";
+  Key[(Key["ESC"] = 27)] = "ESC";
+  Key[(Key["SPACE"] = 32)] = "SPACE";
+  Key[(Key["BACKSPACE"] = 8)] = "BACKSPACE";
+})(Key || (Key = {}));
+
+const getInitialActiveDate = (localValue, initialDate, dateFormat, parse, amPm, initialTime) => {
+  if (Array.isArray(localValue) && localValue.length) {
+    return localValue[localValue.length - 1];
+  }
+
+  if (localValue instanceof Date) {
+    return localValue;
+  }
+
+  const activeDate = parse(initialDate, dateFormat) || new Date();
+
+  if (initialTime) {
+    const parsedDateWithTime = parse(initialTime, amPm ? "G:i:S K" : "H:i:S");
+
+    if (parsedDateWithTime) {
+      activeDate.setHours(parsedDateWithTime.getHours());
+      activeDate.setMinutes(parsedDateWithTime.getMinutes());
+      activeDate.setSeconds(parsedDateWithTime.getSeconds());
+    }
+  }
+
+  return activeDate;
+};
+
+const TDatepicker = {
+  name: "TDatepicker",
+  mixins: [HtmlInput],
+  emits: [
+    "shown",
+    "hidden",
+    "keydown",
+    "blur",
+    "focus",
+    "user-date-changed",
+    "change",
+    "input",
+    "active-change",
+    "update:show",
+    "update:modelValue",
+  ],
+  props: {
+    modelValue: {
+      type: [Date, String, Number, Array],
+      default: null,
+    },
+    value: {
+      type: [Date, String, Number, Array],
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: undefined,
+    },
+    inputName: {
+      type: String,
+      default: undefined,
+    },
+    weekStart: {
+      type: Number,
+      default: 0,
+    },
+    monthsPerView: {
+      type: Number,
+      default: 1,
+      validator(value) {
+        return value >= 1;
+      },
+    },
+    lang: {
+      type: String,
+      default: "en",
+    },
+    locale: {
+      type: Object,
+      default: () => English,
+    },
+    locales: {
+      type: Object,
+      default: () => ({}),
+    },
+    dateFormat: {
+      type: String,
+      default: "Y-m-d",
+    },
+    userFormat: {
+      type: String,
+      default: "F j, Y",
+    },
+    dateFormatter: {
+      type: Function,
+      default: undefined,
+    },
+    dateParser: {
+      type: Function,
+      default: undefined,
+    },
+    closeOnSelect: {
+      type: Boolean,
+      default: true,
+    },
+    showDaysForOtherMonth: {
+      type: Boolean,
+      default: true,
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    initialView: {
+      type: String,
+      default: CalendarView.Day,
+      validator(value) {
+        return [CalendarView.Day, CalendarView.Month, CalendarView.Year].includes(value);
+      },
+    },
+    yearsPerView: {
+      type: Number,
+      default: 12,
+    },
+    disabledDates: {
+      type: [Date, Array, Function, String],
+      default: undefined,
+    },
+    highlightDates: {
+      type: [Date, Array, Function, String],
+      default: undefined,
+    },
+    maxDate: {
+      type: [Date, String],
+      default: undefined,
+    },
+    minDate: {
+      type: [Date, String],
+      default: undefined,
+    },
+    initialDate: {
+      type: [Date, String],
+      default: undefined,
+    },
+    initialTime: {
+      type: String,
+      default: undefined,
+    },
+    conjunction: {
+      type: String,
+      default: ",",
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    range: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    datepicker: {
+      type: Boolean,
+      default: true,
+    },
+    timepicker: {
+      type: Boolean,
+      default: false,
+    },
+    amPm: {
+      type: Boolean,
+      default: false,
+    },
+    showSeconds: {
+      type: Boolean,
+      default: false,
+    },
+    dataCy: {
+      type: String,
+      default: "",
+    },
+    classes: {
+      type: Object,
+      default: () => ({
+        wrapper: "flex flex-col",
+        dropdownWrapper: "relative z-10",
+
+        // Dropdown related classes
+        dropdown: "origin-top-left absolute rounded shadow bg-white overflow-hidden mt-1",
+        enterFromClass: "opacity-0 scale-95",
+        enterActiveClass: "transition transform ease-out duration-100",
+        enterToClass: "opacity-100 scale-100",
+        leaveFrom: "opacity-100 scale-100",
+        leaveActiveClass: "transition transform ease-in duration-75",
+        leaveToClass: "opacity-0 scale-95",
+
+        // Wrapper for inline calendar
+        inlineWrapper: "",
+        inlineViews: "rounded bg-white border mt-1 inline-flex flex-col",
+
+        // Text input related classes
+        inputWrapper: "",
+        input: `block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out
+          bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 
+          focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50
+          disabled:cursor-not-allowed`,
+        clearButton: "hover:bg-gray-100 rounded transition duration-100 ease-in-out text-gray-600",
+        clearButtonIcon: "",
+
+        // Picker views
+        viewGroup: "",
+        view: "",
+
+        // Navigator
+        navigator: "pt-2 px-3",
+        navigatorViewButton: `transition ease-in-out duration-100 inline-flex cursor-pointer
+         rounded-full px-2 py-1 -ml-1 hover:bg-gray-100`,
+        navigatorViewButtonIcon: "fill-current text-gray-400",
+        navigatorViewButtonBackIcon: "fill-current text-gray-400",
+        navigatorViewButtonMonth: "text-gray-700 font-semibold",
+        navigatorViewButtonYear: "text-gray-500 ml-1",
+        navigatorViewButtonYearRange: "text-gray-500 ml-1",
+        navigatorLabel: "py-1",
+        navigatorLabelMonth: "text-gray-700 font-semibold",
+        navigatorLabelYear: "text-gray-500 ml-1",
+        navigatorPrevButton: `transition ease-in-out duration-100 inline-flex cursor-pointer 
+          hover:bg-gray-100 rounded-full p-1 ml-2 ml-auto disabled:opacity-50 disabled:cursor-not-allowed`,
+        navigatorNextButton: `transition ease-in-out duration-100 inline-flex cursor-pointer 
+          hover:bg-gray-100 rounded-full p-1 -mr-1 disabled:opacity-50 disabled:cursor-not-allowed`,
+        navigatorPrevButtonIcon: "text-gray-400",
+        navigatorNextButtonIcon: "text-gray-400",
+
+        // Calendar View
+        calendarWrapper: "px-3 py-2",
+        calendarHeaderWrapper: "",
+        calendarHeaderWeekDay:
+          "uppercase text-xs text-gray-500 w-8 h-8 flex items-center justify-center",
+        calendarDaysWrapper: "",
+        calendarDaysDayWrapper: "w-full h-8 flex flex-shrink-0 items-center",
+
+        // Day item
+        otherMonthDay: `text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 text-gray-400 
+          disabled:opacity-50 disabled:cursor-not-allowed`,
+        emptyDay: "",
+        inRangeFirstDay: "text-sm bg-blue-500 text-white w-full h-8 rounded-l-full",
+        inRangeLastDay: "text-sm bg-blue-500 text-white w-full h-8 rounded-r-full",
+        inRangeDay:
+          "text-sm bg-blue-200 w-full h-8 disabled:opacity-50 disabled:cursor-not-allowed",
+        selectedDay:
+          "text-sm rounded-full w-8 h-8 mx-auto bg-blue-500 text-white disabled:opacity-50 disabled:cursor-not-allowed",
+        activeDay:
+          "text-sm rounded-full bg-blue-100 w-8 h-8 mx-auto disabled:opacity-50 disabled:cursor-not-allowed",
+        highlightedDay:
+          "text-sm rounded-full bg-blue-200 w-8 h-8 mx-auto disabled:opacity-50 disabled:cursor-not-allowed",
+        day: "text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed",
+        today: `text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed 
+          border border-blue-500`,
+
+        // Months View
+        monthWrapper: "px-3 py-2",
+        selectedMonth: "text-sm rounded w-full h-12 mx-auto bg-blue-500 text-white",
+        activeMonth: "text-sm rounded w-full h-12 mx-auto bg-blue-100",
+        month: "text-sm rounded w-full h-12 mx-auto hover:bg-blue-100",
+
+        // Years View
+        yearWrapper: "px-3 py-2",
+        year: "text-sm rounded w-full h-12 mx-auto hover:bg-blue-100",
+        selectedYear: "text-sm rounded w-full h-12 mx-auto bg-blue-500 text-white",
+        activeYear: "text-sm rounded w-full h-12 mx-auto bg-blue-100",
+
+        // Time selector
+        timepickerWrapper: "flex items-center px-4 py-2 space-x-2",
+        timepickerTimeWrapper: "flex items-center space-x-2",
+        timepickerTimeFieldsWrapper: `bg-gray-100 rounded-md w-full text-right flex items-center 
+          border border-gray-100 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none
+           focus:ring-opacity-50`,
+        timepickerOkButton: `text-blue-600 text-sm uppercase font-semibold transition duration-100 ease-in-out 
+          border border-transparentfocus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none
+          focus:ring-opacity-50 rounded cursor-pointer`,
+        timepickerInput: `text-center w-8 border-transparent bg-transparent p-0 h-6 text-sm transition duration-100
+           ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 
+          focus:outline-none focus:ring-opacity-50 rounded`,
+        timepickerTimeLabel: "flex-grow text-sm text-gray-500",
+        timepickerAmPmWrapper: `relative inline-flex flex-shrink-0 transition duration-200 ease-in-out bg-gray-100
+           border border-transparent rounded cursor-pointer focus:border-blue-500 focus:ring-2 focus:ring-blue-500 
+           focus:outline-none focus:ring-opacity-50`,
+        timepickerAmPmWrapperChecked: `relative inline-flex flex-shrink-0 transition duration-200 ease-in-out 
+          bg-gray-100 border border-transparent rounded cursor-pointer focus:border-blue-500 focus:ring-2 
+          focus:ring-blue-500 focus:outline-none focus:ring-opacity-50`,
+        timepickerAmPmWrapperDisabled:
+          "relative inline-flex flex-shrink-0 transition duration-200 ease-in-out opacity-50 cursor-not-allowed",
+        timepickerAmPmWrapperCheckedDisabled:
+          "relative inline-flex flex-shrink-0 transition duration-200 ease-in-out opacity-50 cursor-not-allowed",
+        timepickerAmPmButton: `absolute flex items-center justify-center w-6 h-6 text-xs text-gray-800
+          transition duration-200 ease-in-out transform translate-x-0 bg-white rounded shadow`,
+        timepickerAmPmButtonChecked: `absolute flex items-center justify-center w-6 h-6 text-xs text-gray-800 
+          transition duration-200 ease-in-out transform translate-x-full bg-white rounded shadow`,
+        timepickerAmPmCheckedPlaceholder:
+          "flex items-center justify-center w-6 h-6 text-xs text-gray-500 rounded-sm",
+        timepickerAmPmUncheckedPlaceholder:
+          "flex items-center justify-center w-6 h-6 text-xs text-gray-500 rounded-sm",
+      }),
+    },
+    fixedClasses: {
+      type: Object,
+      default: () => ({
+        navigator: "flex",
+        navigatorViewButton: "flex items-center",
+        navigatorViewButtonIcon: "flex-shrink-0 h-5 w-5",
+        navigatorViewButtonBackIcon: "flex-shrink-0 h-5 w-5",
+        navigatorLabel: "flex items-center py-1",
+        navigatorPrevButtonIcon: "h-6 w-6 inline-flex",
+        navigatorNextButtonIcon: "h-6 w-6 inline-flex",
+
+        inputWrapper: "relative",
+        viewGroup: "inline-flex flex-wrap",
+        view: "w-64",
+        calendarDaysWrapper: "grid grid-cols-7",
+        calendarHeaderWrapper: "grid grid-cols-7",
+        monthWrapper: "grid grid-cols-4",
+        yearWrapper: "grid grid-cols-4",
+
+        clearButton:
+          "flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6",
+        clearButtonIcon: "fill-current h-3 w-3",
+      }),
+    },
+  },
+
+  data() {
+    const currentLocale = extractLocaleFromProps(this.lang, this.locales, this.locale);
+    const dateFormatter = this.dateFormatter;
+    const parse = buildDateParser(currentLocale, this.dateParser);
+    const format = buildDateFormatter(currentLocale, dateFormatter);
+    // Keep a native formatter for the different views
+    const formatNative = !dateFormatter ? format : buildDateFormatter(currentLocale);
+
+    let localValue = this.multiple || this.range ? [] : null;
+
+    if (this.modelValue) {
+      if (Array.isArray(this.modelValue)) {
+        localValue = this.modelValue
+          .map((value) => parse(value, this.dateFormat) || null)
+          .filter((value) => !!value);
+      } else {
+        localValue = parse(this.modelValue, this.dateFormat) || localValue;
+      }
+    } else {
+      if (Array.isArray(this.value)) {
+        localValue = this.value
+          .map((value) => parse(value, this.dateFormat) || null)
+          .filter((value) => !!value);
+      } else {
+        localValue = parse(this.value, this.dateFormat) || localValue;
+      }
+    }
+
+    const formatedDate = Array.isArray(localValue)
+      ? localValue.map((d) => format(d, this.dateFormat))
+      : format(localValue, this.dateFormat);
+
+    const userFormatedDate = Array.isArray(localValue)
+      ? localValue.map((d) => format(d, this.userFormat))
+      : format(localValue, this.userFormat);
+
+    const activeDate = getInitialActiveDate(
+      localValue,
+      this.initialDate,
+      this.dateFormat,
+      parse,
+      this.amPm,
+      this.initialTime,
+    );
+
+    // Used to show the selected month/year
+    const currentView = this.initialView;
+
+    let dateWithoutTime = null;
+
+    if (this.timepicker) {
+      dateWithoutTime = Array.isArray(localValue) ? localValue[0] : localValue;
+    }
+
+    return {
+      localValue,
+      formatedDate,
+      userFormatedDate,
+      activeDate,
+      shown: this.show,
+      showActiveDate: false,
+      currentView,
+      parse,
+      format,
+      formatNative,
+      currentLocale,
+      hasFocus: false,
+      dateWithoutTime,
+      timeWithoutDate: null,
+    };
+  },
+
+  computed: {
+    visibleRange() {
+      const start = new Date(this.activeDate.valueOf());
+      const end = new Date(this.activeDate.valueOf());
+
+      start.setDate(1);
+      end.setMonth(end.getMonth() + this.monthsPerView, 0);
+
+      return [start, end];
+    },
+    latestDate() {
+      if (Array.isArray(this.localValue)) {
+        if (this.localValue.length) {
+          return this.localValue[this.localValue.length - 1] || null;
+        }
+
+        return null;
+      }
+
+      return this.localValue;
+    },
+    currentValueIsInTheView() {
+      // eslint-disable-next-line no-restricted-globals
+      if (this.latestDate) {
+        const [start, end] = this.visibleRange;
+
+        return compareDates(end, this.latestDate) >= 0 && compareDates(this.latestDate, start) >= 0;
+      }
+
+      return true;
+    },
+  },
+
+  watch: {
+    shown(shown) {
+      this.$emit("update:show", shown);
+    },
+    activeDate(activeDate) {
+      this.$emit("active-change", activeDate);
+    },
+    formatedDate(formatedDate) {
+      this.$emit("update:modelValue", formatedDate);
+      this.$emit("input", formatedDate);
+      this.$emit("change", formatedDate);
+    },
+    userFormatedDate(userFormatedDate) {
+      this.$emit("user-date-changed", userFormatedDate);
+    },
+    localValue(localValue) {
+      if (this.monthsPerView === 1 || !this.currentValueIsInTheView) {
+        this.resetActiveDate(localValue);
+      }
+
+      this.refreshFormattedDate();
+    },
+    value(value) {
+      if (Array.isArray(value)) {
+        const localValue = value
+          .map((v) => this.parse(v, this.dateFormat) || null)
+          .filter((v) => !!v);
+
+        if (!isEqual(localValue, this.localValue)) {
+          this.localValue = localValue;
+        }
+      } else {
+        this.localValue =
+          this.parse(value, this.dateFormat) || (this.multiple || this.range ? [] : null);
+      }
+    },
+    modelValue(value) {
+      if (Array.isArray(value)) {
+        const localValue = value
+          .map((v) => this.parse(v, this.dateFormat) || null)
+          .filter((v) => !!v);
+
+        if (!isEqual(localValue, this.localValue)) {
+          this.localValue = localValue;
+        }
+      } else {
+        this.localValue =
+          this.parse(value, this.dateFormat) || (this.multiple || this.range ? [] : null);
+      }
+    },
+    dateParser() {
+      this.refreshParser();
+    },
+    dateFormatter() {
+      this.refreshFormatter();
+    },
+    lang() {
+      this.refreshCurrentLocale();
+    },
+    locale() {
+      this.refreshCurrentLocale();
+    },
+    locales: {
+      handler() {
+        this.refreshCurrentLocale();
+      },
+      deep: true,
+    },
+  },
+
+  methods: {
+    refreshFormattedDate() {
+      const formatedDate = Array.isArray(this.localValue)
+        ? this.localValue.map((d) => this.format(d, this.dateFormat))
+        : this.format(this.localValue, this.dateFormat);
+
+      const userFormatedDate = Array.isArray(this.localValue)
+        ? this.localValue.map((d) => this.format(d, this.userFormat))
+        : this.format(this.localValue, this.userFormat);
+
+      this.formatedDate = formatedDate;
+      this.userFormatedDate = userFormatedDate;
+    },
+    refreshCurrentLocale() {
+      this.currentLocale = extractLocaleFromProps(this.lang, this.locales, this.locale);
+      this.refreshParser();
+      this.refreshFormatter();
+      this.refreshFormattedDate();
+    },
+    refreshParser() {
+      const parse = buildDateParser(this.currentLocale, this.dateParser);
+
+      this.parse = parse;
+    },
+    refreshFormatter() {
+      const dateFormatter = this.dateFormatter;
+      const format = buildDateFormatter(this.currentLocale, dateFormatter);
+      // Keep a native formatter for the different views
+      const formatNative = !dateFormatter ? format : buildDateFormatter(this.currentLocale);
+
+      this.format = format;
+      this.formatNative = formatNative;
+    },
+    focus(options) {
+      const wrapper = this.$el;
+      const input = wrapper.querySelector("input[type=text]");
+
+      if (!input) {
+        throw new Error("Input not found");
+      }
+
+      input.focus(options);
+    },
+    doHide() {
+      const dropdown = this.getDropdown();
+
+      if (dropdown) {
+        dropdown.doHide();
+      }
+    },
+    doShow() {
+      const dropdown = this.getDropdown();
+
+      if (dropdown) {
+        dropdown.doShow();
+      }
+    },
+    toggle() {
+      const dropdown = this.getDropdown();
+
+      if (dropdown) {
+        dropdown.doToggle();
+      }
+    },
+    arrowKeyHandler(e) {
+      e.preventDefault();
+
+      this.showActiveDate = true;
+
+      if (!this.inline && !this.shown) {
+        this.doShow();
+
+        return;
+      }
+
+      let newActiveDate;
+
+      if (this.currentView === CalendarView.Day) {
+        if (e.keyCode === Key.DOWN) {
+          newActiveDate = addDays(this.activeDate, 7);
+        } else if (e.keyCode === Key.LEFT) {
+          newActiveDate = addDays(this.activeDate, -1);
+        } else if (e.keyCode === Key.UP) {
+          newActiveDate = addDays(this.activeDate, -7);
+        } else if (e.keyCode === Key.RIGHT) {
+          newActiveDate = addDays(this.activeDate, 1);
+        }
+      } else if (this.currentView === CalendarView.Month) {
+        if (e.keyCode === Key.DOWN) {
+          newActiveDate = addMonths(this.activeDate, 4);
+        } else if (e.keyCode === Key.LEFT) {
+          newActiveDate = addMonths(this.activeDate, -1);
+        } else if (e.keyCode === Key.UP) {
+          newActiveDate = addMonths(this.activeDate, -4);
+        } else if (e.keyCode === Key.RIGHT) {
+          newActiveDate = addMonths(this.activeDate, 1);
+        }
+      } else if (this.currentView === CalendarView.Year) {
+        if (e.keyCode === Key.DOWN) {
+          newActiveDate = addYears(this.activeDate, 4);
+        } else if (e.keyCode === Key.LEFT) {
+          newActiveDate = addYears(this.activeDate, -1);
+        } else if (e.keyCode === Key.UP) {
+          newActiveDate = addYears(this.activeDate, -4);
+        } else if (e.keyCode === Key.RIGHT) {
+          newActiveDate = addYears(this.activeDate, 1);
+        }
+      }
+
+      if (
+        newActiveDate &&
+        !dateIsOutOfRange(newActiveDate, this.minDate, this.maxDate, this.parse, this.dateFormat)
+      ) {
+        this.activeDate = newActiveDate;
+      }
+    },
+    focusTimePicker() {
+      this.$refs.timePicker.focus();
+    },
+    inputDateHandler(date) {
+      this.dateWithoutTime = date;
+
+      this.dateTimeInputHandler();
+    },
+    inputTimeHandler(date) {
+      this.timeWithoutDate = date;
+
+      if (this.datepicker) {
+        this.dateTimeInputHandler();
+      } else {
+        this.inputHandler(date);
+      }
+    },
+    dateTimeInputHandler() {
+      if (this.dateWithoutTime === null || this.timeWithoutDate === null) {
+        if (this.timeWithoutDate === null) {
+          this.focusTimePicker();
+        } else if (this.dateWithoutTime === null) {
+          this.focus();
+        }
+
+        return;
+      }
+
+      const { dateWithoutTime, timeWithoutDate } = this;
+
+      const dateTime = new Date(
+        dateWithoutTime.getFullYear(),
+        dateWithoutTime.getMonth(),
+        dateWithoutTime.getDate(),
+        timeWithoutDate.getHours(),
+        timeWithoutDate.getMinutes(),
+        timeWithoutDate.getSeconds(),
+      );
+
+      this.inputHandler(dateTime);
+    },
+    inputHandler(newDate) {
+      const date = new Date(newDate.valueOf());
+      const disabledDates = this.disabledDates;
+
+      if (
+        dayIsPartOfTheConditions(date, disabledDates, this.parse, this.dateFormat) ||
+        dateIsOutOfRange(date, this.minDate, this.maxDate, this.parse, this.dateFormat)
+      ) {
+        return;
+      }
+
+      if (this.range) {
+        let range = [];
+
+        // Reset the range when
+        // 1. Is not an array
+        // 2. The range already have both values
+        // 3. The range has the first value and the second value is before
+        if (
+          !this.localValue ||
+          !Array.isArray(this.localValue) ||
+          (Array.isArray(this.localValue) &&
+            (this.localValue.length === 0 || this.localValue.length === 2)) ||
+          (Array.isArray(this.localValue) &&
+            this.localValue.length === 1 &&
+            this.localValue[0] &&
+            this.localValue[0].getTime() > date.getTime())
+        ) {
+          range = [date];
+        } else if (this.localValue.length === 1) {
+          range = [this.localValue[0], date];
+        }
+
+        this.localValue = range;
+
+        // Range is complete
+        if (!this.inline && this.localValue.length === 2 && this.closeOnSelect) {
+          this.doHide();
+        }
+      } else if (Array.isArray(this.localValue)) {
+        const index = this.localValue.findIndex((d) => isSameDay(d, date));
+
+        if (index >= 0) {
+          this.localValue.splice(index, 1);
+        } else {
+          this.localValue.push(date);
+        }
+      } else {
+        this.focus();
+        this.localValue = date;
+      }
+
+      if (!this.inline && this.closeOnSelect && !Array.isArray(this.localValue)) {
+        this.doHide();
+      }
+    },
+    inputActiveDateHandler(newDate) {
+      this.activeDate = new Date(newDate.valueOf());
+    },
+    setView(newView) {
+      this.currentView = newView;
+      this.focus();
+    },
+    resetView() {
+      if (this.currentView === CalendarView.Month) {
+        this.setView(CalendarView.Day);
+      } else if (this.currentView === CalendarView.Year) {
+        this.setView(CalendarView.Month);
+      } else {
+        this.setView(CalendarView.Day);
+      }
+    },
+    enterHandler(e) {
+      e.preventDefault();
+
+      if (!this.inline && !this.shown) {
+        this.doShow();
+      } else if (this.showActiveDate) {
+        if (this.currentView === CalendarView.Day) {
+          if (this.timepicker) {
+            this.inputDateHandler(new Date(this.activeDate.valueOf()));
+          } else {
+            this.inputHandler(new Date(this.activeDate.valueOf()));
+          }
+        } else {
+          this.resetView();
+        }
+      }
+    },
+    escapeHandler(e) {
+      e.preventDefault();
+
+      const dropdown = this.getDropdown();
+
+      if (dropdown) {
+        dropdown.escapeHandler(e);
+      }
+    },
+    spaceHandler(e) {
+      e.preventDefault();
+
+      this.toggle();
+    },
+    getDropdown() {
+      return this.$refs.dropdown;
+    },
+    resetInitialState() {
+      this.shown = false;
+      this.currentView = this.initialView;
+      this.showActiveDate = false;
+
+      if (this.timepicker) {
+        this.dateWithoutTime = Array.isArray(this.localValue)
+          ? this.localValue[0]
+          : this.localValue;
+      } else {
+        this.dateWithoutTime = null;
+      }
+
+      this.timeWithoutDate = null;
+
+      this.resetActiveDate(this.localValue);
+    },
+    resetActiveDate(localValue) {
+      this.activeDate = getInitialActiveDate(
+        localValue,
+        this.initialDate,
+        this.dateFormat,
+        this.parse,
+        this.amPm,
+        this.initialTime,
+      );
+    },
+    clearHandler() {
+      if (this.multiple || this.range) {
+        this.localValue = [];
+      } else {
+        this.localValue = null;
+      }
+
+      this.resetActiveDate(this.localValue);
+    },
+    focusHandler(e) {
+      this.hasFocus = true;
+      this.$emit("focus", e);
+    },
+    blurHandler(e) {
+      this.hasFocus = false;
+      this.$emit("blur", e);
+    },
+    hideIfFocusOutside(e) {
+      const dropdown = this.getDropdown();
+
+      if (dropdown) {
+        dropdown.hideIfFocusOutside(e);
+      }
+    },
+  },
+
+  render() {
+    const views = [];
+
+    if (this.datepicker) {
+      views.push(
+        h(
+          TDatepickerViews,
+          {
+            ref: "views",
+            value: this.localValue,
+            activeDate: this.activeDate,
+            weekStart: this.weekStart,
+            monthsPerView: this.monthsPerView,
+            lang: this.lang,
+            locale: this.currentLocale,
+            getElementCssClass: this.getElementCssClass,
+            parse: this.parse,
+            format: this.format,
+            formatNative: this.formatNative,
+            dateFormat: this.dateFormat,
+            userFormat: this.userFormat,
+            initialView: this.initialView,
+            currentView: this.currentView,
+            yearsPerView: this.yearsPerView,
+            showActiveDate: this.showActiveDate,
+            disabledDates: this.disabledDates,
+            highlightDates: this.highlightDates,
+            minDate: this.minDate,
+            maxDate: this.maxDate,
+            range: this.range,
+            showDaysForOtherMonth: this.showDaysForOtherMonth,
+            datepicker: this.datepicker,
+            timepicker: this.timepicker,
+            dateWithoutTime: this.dateWithoutTime,
+            dataCy: this.dataCy,
+            onInput: this.inputHandler,
+            "onInput-date": this.inputDateHandler,
+            "onInput-time": this.inputTimeHandler,
+            "onInput-active-date": this.inputActiveDateHandler,
+            "onUpdate-view": this.setView,
+            "onReset-view": this.resetView,
+            "onReset-focus": this.focus,
+          },
+          {
+            ...this.$slots,
+          },
+        ),
+      );
+    }
+
+    if (this.timepicker && this.currentView === CalendarView.Day) {
+      views.push(
+        h(TDatepickerTimeSelector, {
+          ref: "timePicker",
+          parse: this.parse,
+          format: this.format,
+          amPm: this.amPm,
+          showSeconds: this.showSeconds,
+          activeDate: this.activeDate,
+          locale: this.currentLocale,
+          getElementCssClass: this.getElementCssClass,
+          onInput: this.inputActiveDateHandler,
+          onSubmit: this.inputTimeHandler,
+          onBlur: this.hideIfFocusOutside,
+        }),
+      );
+    }
+
+    const triggerSettings = {
+      ref: "trigger",
+      id: this.id,
+      name: this.name,
+      inputName: this.inputName,
+      disabled: this.disabled,
+      readonly: this.readonly,
+      autofocus: this.autofocus,
+      required: this.required,
+      placeholder: this.placeholder,
+      tabindex: this.tabindex,
+      userFormatedDate: this.userFormatedDate,
+      formatedDate: this.formatedDate,
+      conjunction: this.conjunction,
+      multiple: this.multiple,
+      range: this.range,
+      clearable: this.clearable,
+      locale: this.currentLocale,
+      value: this.localValue,
+      activeDate: this.activeDate,
+      hasFocus: this.hasFocus,
+      getElementCssClass: this.getElementCssClass,
+      onClear: this.clearHandler,
+      onFocus: this.focusHandler,
+      onBlur: this.blurHandler,
+      onKeydown: (e) => {
+        if ([Key.LEFT, Key.UP, Key.RIGHT, Key.DOWN].includes(e.keyCode) && this.datepicker) {
+          this.arrowKeyHandler(e);
+        } else if (e.keyCode === Key.ENTER) {
+          this.enterHandler(e);
+        } else if (e.keyCode === Key.ESC) {
+          this.escapeHandler(e);
+        } else if (e.keyCode === Key.SPACE) {
+          this.spaceHandler(e);
+        }
+
+        if (isNumeric(e.key)) {
+          this.focusTimePicker();
+        }
+
+        this.$emit("keydown", e);
+      },
+    };
+
+    if (this.inline) {
+      return h(
+        "div",
+        {
+          class: this.getElementCssClass("inlineWrapper"),
+        },
+        [
+          h(TDatepickerTrigger, triggerSettings),
+          h(
+            "div",
+            {
+              class: this.getElementCssClass("inlineViews"),
+            },
+            views,
+          ),
+        ],
+      );
+    }
+
+    return h(
+      TDropdown,
+      {
+        ref: "dropdown",
+        fixedClasses: undefined,
+        classes: {
+          wrapper: this.getElementCssClass("wrapper"),
+          dropdownWrapper: this.getElementCssClass("dropdownWrapper"),
+          dropdown: this.getElementCssClass("dropdown"),
+          enterFromClass: this.getElementCssClass("enterFromClass"),
+          enterActiveClass: this.getElementCssClass("enterActiveClass"),
+          enterToClass: this.getElementCssClass("enterToClass"),
+          leaveFromClass: this.getElementCssClass("leaveFrom"),
+          leaveActiveClass: this.getElementCssClass("leaveActiveClass"),
+          leaveToClass: this.getElementCssClass("leaveToClass"),
+        },
+        "data-cy": this.dataCy,
+        show: this.show,
+        onHidden: () => {
+          this.$emit("hidden");
+          this.resetInitialState();
+        },
+        onShown: () => {
+          this.$emit("shown");
+          this.shown = true;
+
+          if (this.timepicker && !this.datepicker) {
+            this.$nextTick(() => {
+              this.focusTimePicker();
+            });
+          }
+        },
+      },
+      {
+        default: () => views,
+        trigger: () =>
+          h(
+            TDatepickerTrigger,
+            {
+              ...cloneDeep(triggerSettings),
+              hideIfFocusOutside: this.hideIfFocusOutside,
+              show: this.doShow,
+            },
+            { ...this.$slots },
+          ),
+      },
+    );
+  },
+};
+
+export default TDatepicker;