@ballistix.digital/react-tailwindcss-datepicker
Version:
A modern React Datepicker using Tailwind CSS 3
1,376 lines (1,341 loc) • 290 kB
JavaScript
import React, { createContext, useContext, useCallback, useEffect, useMemo, useState, useRef, memo, forwardRef, createRef } from 'react';
import require$$0 from 'dayjs';
const COLORS = [
"blue",
"orange",
"yellow",
"red",
"purple",
"amber",
"lime",
"green",
"emerald",
"teal",
"cyan",
"sky",
"indigo",
"violet",
"purple",
"fuchsia",
"pink",
"rose"
];
const DEFAULT_COLOR = "blue";
const DEFAULT_SEPARATOR = "~";
const LANGUAGE = "en";
const DATE_FORMAT = "YYYY-MM-DD";
const START_WEEK = "sun";
const DEFAULT_DATE_LOOKING = "forward";
const DAYS = [0, 1, 2, 3, 4, 5, 6];
const MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
// Beware, these maps of colors cannot be replaced with functions using string interpolation such as `bg-${color}-100`
// as described in Tailwind documentation https://tailwindcss.com/docs/content-configuration#dynamic-class-names
const BG_COLOR = {
100: {
blue: "bg-blue-100",
orange: "bg-orange-100",
yellow: "bg-yellow-100",
red: "bg-red-100",
purple: "bg-purple-100",
amber: "bg-amber-100",
lime: "bg-lime-100",
green: "bg-green-100",
emerald: "bg-emerald-100",
teal: "bg-teal-100",
cyan: "bg-cyan-100",
sky: "bg-sky-100",
indigo: "bg-indigo-100",
violet: "bg-violet-100",
fuchsia: "bg-fuchsia-100",
pink: "bg-pink-100",
rose: "bg-rose-100"
},
200: {
blue: "bg-blue-200",
orange: "bg-orange-200",
yellow: "bg-yellow-200",
red: "bg-red-200",
purple: "bg-purple-200",
amber: "bg-amber-200",
lime: "bg-lime-200",
green: "bg-green-200",
emerald: "bg-emerald-200",
teal: "bg-teal-200",
cyan: "bg-cyan-200",
sky: "bg-sky-200",
indigo: "bg-indigo-200",
violet: "bg-violet-200",
fuchsia: "bg-fuchsia-200",
pink: "bg-pink-200",
rose: "bg-rose-200"
},
500: {
blue: "bg-blue-500",
orange: "bg-orange-500",
yellow: "bg-yellow-500",
red: "bg-red-500",
purple: "bg-purple-500",
amber: "bg-amber-500",
lime: "bg-lime-500",
green: "bg-green-500",
emerald: "bg-emerald-500",
teal: "bg-teal-500",
cyan: "bg-cyan-500",
sky: "bg-sky-500",
indigo: "bg-indigo-500",
violet: "bg-violet-500",
fuchsia: "bg-fuchsia-500",
pink: "bg-pink-500",
rose: "bg-rose-500"
},
hover: {
blue: "hover:bg-blue-600",
orange: "hover:bg-orange-600",
yellow: "hover:bg-yellow-600",
red: "hover:bg-red-600",
purple: "hover:bg-purple-600",
amber: "hover:bg-amber-600",
lime: "hover:bg-lime-600",
green: "hover:bg-green-600",
emerald: "hover:bg-emerald-600",
teal: "hover:bg-teal-600",
cyan: "hover:bg-cyan-600",
sky: "hover:bg-sky-600",
indigo: "hover:bg-indigo-600",
violet: "hover:bg-violet-600",
fuchsia: "hover:bg-fuchsia-600",
pink: "hover:bg-pink-600",
rose: "hover:bg-rose-600"
}
};
const TEXT_COLOR = {
500: {
blue: "text-blue-500",
orange: "text-orange-500",
yellow: "text-yellow-500",
red: "text-red-500",
purple: "text-purple-500",
amber: "text-amber-500",
lime: "text-lime-500",
green: "text-green-500",
emerald: "text-emerald-500",
teal: "text-teal-500",
cyan: "text-cyan-500",
sky: "text-sky-500",
indigo: "text-indigo-500",
violet: "text-violet-500",
fuchsia: "text-fuchsia-500",
pink: "text-pink-500",
rose: "text-rose-500"
},
600: {
blue: "text-blue-600 dark:text-blue-400 dark:hover:text-blue-400",
orange: "text-orange-600 dark:text-orange-400 dark:hover:text-orange-400",
yellow: "text-yellow-600 dark:text-yellow-400 dark:hover:text-yellow-400",
red: "text-red-600 dark:text-red-400 dark:hover:text-red-400",
purple: "text-purple-600 dark:text-purple-400 dark:hover:text-purple-400",
amber: "text-amber-600 dark:text-amber-400 dark:hover:text-amber-400",
lime: "text-lime-600 dark:text-lime-400 dark:hover:text-lime-400",
green: "text-green-600 dark:text-green-400 dark:hover:text-green-400",
emerald: "text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-400",
teal: "text-teal-600 dark:text-teal-400 dark:hover:text-teal-400",
cyan: "text-cyan-600 dark:text-cyan-400 dark:hover:text-cyan-400",
sky: "text-sky-600 dark:text-sky-400 dark:hover:text-sky-400",
indigo: "text-indigo-600 dark:text-indigo-400 dark:hover:text-indigo-400",
violet: "text-violet-600 dark:text-violet-400 dark:hover:text-violet-400",
fuchsia: "text-fuchsia-600 dark:text-fuchsia-400 dark:hover:text-fuchsia-400",
pink: "text-pink-600 dark:text-pink-400 dark:hover:text-pink-400",
rose: "text-rose-600 dark:text-rose-400 dark:hover:text-rose-400"
},
hover: {
blue: "hover:text-blue-700",
orange: "hover:text-orange-700",
yellow: "hover:text-yellow-700",
red: "hover:text-red-700",
purple: "hover:text-purple-700",
amber: "hover:text-amber-700",
lime: "hover:text-lime-700",
green: "hover:text-green-700",
emerald: "hover:text-emerald-700",
teal: "hover:text-teal-700",
cyan: "hover:text-cyan-700",
sky: "hover:text-sky-700",
indigo: "hover:text-indigo-700",
violet: "hover:text-violet-700",
fuchsia: "hover:text-fuchsia-700",
pink: "hover:text-pink-700",
rose: "hover:text-rose-700"
}
};
const BORDER_COLOR = {
500: {
blue: "border-blue-500",
orange: "border-orange-500",
yellow: "border-yellow-500",
red: "border-red-500",
purple: "border-purple-500",
amber: "border-amber-500",
lime: "border-lime-500",
green: "border-green-500",
emerald: "border-emerald-500",
teal: "border-teal-500",
cyan: "border-cyan-500",
sky: "border-sky-500",
indigo: "border-indigo-500",
violet: "border-violet-500",
fuchsia: "border-fuchsia-500",
pink: "border-pink-500",
rose: "border-rose-500"
},
focus: {
blue: "focus:border-blue-500",
orange: "focus:border-orange-500",
yellow: "focus:border-yellow-500",
red: "focus:border-red-500",
purple: "focus:border-purple-500",
amber: "focus:border-amber-500",
lime: "focus:border-lime-500",
green: "focus:border-green-500",
emerald: "focus:border-emerald-500",
teal: "focus:border-teal-500",
cyan: "focus:border-cyan-500",
sky: "focus:border-sky-500",
indigo: "focus:border-indigo-500",
violet: "focus:border-violet-500",
fuchsia: "focus:border-fuchsia-500",
pink: "focus:border-pink-500",
rose: "focus:border-rose-500"
}
};
const RING_COLOR = {
focus: {
blue: "focus:ring-blue-500",
orange: "focus:ring-orange-500",
yellow: "focus:ring-yellow-500",
red: "focus:ring-red-500",
purple: "focus:ring-purple-500",
amber: "focus:ring-amber-500",
lime: "focus:ring-lime-500",
green: "focus:ring-green-500",
emerald: "focus:ring-emerald-500",
teal: "focus:ring-teal-500",
cyan: "focus:ring-cyan-500",
sky: "focus:ring-sky-500",
indigo: "focus:ring-indigo-500",
violet: "focus:ring-violet-500",
fuchsia: "focus:ring-fuchsia-500",
pink: "focus:ring-pink-500",
rose: "focus:ring-rose-500"
},
"second-focus": {
blue: "focus:ring-blue-500/20",
orange: "focus:ring-orange-500/20",
yellow: "focus:ring-yellow-500/20",
red: "focus:ring-red-500/20",
purple: "focus:ring-purple-500/20",
amber: "focus:ring-amber-500/20",
lime: "focus:ring-lime-500/20",
green: "focus:ring-green-500/20",
emerald: "focus:ring-emerald-500/20",
teal: "focus:ring-teal-500/20",
cyan: "focus:ring-cyan-500/20",
sky: "focus:ring-sky-500/20",
indigo: "focus:ring-indigo-500/20",
violet: "focus:ring-violet-500/20",
fuchsia: "focus:ring-fuchsia-500/20",
pink: "focus:ring-pink-500/20",
rose: "focus:ring-rose-500/20"
}
};
const BUTTON_COLOR = {
focus: {
blue: "focus:ring-blue-500/50 focus:bg-blue-100/50",
orange: "focus:ring-orange-500/50 focus:bg-orange-100/50",
yellow: "focus:ring-yellow-500/50 focus:bg-yellow-100/50",
red: "focus:ring-red-500/50 focus:bg-red-100/50",
purple: "focus:ring-purple-500/50 focus:bg-purple-100/50",
amber: "focus:ring-amber-500/50 focus:bg-amber-100/50",
lime: "focus:ring-lime-500/50 focus:bg-lime-100/50",
green: "focus:ring-green-500/50 focus:bg-green-100/50",
emerald: "focus:ring-emerald-500/50 focus:bg-emerald-100/50",
teal: "focus:ring-teal-500/50 focus:bg-teal-100/50",
cyan: "focus:ring-cyan-500/50 focus:bg-cyan-100/50",
sky: "focus:ring-sky-500/50 focus:bg-sky-100/50",
indigo: "focus:ring-indigo-500/50 focus:bg-indigo-100/50",
violet: "focus:ring-violet-500/50 focus:bg-violet-100/50",
fuchsia: "focus:ring-fuchsia-500/50 focus:bg-fuchsia-100/50",
pink: "focus:ring-pink-500/50 focus:bg-pink-100/50",
rose: "focus:ring-rose-500/50 focus:bg-rose-100/50"
}
};
const DatepickerContext = createContext({
arrowContainer: null,
asSingle: false,
calendarContainer: null,
changeDatepickerValue: () => { },
changeDayHover: () => { },
changeInputText: () => { },
changePeriod: () => { },
classNames: undefined,
configs: undefined,
containerClassName: "",
dateLooking: DEFAULT_DATE_LOOKING,
dayHover: null,
disabled: false,
disabledDates: null,
displayFormat: DATE_FORMAT,
hideDatepicker: () => { },
i18n: LANGUAGE,
input: undefined,
inputClassName: "",
inputId: undefined,
inputName: undefined,
inputText: "",
maxDate: null,
minDate: null,
period: { start: null, end: null },
popoverDirection: undefined,
primaryColor: DEFAULT_COLOR,
readOnly: false,
required: false,
separator: DEFAULT_SEPARATOR,
showFooter: false,
startWeekOn: START_WEEK,
toggleClassName: "",
toggleIcon: undefined,
updateFirstDate: () => { },
value: null
});
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var isBetween$2 = {exports: {}};
var isBetween$1 = isBetween$2.exports;
var hasRequiredIsBetween;
function requireIsBetween () {
if (hasRequiredIsBetween) return isBetween$2.exports;
hasRequiredIsBetween = 1;
(function (module, exports) {
!function(e,i){module.exports=i();}(isBetween$1,(function(){return function(e,i,t){i.prototype.isBetween=function(e,i,s,f){var n=t(e),o=t(i),r="("===(f=f||"()")[0],u=")"===f[1];return (r?this.isAfter(n,s):!this.isBefore(n,s))&&(u?this.isBefore(o,s):!this.isAfter(o,s))||(r?this.isBefore(n,s):!this.isAfter(n,s))&&(u?this.isAfter(o,s):!this.isBefore(o,s))};}}));
} (isBetween$2));
return isBetween$2.exports;
}
var isBetweenExports = requireIsBetween();
var isBetween = /*@__PURE__*/getDefaultExportFromCjs(isBetweenExports);
var isSameOrAfter$2 = {exports: {}};
var isSameOrAfter$1 = isSameOrAfter$2.exports;
var hasRequiredIsSameOrAfter;
function requireIsSameOrAfter () {
if (hasRequiredIsSameOrAfter) return isSameOrAfter$2.exports;
hasRequiredIsSameOrAfter = 1;
(function (module, exports) {
!function(e,t){module.exports=t();}(isSameOrAfter$1,(function(){return function(e,t){t.prototype.isSameOrAfter=function(e,t){return this.isSame(e,t)||this.isAfter(e,t)};}}));
} (isSameOrAfter$2));
return isSameOrAfter$2.exports;
}
var isSameOrAfterExports = requireIsSameOrAfter();
var isSameOrAfter = /*@__PURE__*/getDefaultExportFromCjs(isSameOrAfterExports);
var isSameOrBefore$2 = {exports: {}};
var isSameOrBefore$1 = isSameOrBefore$2.exports;
var hasRequiredIsSameOrBefore;
function requireIsSameOrBefore () {
if (hasRequiredIsSameOrBefore) return isSameOrBefore$2.exports;
hasRequiredIsSameOrBefore = 1;
(function (module, exports) {
!function(e,i){module.exports=i();}(isSameOrBefore$1,(function(){return function(e,i){i.prototype.isSameOrBefore=function(e,i){return this.isSame(e,i)||this.isBefore(e,i)};}}));
} (isSameOrBefore$2));
return isSameOrBefore$2.exports;
}
var isSameOrBeforeExports = requireIsSameOrBefore();
var isSameOrBefore = /*@__PURE__*/getDefaultExportFromCjs(isSameOrBeforeExports);
var isToday$2 = {exports: {}};
var isToday$1 = isToday$2.exports;
var hasRequiredIsToday;
function requireIsToday () {
if (hasRequiredIsToday) return isToday$2.exports;
hasRequiredIsToday = 1;
(function (module, exports) {
!function(e,o){module.exports=o();}(isToday$1,(function(){return function(e,o,t){o.prototype.isToday=function(){var e="YYYY-MM-DD",o=t();return this.format(e)===o.format(e)};}}));
} (isToday$2));
return isToday$2.exports;
}
var isTodayExports = requireIsToday();
var isToday = /*@__PURE__*/getDefaultExportFromCjs(isTodayExports);
require$$0.extend(isBetween);
require$$0.extend(isSameOrAfter);
require$$0.extend(isSameOrBefore);
require$$0.extend(isToday);
function loadLanguageModule(language = LANGUAGE) {
switch (language) {
case "af":
Promise.resolve().then(function () { return af; });
break;
case "am":
Promise.resolve().then(function () { return am; });
break;
case "ar-dz":
Promise.resolve().then(function () { return arDz; });
break;
case "ar-iq":
Promise.resolve().then(function () { return arIq; });
break;
case "ar-kw":
Promise.resolve().then(function () { return arKw; });
break;
case "ar-ly":
Promise.resolve().then(function () { return arLy; });
break;
case "ar-ma":
Promise.resolve().then(function () { return arMa; });
break;
case "ar-sa":
Promise.resolve().then(function () { return arSa; });
break;
case "ar-tn":
Promise.resolve().then(function () { return arTn; });
break;
case "ar":
Promise.resolve().then(function () { return ar; });
break;
case "az":
Promise.resolve().then(function () { return az; });
break;
case "bg":
Promise.resolve().then(function () { return bg; });
break;
case "bi":
Promise.resolve().then(function () { return bi; });
break;
case "bm":
Promise.resolve().then(function () { return bm; });
break;
case "bn-bd":
Promise.resolve().then(function () { return bnBd; });
break;
case "bn":
Promise.resolve().then(function () { return bn; });
break;
case "bo":
Promise.resolve().then(function () { return bo; });
break;
case "br":
Promise.resolve().then(function () { return br; });
break;
case "ca":
Promise.resolve().then(function () { return ca; });
break;
case "cs":
Promise.resolve().then(function () { return cs; });
break;
case "cv":
Promise.resolve().then(function () { return cv; });
break;
case "cy":
Promise.resolve().then(function () { return cy; });
break;
case "da":
Promise.resolve().then(function () { return da; });
break;
case "de-at":
Promise.resolve().then(function () { return deAt; });
break;
case "de-ch":
Promise.resolve().then(function () { return deCh; });
break;
case "de":
Promise.resolve().then(function () { return de; });
break;
case "dv":
Promise.resolve().then(function () { return dv; });
break;
case "el":
Promise.resolve().then(function () { return el; });
break;
case "en-au":
Promise.resolve().then(function () { return enAu; });
break;
case "en-gb":
Promise.resolve().then(function () { return enGb; });
break;
case "en-ie":
Promise.resolve().then(function () { return enIe; });
break;
case "en-il":
Promise.resolve().then(function () { return enIl; });
break;
case "en-in":
Promise.resolve().then(function () { return enIn; });
break;
case "en-nz":
Promise.resolve().then(function () { return enNz; });
break;
case "en-sg":
Promise.resolve().then(function () { return enSg; });
break;
case "en-tt":
Promise.resolve().then(function () { return enTt; });
break;
case "en":
Promise.resolve().then(function () { return en; });
break;
case "eo":
Promise.resolve().then(function () { return eo; });
break;
case "es-do":
Promise.resolve().then(function () { return esDo; });
break;
case "es-mx":
Promise.resolve().then(function () { return esMx; });
break;
case "es-pr":
Promise.resolve().then(function () { return esPr; });
break;
case "es-us":
Promise.resolve().then(function () { return esUs; });
break;
case "es":
Promise.resolve().then(function () { return es; });
break;
case "et":
Promise.resolve().then(function () { return et; });
break;
case "eu":
Promise.resolve().then(function () { return eu; });
break;
case "fa":
Promise.resolve().then(function () { return fa; });
break;
case "fi":
Promise.resolve().then(function () { return fi; });
break;
case "fo":
Promise.resolve().then(function () { return fo; });
break;
case "fr-ch":
Promise.resolve().then(function () { return frCh; });
break;
case "fr":
Promise.resolve().then(function () { return fr; });
break;
case "fy":
Promise.resolve().then(function () { return fy; });
break;
case "ga":
Promise.resolve().then(function () { return ga; });
break;
case "gd":
Promise.resolve().then(function () { return gd; });
break;
case "gl":
Promise.resolve().then(function () { return gl; });
break;
case "gom-latn":
Promise.resolve().then(function () { return gomLatn; });
break;
case "gu":
Promise.resolve().then(function () { return gu; });
break;
case "he":
Promise.resolve().then(function () { return he; });
break;
case "hi":
Promise.resolve().then(function () { return hi; });
break;
case "hr":
Promise.resolve().then(function () { return hr; });
break;
case "ht":
Promise.resolve().then(function () { return ht; });
break;
case "hu":
Promise.resolve().then(function () { return hu; });
break;
case "hy-am":
Promise.resolve().then(function () { return hyAm; });
break;
case "id":
Promise.resolve().then(function () { return id; });
break;
case "is":
Promise.resolve().then(function () { return is; });
break;
case "it-ch":
Promise.resolve().then(function () { return itCh; });
break;
case "it":
Promise.resolve().then(function () { return it; });
break;
case "ja":
Promise.resolve().then(function () { return ja; });
break;
case "jv":
Promise.resolve().then(function () { return jv; });
break;
case "ka":
Promise.resolve().then(function () { return ka; });
break;
case "kk":
Promise.resolve().then(function () { return kk; });
break;
case "ko":
Promise.resolve().then(function () { return ko; });
break;
case "ku":
Promise.resolve().then(function () { return ku; });
break;
case "ky":
Promise.resolve().then(function () { return ky; });
break;
case "lb":
Promise.resolve().then(function () { return lb; });
break;
case "lo":
Promise.resolve().then(function () { return lo; });
break;
case "lt":
Promise.resolve().then(function () { return lt; });
break;
case "lv":
Promise.resolve().then(function () { return lv; });
break;
case "me":
Promise.resolve().then(function () { return me; });
break;
case "mi":
Promise.resolve().then(function () { return mi; });
break;
case "mk":
Promise.resolve().then(function () { return mk; });
break;
case "ml":
Promise.resolve().then(function () { return ml; });
break;
case "mn":
Promise.resolve().then(function () { return mn; });
break;
case "ms-my":
Promise.resolve().then(function () { return msMy; });
break;
case "ms":
Promise.resolve().then(function () { return ms; });
break;
case "mt":
Promise.resolve().then(function () { return mt; });
break;
case "my":
Promise.resolve().then(function () { return my; });
break;
case "nb":
Promise.resolve().then(function () { return nb; });
break;
case "ne":
Promise.resolve().then(function () { return ne; });
break;
case "nl-be":
Promise.resolve().then(function () { return nlBe; });
break;
case "nl":
Promise.resolve().then(function () { return nl; });
break;
case "nn":
Promise.resolve().then(function () { return nn; });
break;
case "oc-lnc":
Promise.resolve().then(function () { return ocLnc; });
break;
case "pa-in":
Promise.resolve().then(function () { return paIn; });
break;
case "pl":
Promise.resolve().then(function () { return pl; });
break;
case "pt-br":
Promise.resolve().then(function () { return ptBr; });
break;
case "pt":
Promise.resolve().then(function () { return pt; });
break;
case "rn":
Promise.resolve().then(function () { return rn; });
break;
case "ro":
Promise.resolve().then(function () { return ro; });
break;
case "ru":
Promise.resolve().then(function () { return ru; });
break;
case "rw":
Promise.resolve().then(function () { return rw; });
break;
case "sd":
Promise.resolve().then(function () { return sd; });
break;
case "se":
Promise.resolve().then(function () { return se; });
break;
case "si":
Promise.resolve().then(function () { return si; });
break;
case "sk":
Promise.resolve().then(function () { return sk; });
break;
case "sl":
Promise.resolve().then(function () { return sl; });
break;
case "sq":
Promise.resolve().then(function () { return sq; });
break;
case "sr":
Promise.resolve().then(function () { return sr; });
break;
case "sr-cyrl":
Promise.resolve().then(function () { return srCyrl; });
break;
case "ss":
Promise.resolve().then(function () { return ss; });
break;
case "sv-fi":
Promise.resolve().then(function () { return svFi; });
break;
case "sv":
Promise.resolve().then(function () { return sv; });
break;
case "sw":
Promise.resolve().then(function () { return sw; });
break;
case "ta":
Promise.resolve().then(function () { return ta; });
break;
case "te":
Promise.resolve().then(function () { return te; });
break;
case "tg":
Promise.resolve().then(function () { return tg; });
break;
case "th":
Promise.resolve().then(function () { return th; });
break;
case "tk":
Promise.resolve().then(function () { return tk; });
break;
case "tl-ph":
Promise.resolve().then(function () { return tlPh; });
break;
case "tlh":
Promise.resolve().then(function () { return tlh; });
break;
case "tr":
Promise.resolve().then(function () { return tr; });
break;
case "tzl":
Promise.resolve().then(function () { return tzl; });
break;
case "tzm-latn":
Promise.resolve().then(function () { return tzmLatn; });
break;
case "tzm":
Promise.resolve().then(function () { return tzm; });
break;
case "ug-cn":
Promise.resolve().then(function () { return ugCn; });
break;
case "uk":
Promise.resolve().then(function () { return uk; });
break;
case "ur":
Promise.resolve().then(function () { return ur; });
break;
case "uz-latn":
Promise.resolve().then(function () { return uzLatn; });
break;
case "uz":
Promise.resolve().then(function () { return uz; });
break;
case "vi":
Promise.resolve().then(function () { return vi; });
break;
case "x-pseudo":
Promise.resolve().then(function () { return xPseudo; });
break;
case "yo":
Promise.resolve().then(function () { return yo; });
break;
case "zh-cn":
Promise.resolve().then(function () { return zhCn; });
break;
case "zh-hk":
Promise.resolve().then(function () { return zhHk; });
break;
case "zh-tw":
Promise.resolve().then(function () { return zhTw; });
break;
case "zh":
Promise.resolve().then(function () { return zh; });
break;
default:
Promise.resolve().then(function () { return en; });
break;
}
}
function dateIsValid(date) {
return require$$0(date).isValid();
}
function isCurrentDay(date) {
if (!dateIsValid(date))
return false;
return require$$0(date).isToday();
}
function dateIsSame(a, b, unit) {
if (!dateIsValid(a) || !dateIsValid(b))
return false;
return require$$0(a).isSame(require$$0(b), unit);
}
function dateIsBefore(a, b, unit) {
if (!dateIsValid(a) || !dateIsValid(b))
return false;
return require$$0(a).isBefore(require$$0(b), unit);
}
function dateIsAfter(a, b, unit) {
if (!dateIsValid(a) || !dateIsValid(b))
return false;
return require$$0(a).isAfter(require$$0(b), unit);
}
function dateIsSameOrBefore(a, b, unit) {
if (!dateIsValid(a) || !dateIsValid(b))
return false;
return require$$0(a).isSameOrBefore(require$$0(b), unit);
}
function dateIsSameOrAfter(a, b, unit) {
if (!dateIsValid(a) || !dateIsValid(b))
return false;
return require$$0(a).isSameOrAfter(require$$0(b), unit);
}
function dateIsBetween(whoIsBetween, start, end, unit, include) {
if (!dateIsValid(whoIsBetween) || !dateIsValid(start) || !dateIsValid(end)) {
return false;
}
return require$$0(whoIsBetween).isBetween(require$$0(start), require$$0(end), unit, `${include?.start ? "[" : "("}${include?.end ? "]" : ")"}`);
}
function dateFormat(date, format, local = "en") {
if (!dateIsValid(date))
return null;
return require$$0(date).locale(local).format(format);
}
function dateStringToDate(dateString) {
const parseDate = require$$0(dateString);
if (!parseDate.isValid())
return null;
return parseDate.toDate();
}
function previousMonthBy(date) {
if (!dateIsValid(date))
return require$$0().toDate();
const parseDate = require$$0(date);
return parseDate
.date(1)
.hour(0)
.minute(0)
.second(0)
.month(parseDate.month() - 1)
.toDate();
}
function nextMonthBy(date) {
if (!dateIsValid(date))
return require$$0().toDate();
const parseDate = require$$0(date);
return parseDate
.date(1)
.hour(0)
.minute(0)
.second(0)
.month(parseDate.month() + 1)
.toDate();
}
function dateUpdateMonth(date, value) {
if (!dateIsValid(date))
return require$$0().toDate();
return require$$0(date).month(value).toDate();
}
function dateUpdateYear(date, value) {
if (!dateIsValid(date))
return require$$0().toDate();
return require$$0(date).year(value).toDate();
}
function firstDayOfMonth(date) {
return require$$0(date || require$$0())
.startOf("month")
.toDate();
}
function endDayOfMonth(date) {
return require$$0(date || require$$0())
.endOf("month")
.toDate();
}
function dayIndexInWeek(date) {
return require$$0(date || require$$0()).day();
}
function previousDaysInWeek(date, weekStartDayIndex = 0) {
if (!dateIsValid(date))
return [];
const previousDays = [];
let i = 1;
let previousDay = dateAdd(date, -i, "day");
while (dayIndexInWeek(previousDay) !== weekStartDayIndex) {
previousDays.push(previousDay);
i++;
previousDay = dateAdd(date, -i, "day");
}
return previousDays.sort((a, b) => {
if (dateIsAfter(a, b, "date"))
return 1;
return -1;
});
}
function nextDaysInWeek(date, weekStartDayIndex = 0) {
if (!dateIsValid(date))
return [];
const nextDays = [];
let i = 1;
let nextDay = dateAdd(date, i, "day");
while (dayIndexInWeek(nextDay) !== weekStartDayIndex) {
nextDays.push(nextDay);
i++;
nextDay = dateAdd(date, i, "day");
}
return nextDays;
}
function daysInMonth(date) {
const daysNumber = require$$0(date || require$$0()).daysInMonth();
if (!daysNumber)
return 0;
return daysNumber;
}
function allDaysInMonth(date) {
if (!dateIsValid(date || new Date()))
return [];
const maxDaysInMonth = daysInMonth(date);
const days = [];
for (let i = 1; i <= maxDaysInMonth; i++) {
days.push(require$$0(date).date(i).toDate());
}
return days;
}
function weekDayStringToIndex(dayString) {
switch (dayString) {
case "mon":
return 0;
case "tue":
return 1;
case "wed":
return 2;
case "thu":
return 3;
case "fri":
return 4;
case "sat":
return 5;
case "sun":
return 6;
default:
return 0;
}
}
function dateAdd(date, value, unit) {
if (!dateIsValid(date))
return date;
return require$$0(date).add(value, unit).toDate();
}
function getNextDates(date, limit) {
if (!dateIsValid(date))
return [];
const nexDates = [];
for (let i = 1; i <= limit; i++) {
nexDates.push(dateAdd(date, i, "day"));
}
return nexDates;
}
const ChevronLeftIcon = (props) => {
const { className = "w-6 h-6" } = props;
return (React.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })));
};
const ChevronRightIcon = (props) => {
const { className = "w-6 h-6" } = props;
return (React.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" })));
};
const DoubleChevronLeftIcon = (props) => {
const { className = "w-6 h-6" } = props;
return (React.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" })));
};
const DoubleChevronRightIcon = (props) => {
const { className = "w-6 h-6" } = props;
return (React.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" })));
};
const RoundedButton = (props) => {
const { children, onClick, disabled, roundedFull = false, padding = "py-[0.55rem]", active = false } = props;
// Contexts
const { primaryColor } = useContext(DatepickerContext);
// Functions
const getClassName = useCallback(() => {
const darkClass = "dark:text-white/70 dark:hover:bg-white/10 dark:focus:bg-white/10";
const activeClass = active ? "font-semibold bg-gray-50 dark:bg-white/5" : "";
const defaultClass = !roundedFull
? `w-full tracking-wide ${darkClass} ${activeClass} transition-all duration-300 px-3 ${padding} uppercase hover:bg-gray-100 rounded-md focus:ring-1`
: `${darkClass} ${activeClass} transition-all duration-300 hover:bg-gray-100 rounded-full p-[0.45rem] focus:ring-1`;
const buttonFocusColor = BUTTON_COLOR.focus[primaryColor];
const disabledClass = disabled ? "line-through" : "";
return `${defaultClass} ${buttonFocusColor} ${disabledClass}`;
}, [disabled, padding, primaryColor, roundedFull, active]);
return (React.createElement("button", { type: "button", className: getClassName(), onClick: onClick, disabled: disabled }, children));
};
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
function generateArrayNumber(start = 0, end = 0) {
const array = [];
for (let i = start; i <= end; i++) {
array.push(i);
}
return array;
}
function shortString(value, limit = 3) {
return value.slice(0, limit);
}
function ucFirst(value) {
return `${(value[0] || "")?.toUpperCase()}${(value || "")?.slice(1, value.length)}`;
}
const Days = (props) => {
// Props
const { days, onClickPreviousDays, onClickDay, onClickNextDays } = props;
// Contexts
const { primaryColor, period, changePeriod, dayHover, changeDayHover, minDate, maxDate, disabledDates } = useContext(DatepickerContext);
// Functions
const currentDateClass = useCallback((day) => {
if (isCurrentDay(day))
return TEXT_COLOR["500"][primaryColor];
return "";
}, [primaryColor]);
const activeDateData = useCallback((day) => {
let className = "";
const dayIsSameStart = period.start && dateIsSame(day, period.start, "date");
const dayIsSameEnd = period.end && dateIsSame(day, period.end, "date");
const dayIsSameHoverDay = dayHover && dateIsSame(day, dayHover, "date");
if (dayIsSameStart && dayIsSameEnd) {
className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium rounded-full`;
}
else if (dayIsSameStart) {
className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${dayIsSameHoverDay && !period.end ? "rounded-full" : "rounded-l-full"}`;
}
else if (dayIsSameEnd) {
className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${dayIsSameHoverDay && !period.start ? "rounded-full" : "rounded-r-full"}`;
}
return {
active: dayIsSameStart || dayIsSameEnd,
className: className
};
}, [dayHover, period.end, period.start, primaryColor]);
const hoverClassByDay = useCallback((day) => {
let className = currentDateClass(day);
if (period.start && period.end) {
if (dateIsBetween(day, period.start, period.end, "day", { start: true, end: false })) {
return ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(day)} dark:bg-white/10`;
}
}
if (!dayHover) {
return className;
}
if (period.start &&
dateIsBetween(day, period.start, dayHover, "day", { start: true, end: false })) {
className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(day)} dark:bg-white/10`;
}
if (period.end &&
dateIsBetween(day, dayHover, period.end, "day", { start: true, end: false })) {
className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(day)} dark:bg-white/10`;
}
if (dateIsSame(dayHover, day, "date")) {
const bgColor = BG_COLOR["500"][primaryColor];
className = ` transition-all duration-500 text-white font-medium ${bgColor} ${period.start ? "rounded-r-full" : "rounded-l-full"}`;
}
return className;
}, [currentDateClass, dayHover, period.end, period.start, primaryColor]);
const isDateTooEarly = useCallback((day) => {
if (!minDate)
return false;
return dateIsBefore(day, minDate, "date");
}, [minDate]);
const isDateTooLate = useCallback((day) => {
if (!maxDate)
return false;
return dateIsAfter(day, maxDate, "date");
}, [maxDate]);
const isDateDisabled = useCallback((day) => {
if (isDateTooEarly(day) || isDateTooLate(day)) {
return true;
}
if (!disabledDates || (Array.isArray(disabledDates) && !disabledDates.length)) {
return false;
}
let matchingCount = 0;
disabledDates?.forEach(dateRange => {
if (dateRange.startDate &&
dateRange.endDate &&
dateIsBetween(day, dateRange.startDate, dateRange.endDate, "date", {
start: true,
end: true
})) {
matchingCount++;
}
});
return matchingCount > 0;
}, [isDateTooEarly, isDateTooLate, disabledDates]);
const buttonClass = useCallback((day, type) => {
const baseClass = "flex items-center justify-center w-12 h-12 lg:w-10 lg:h-10";
if (type === "current") {
return classNames(baseClass, !activeDateData(day).active
? hoverClassByDay(day)
: activeDateData(day).className, isDateDisabled(day) && "line-through");
}
return classNames(baseClass, isDateDisabled(day) && "line-through", "text-gray-400");
}, [activeDateData, hoverClassByDay, isDateDisabled]);
const checkIfHoverPeriodContainsDisabledPeriod = useCallback((hoverPeriod) => {
if (!Array.isArray(disabledDates)) {
return false;
}
for (let i = 0; i < disabledDates.length; i++) {
if (dateIsSameOrBefore(hoverPeriod.start, disabledDates[i].startDate, "date") &&
dateIsSameOrAfter(hoverPeriod.end, disabledDates[i].endDate, "date")) {
return true;
}
}
return false;
}, [disabledDates]);
const hoverDay = useCallback((day) => {
if (period.start && !period.end) {
const hoverPeriod = { ...period, end: day };
if (dateIsBefore(day, period.start, "date")) {
hoverPeriod.start = day;
hoverPeriod.end = period.start;
if (!checkIfHoverPeriodContainsDisabledPeriod(hoverPeriod)) {
changePeriod({
start: null,
end: period.start
});
}
}
if (!checkIfHoverPeriodContainsDisabledPeriod(hoverPeriod)) {
changeDayHover(day);
}
}
if (!period.start && period.end) {
const hoverPeriod = { ...period, start: day };
if (dateIsAfter(day, period.end, "date")) {
hoverPeriod.start = period.end;
hoverPeriod.end = day;
if (!checkIfHoverPeriodContainsDisabledPeriod(hoverPeriod)) {
changePeriod({
start: period.end,
end: null
});
}
}
if (!checkIfHoverPeriodContainsDisabledPeriod(hoverPeriod)) {
changeDayHover(day);
}
}
}, [changeDayHover, changePeriod, checkIfHoverPeriodContainsDisabledPeriod, period]);
const handleClickDay = useCallback((day, type) => {
function continueClick() {
if (type === "previous") {
onClickPreviousDays(day);
}
if (type === "current") {
onClickDay(day);
}
if (type === "next") {
onClickNextDays(day);
}
}
if (disabledDates?.length) {
const daySelectedIsSameHoverDay = dayHover && dateIsSame(day, dayHover, "date");
if (period.start && !period.end && daySelectedIsSameHoverDay) {
continueClick();
}
else if (!period.start && period.end && daySelectedIsSameHoverDay) {
continueClick();
}
else {
continueClick();
}
}
else {
continueClick();
}
}, [
dayHover,
disabledDates?.length,
onClickDay,
onClickNextDays,
onClickPreviousDays,
period.end,
period.start
]);
return (React.createElement("div", { className: "grid grid-cols-7 gap-y-0.5 my-1" },
days.previous.map((item, index) => (React.createElement("button", { type: "button", key: index, disabled: isDateDisabled(item), className: `${buttonClass(item, "previous")}`, onClick: () => handleClickDay(item, "previous"), onMouseOver: () => {
hoverDay(item);
} }, item.getDate()))),
days.current.map((item, index) => (React.createElement("button", { type: "button", key: index, disabled: isDateDisabled(item), className: `${buttonClass(item, "current")}`, onClick: () => handleClickDay(item, "current"), onMouseOver: () => {
hoverDay(item);
} }, item.getDate()))),
days.next.map((item, index) => (React.createElement("button", { type: "button", key: index, disabled: isDateDisabled(item), className: `${buttonClass(item, "next")}`, onClick: () => handleClickDay(item, "next"), onMouseOver: () => {
hoverDay(item);
} }, item.getDate())))));
};
const Months = (props) => {
const { currentMonth, clickMonth } = props;
const { i18n } = useContext(DatepickerContext);
useEffect(() => {
loadLanguageModule(i18n);
}, [i18n]);
return (React.createElement("div", { className: "w-full grid grid-cols-2 gap-2 mt-2" }, MONTHS.map(item => (React.createElement(RoundedButton, { key: item, padding: "py-3", onClick: () => {
clickMonth(item);
}, active: currentMonth === item }, dateFormat(new Date(2022, item - 1, 1), "MMM", i18n))))));
};
const Week = () => {
const { i18n, startWeekOn } = useContext(DatepickerContext);
useEffect(() => {
loadLanguageModule(i18n);
}, [i18n]);
const startDateModifier = useMemo(() => {
if (startWeekOn) {
switch (startWeekOn) {
case "mon":
return 1;
case "tue":
return 2;
case "wed":
return 3;
case "thu":
return 4;
case "fri":
return 5;
case "sat":
return 6;
case "sun":
return 0;
default:
return 0;
}
}
return 0;
}, [startWeekOn]);
return (React.createElement("div", { className: "grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2" }, DAYS.map(item => (React.createElement("div", { key: item, className: "tracking-wide text-gray-500 text-center" }, ucFirst(shortString(dateFormat(new Date(`2022-11-${6 + item + startDateModifier}`), "ddd", i18n) || "")))))));
};
const Years = (props) => {
const { year, currentYear, minYear, maxYear, clickYear } = props;
const { dateLooking } = useContext(DatepickerContext);
const date = useMemo(() => {
let start;
let end;
switch (dateLooking) {
case "backward":
start = year - 11;
end = year;
break;
case "middle":
start = year - 4;
end = year + 7;
break;
case "forward":
default:
start = year;
end = year + 11;
break;
}
return {
start,
end
};
}, [dateLooking, year]);
return (React.createElement("div", { className: "w-full grid grid-cols-2 gap-2 mt-2" }, generateArrayNumber(date.start, date.end).map((item, index) => (React.createElement(RoundedButton, { key: index, padding: "py-3", onClick: () => {
clickYear(item);
}, active: currentYear === item, disabled: (maxYear !== null && item > maxYear) || (minYear !== null && item < minYear) },
React.createElement(React.Fragment, null, item))))));
};
const NUMBER_YEARS_SHOW = 12;
const CALENDAR_SIZE = 42;
const Calendar = (props) => {
// Props
const { date, minDate, maxDate, onClickPrevious, onClickNext, changeMonth, changeYear } = props;
// Contexts
const { period, changePeriod, changeDayHover, showFooter, changeDatepickerValue, hideDatepicker, asSingle, i18n, startWeekOn, input } = useContext(DatepickerContext);
loadLanguageModule(i18n);
// States
const [showMonths, setShowMonths] = useState(false);
const [showYears, setShowYears] = useState(false);
const [year, setYear] = useState(date.getFullYear());
// Functions
const hideMonths = useCallback(() => {
if (showMonths)
setShowMonths(false);
}, [showMonths]);
const hideYears = useCallback(() => {
if (showYears)
setShowYears(false);
}, [showYears]);
const clickMonth = useCallback((month) => {
setTimeout(() => {
changeMonth(month);
setShowMonths(!showMonths);
}, 250);
}, [changeMonth, showMonths]);
const clickYear = useCallback((year) => {
setTimeout(() => {
changeYear(year);
setShowYears(!showYears);
}, 250);
}, [changeYear, showYears]);
const clickDay = useCallback((day, after) => {
let newStart;
let newEnd = null;
function chosePeriod(start, end) {
const ipt = input?.current;
changeDatepickerValue({
startDate: start,
endDate: end
}, ipt);
hideDatepicker();
}
if (period.start && period.end) {
changeDayHover(null);
changePeriod({
start: null,
end: null
});
}
if ((!period.start && !period.end) || (period.start && period.end)) {
if (!period.start && !period.end) {
changeDayHover(day);
}
newStart = day;
if (asSingle) {
newEnd = day;
if (!showFooter) {
chosePeriod(day, day);
}
}
}
else {
if (period.start && !period.end) {
// start not null
// end null
const condition = dateIsSameOrAfter(day, period.start, "date");
newStart = condition ? period.start : day;
newEnd = condition ? day : period.start;
}
else {
// Start null
// End not null
co