react-calendar-datetime 2.0.6 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +304 -2
- package/dist/index.mjs +304 -2
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,304 @@
|
|
|
1
|
-
"use strict";var na=Object.create;var N=Object.defineProperty;var la=Object.getOwnPropertyDescriptor;var ca=Object.getOwnPropertyNames;var
|
|
2
|
-
`);var k=p(require("dayjs"),1),ea=p(require("dayjs/plugin/localeData"),1),oe=require("dayjs/locale/en"),ne=require("dayjs/locale/es"),le=require("dayjs/locale/ru"),ce=require("dayjs/locale/de"),ie=require("dayjs/locale/sr"),se=require("dayjs/locale/fr");var T=p(require("dayjs"),1);var u=require("react/jsx-runtime"),R=()=>(0,u.jsx)("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:(0,u.jsx)("path",{d:"m54 30h-39.899l15.278-14.552c.8-.762.831-2.028.069-2.828-.761-.799-2.027-.831-2.828-.069l-17.448 16.62c-.755.756-1.172 1.76-1.172 2.829 0 1.068.417 2.073 1.207 2.862l17.414 16.586c.387.369.883.552 1.379.552.528 0 1.056-.208 1.449-.621.762-.8.731-2.065-.069-2.827l-15.342-14.552h39.962c1.104 0 2-.896 2-2s-.896-2-2-2z"})}),E=()=>(0,u.jsx)("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:(0,u.jsx)("path",{d:"m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s-.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z"})}),S=()=>(0,u.jsx)("svg",{viewBox:"0 0 492.002 492.002",xmlns:"http://www.w3.org/2000/svg",children:(0,u.jsx)("path",{d:"M484.136,328.473L264.988,109.329c-5.064-5.064-11.816-7.844-19.172-7.844c-7.208,0-13.964,2.78-19.02,7.844 L7.852,328.265C2.788,333.333,0,340.089,0,347.297c0,7.208,2.784,13.968,7.852,19.032l16.124,16.124 c5.064,5.064,11.824,7.86,19.032,7.86s13.964-2.796,19.032-7.86l183.852-183.852l184.056,184.064 c5.064,5.06,11.82,7.852,19.032,7.852c7.208,0,13.96-2.792,19.028-7.852l16.128-16.132 C494.624,356.041,494.624,338.965,484.136,328.473z"})}),I=()=>(0,u.jsx)("svg",{viewBox:"0 0 256 256",xmlns:"http://www.w3.org/2000/svg",children:(0,u.jsx)("polygon",{points:"225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093"})});var v=require("react/jsx-runtime"),fa=({date:a,toggleYearPicker:t,changeAction:n})=>{let o=()=>{n((0,T.default)(a).subtract(1,"year"))},e=()=>{n((0,T.default)(a).add(1,"year"))};return(0,v.jsxs)("div",{className:"calendar-years",children:[(0,v.jsx)("div",{tabIndex:0,role:"button",className:"calendar-years-arrow",onClick:o,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&o()},children:(0,v.jsx)(R,{})}),(0,v.jsx)("div",{onClick:t,className:"calendar-years-current",role:"button",tabIndex:0,children:(0,T.default)(a).format("YYYY")}),(0,v.jsx)("div",{onClick:e,role:"button",tabIndex:0,className:"calendar-years-arrow",onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&e()},children:(0,v.jsx)(E,{})})]})},L=fa;var Y=require("react"),q=p(require("clsx"),1),j=p(require("dayjs"),1);var b=require("react/jsx-runtime"),pa=({toggleYearPicker:a,date:t,changeAction:n})=>{let[o,e]=(0,Y.useState)((0,j.default)(t)),[l,r]=(0,Y.useState)(!0),i=o.year(),h=Array.from({length:25},(d,_)=>i-12+_),s=d=>{d?.preventDefault(),n((0,j.default)(o)),a()},y=d=>{n((0,j.default)(o).year(d)),a()},g=d=>`${(Math.abs(i-d)*.1/2).toFixed(2)}s`;return(0,Y.useEffect)(()=>{r(!1);let d=setTimeout(()=>r(!0),50);return()=>clearTimeout(d)},[o]),(0,b.jsxs)("div",{className:"calendar-yearPicker",onContextMenu:s,children:[(0,b.jsx)("button",{disabled:i<1925,onClick:()=>e(o.subtract(25,"y")),className:"calendar-yearPicker-arrow",children:(0,b.jsx)(R,{})}),h.map(d=>(0,b.jsx)("button",{disabled:d>2100||d<1900,onClick:()=>y(d),className:(0,q.default)("calendar-yearPicker-year",{year_anim:l,calendar_active:i===d}),style:{animationDelay:g(d),animationIterationCount:1},children:d},d)),(0,b.jsx)("button",{className:"calendar-yearPicker-arrow",disabled:i>2075,onClick:()=>e(o.add(25,"y")),children:(0,b.jsx)(E,{})})]})},H=pa;var Q=p(require("clsx"),1),A=require("react/jsx-runtime"),ya=({date:a,monthsNames:t,changeAction:n})=>{let o=a.month();return(0,A.jsx)("div",{className:"calendar-months",children:t.map((e,l)=>(0,A.jsx)("div",{className:(0,Q.default)("calendar-months-month",{calendar_active:l===o}),onClick:()=>n(a.month(l)),children:e},l))})},F=ya;var V=p(require("clsx"),1),X=require("react"),P=require("react/jsx-runtime"),ha=({date:a,changeAction:t,weekdays:n})=>{let o=a.date(),e=(0,X.useMemo)(()=>{let r=a.daysInMonth();return Array.from({length:r},(i,h)=>h+1)},[a]),l=r=>{r!==o&&t(a.date(r))};return(0,P.jsxs)("div",{className:"calendar-days",children:[n.map(r=>(0,P.jsx)("div",{className:"calendar-days-header",children:r},r)),e.map(r=>(0,P.jsx)("div",{onClick:()=>l(r),onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&l(r)},tabIndex:0,role:"button",className:(0,V.default)("calendar-days-day",{calendar_active:r===o}),children:r},r))]})},K=ha;var C=require("react"),m=p(require("dayjs"),1);var c=require("react/jsx-runtime"),ua=({date:a,changeAction:t})=>{let[n,o]=(0,C.useState)((0,m.default)(a).format("HH")),[e,l]=(0,C.useState)((0,m.default)(a).format("mm")),r=(s,y)=>{t((0,m.default)(a).add(s,y))},i=(s,y)=>{t((0,m.default)(a).subtract(s,y))},h=(s,y)=>{let g="deltaY"in s?s.deltaY:0;g<0?t((0,m.default)(a).subtract(1,y)):g>0&&t((0,m.default)(a).add(1,y))};return(0,C.useEffect)(()=>{let s=(0,m.default)(a);o(s.format("HH")),l(s.format("mm"))},[a]),(0,c.jsxs)("div",{className:"calendar-time",children:[(0,c.jsxs)("div",{className:"calendar-time-half hours",onWheel:s=>h(s,"h"),children:[(0,c.jsx)("div",{className:"calendar-time-half-cell",onClick:()=>i(1,"h"),children:(0,c.jsx)(S,{})}),(0,c.jsx)("div",{onClick:()=>i(2,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(2,"h").format("HH")}),(0,c.jsx)("div",{onClick:()=>i(1,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(1,"h").format("HH")}),(0,c.jsx)("div",{className:"calendar-time-half-cell dividerhour",children:n}),(0,c.jsx)("div",{onClick:()=>r(1,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(1,"h").format("HH")}),(0,c.jsx)("div",{onClick:()=>r(2,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(2,"h").format("HH")}),(0,c.jsx)("div",{className:"calendar-time-half-cell",onClick:()=>r(1,"h"),children:(0,c.jsx)(I,{})})]}),(0,c.jsxs)("div",{className:"calendar-time-half",onWheel:s=>h(s,"m"),children:[(0,c.jsx)("div",{className:"calendar-time-half-cell",onClick:()=>i(1,"m"),children:(0,c.jsx)(S,{})}),(0,c.jsx)("div",{onClick:()=>i(2,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(2,"m").format("mm")}),(0,c.jsx)("div",{onClick:()=>i(1,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(1,"m").format("mm")}),(0,c.jsx)("div",{className:"calendar-time-half-cell",children:e}),(0,c.jsx)("div",{onClick:()=>r(1,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(1,"m").format("mm")}),(0,c.jsx)("div",{onClick:()=>r(2,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(2,"m").format("mm")}),(0,c.jsx)("div",{onClick:()=>r(1,"m"),className:"calendar-time-half-cell",children:(0,c.jsx)(I,{})})]})]})},z=ua;var Z=p(require("dayjs"),1);var ga={ru:{t:"\u0441\u0435\u0433\u043E\u0434\u043D\u044F",y:"\u0432\u0447\u0435\u0440\u0430",wa:"\u043D\u0435\u0434\u0435\u043B\u044E \u043D\u0430\u0437\u0430\u0434",ma:"\u043C\u0435\u0441\u044F\u0446 \u043D\u0430\u0437\u0430\u0434",ya:"\u0433\u043E\u0434 \u043D\u0430\u0437\u0430\u0434"},en:{t:"today",y:"yesterday",wa:"week ago",ma:"month ago",ya:"year ago"},ua:{t:"\u0441\u044C\u043E\u0433\u043E\u0434\u043D\u0456",y:"\u0432\u0447\u043E\u0440\u0430",wa:"\u0442\u0438\u0436\u0434\u0435\u043D\u044C \u0442\u043E\u043C\u0443",ma:"\u043C\u0456\u0441\u044F\u0446\u044C \u0442\u043E\u043C\u0443",ya:"\u0440\u0456\u043A \u0442\u043E\u043C\u0443"},de:{t:"heute",y:"gestern",wa:"vor 1 Woche",ma:"vor 1 Monat",ya:"vor 1 Jahr"},"zh-cn":{t:"\u4ECA\u5929",y:"\u6628\u5929",wa:"\u4E00\u5468\u524D",ma:"\u4E00\u4E2A\u6708\u524D",ya:"\u4E00\u5E74\u524D"},fr:{t:"aujourd'hui",y:"hier",wa:"il y a une semaine",ma:"il y a un mois",ya:"il y a un an"},es:{t:"hoy",y:"ayer",wa:"hace una semana",ma:"hace un mes",ya:"hace un a\xF1o"},sr:{t:"danas",y:"ju\u010De",wa:"pre nedelju dana",ma:"pre mesec dana",ya:"pre godinu dana"}},W=ga;var B=require("react/jsx-runtime"),va=[{key:"t",amount:0,unit:"day"},{key:"y",amount:1,unit:"day"},{key:"wa",amount:1,unit:"week"},{key:"ma",amount:1,unit:"month"},{key:"ya",amount:1,unit:"year"}],ba=({locale:a,changeAction:t})=>{let n=W[a]||W.en,o=(e,l)=>{t((0,Z.default)().subtract(e,l).startOf("day"))};return(0,B.jsx)("div",{className:"calendar-presets",children:va.map(({key:e,amount:l,unit:r})=>(0,B.jsx)("div",{onClick:()=>o(l,r),onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&o(l,r)},tabIndex:0,role:"button",className:"calendar-presets-preset",children:n[e]},e))})},O=ba;var f=require("react/jsx-runtime");k.default.extend(ea.default);var ka=({presets:a=!1,months:t=!0,date:n=new Date,time:o=!1,locale:e="en",onChangeDate:l,width:r=null,height:i=null,theme:h="light"})=>{let[s,y]=(0,M.useState)(!1),[g,d]=(0,M.useState)(!1),_=s?e:"en",D=(0,k.default)(n).locale(_),$=()=>d(!g),w=x=>{l?l(x.toDate()):console.warn('Must provide an "onChangeDate" function')},ta=s?Array.from({length:12},(x,U)=>(0,k.default)().locale(e).month(U).format("MMMM")):[];(0,M.useEffect)(()=>{let x=!0;return(async()=>{try{e==="en"?k.default.locale("en"):(await import(`dayjs/locale/${e}.js`),x&&k.default.locale(e))}catch(oa){console.warn(`Could not load locale: ${e}`,oa)}finally{x&&y(!0)}})(),()=>{x=!1}},[e]);let ra=s?(0,k.default)().locale(e).localeData().weekdaysMin():[];return(0,f.jsx)("div",{style:{width:r??void 0,height:i??void 0},className:(0,aa.default)("calendar",{with_time:o,with_presets:a,years_picker:g,no_months:!t}),"data-theme":h!=="light"?h:void 0,children:g?(0,f.jsx)(H,{date:D,changeAction:w,toggleYearPicker:$}):(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(L,{date:D,toggleYearPicker:$,changeAction:w}),t&&(0,f.jsx)(F,{monthsNames:ta,date:D,changeAction:w}),s&&(0,f.jsx)(K,{date:D,changeAction:w,weekdays:ra}),o&&(0,f.jsx)(z,{date:D,changeAction:w}),a&&(0,f.jsx)(O,{locale:e,changeAction:w})]})})};
|
|
1
|
+
"use strict";var na=Object.create;var N=Object.defineProperty;var la=Object.getOwnPropertyDescriptor;var ca=Object.getOwnPropertyNames;var sa=Object.getPrototypeOf,ia=Object.prototype.hasOwnProperty;var da=(a,t)=>{for(var n in t)N(a,n,{get:t[n],enumerable:!0})},G=(a,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of ca(t))!ia.call(a,e)&&e!==n&&N(a,e,{get:()=>t[e],enumerable:!(o=la(t,e))||o.enumerable});return a};var y=(a,t,n)=>(n=a!=null?na(sa(a)):{},G(t||!a||!a.__esModule?N(n,"default",{value:a,enumerable:!0}):n,a)),ma=a=>G(N({},"__esModule",{value:!0}),a);var wa={};da(wa,{Calendar:()=>ka});module.exports=ma(wa);var aa=y(require("clsx"),1),x=require("react"),w=y(require("dayjs"),1),ea=y(require("dayjs/plugin/localeData"),1),oe=require("dayjs/locale/en"),ne=require("dayjs/locale/es"),le=require("dayjs/locale/ru"),ce=require("dayjs/locale/de"),se=require("dayjs/locale/sr"),ie=require("dayjs/locale/fr");var j=y(require("dayjs"),1);var g=require("react/jsx-runtime"),R=()=>(0,g.jsx)("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:(0,g.jsx)("path",{d:"m54 30h-39.899l15.278-14.552c.8-.762.831-2.028.069-2.828-.761-.799-2.027-.831-2.828-.069l-17.448 16.62c-.755.756-1.172 1.76-1.172 2.829 0 1.068.417 2.073 1.207 2.862l17.414 16.586c.387.369.883.552 1.379.552.528 0 1.056-.208 1.449-.621.762-.8.731-2.065-.069-2.827l-15.342-14.552h39.962c1.104 0 2-.896 2-2s-.896-2-2-2z"})}),T=()=>(0,g.jsx)("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:(0,g.jsx)("path",{d:"m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s-.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z"})}),I=()=>(0,g.jsx)("svg",{viewBox:"0 0 492.002 492.002",xmlns:"http://www.w3.org/2000/svg",children:(0,g.jsx)("path",{d:"M484.136,328.473L264.988,109.329c-5.064-5.064-11.816-7.844-19.172-7.844c-7.208,0-13.964,2.78-19.02,7.844 L7.852,328.265C2.788,333.333,0,340.089,0,347.297c0,7.208,2.784,13.968,7.852,19.032l16.124,16.124 c5.064,5.064,11.824,7.86,19.032,7.86s13.964-2.796,19.032-7.86l183.852-183.852l184.056,184.064 c5.064,5.06,11.82,7.852,19.032,7.852c7.208,0,13.96-2.792,19.028-7.852l16.128-16.132 C494.624,356.041,494.624,338.965,484.136,328.473z"})}),L=()=>(0,g.jsx)("svg",{viewBox:"0 0 256 256",xmlns:"http://www.w3.org/2000/svg",children:(0,g.jsx)("polygon",{points:"225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093"})});var b=require("react/jsx-runtime"),fa=({date:a,toggleYearPicker:t,changeAction:n})=>{let o=()=>{n((0,j.default)(a).subtract(1,"year"))},e=()=>{n((0,j.default)(a).add(1,"year"))};return(0,b.jsxs)("div",{className:"calendar-years",children:[(0,b.jsx)("div",{tabIndex:0,role:"button",className:"calendar-years-arrow",onClick:o,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&o()},children:(0,b.jsx)(R,{})}),(0,b.jsx)("div",{onClick:t,className:"calendar-years-current",role:"button",tabIndex:0,children:(0,j.default)(a).format("YYYY")}),(0,b.jsx)("div",{onClick:e,role:"button",tabIndex:0,className:"calendar-years-arrow",onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&e()},children:(0,b.jsx)(T,{})})]})},H=fa;var C=require("react"),J=y(require("clsx"),1),S=y(require("dayjs"),1);var k=require("react/jsx-runtime"),pa=({toggleYearPicker:a,date:t,changeAction:n})=>{let[o,e]=(0,C.useState)((0,S.default)(t)),[l,r]=(0,C.useState)(!0),s=o.year(),h=Array.from({length:25},(d,_)=>s-12+_),i=d=>{d?.preventDefault(),n((0,S.default)(o)),a()},p=d=>{n((0,S.default)(o).year(d)),a()},v=d=>`${(Math.abs(s-d)*.1/2).toFixed(2)}s`;return(0,C.useEffect)(()=>{r(!1);let d=setTimeout(()=>r(!0),50);return()=>clearTimeout(d)},[o]),(0,k.jsxs)("div",{className:"calendar-yearPicker",onContextMenu:i,children:[(0,k.jsx)("button",{disabled:s<1925,onClick:()=>e(o.subtract(25,"y")),className:"calendar-yearPicker-arrow",children:(0,k.jsx)(R,{})}),h.map(d=>(0,k.jsx)("button",{disabled:d>2100||d<1900,onClick:()=>p(d),className:(0,J.default)("calendar-yearPicker-year",{year_anim:l,calendar_active:s===d}),style:{animationDelay:v(d),animationIterationCount:1},children:d},d)),(0,k.jsx)("button",{className:"calendar-yearPicker-arrow",disabled:s>2075,onClick:()=>e(o.add(25,"y")),children:(0,k.jsx)(T,{})})]})},A=pa;var q=y(require("clsx"),1),F=require("react/jsx-runtime"),ya=({date:a,monthsNames:t,changeAction:n})=>{let o=a.month();return(0,F.jsx)("div",{className:"calendar-months",children:t.map((e,l)=>(0,F.jsx)("div",{className:(0,q.default)("calendar-months-month",{calendar_active:l===o}),onClick:()=>n(a.month(l)),children:e},l))})},K=ya;var Q=y(require("clsx"),1),V=require("react"),M=require("react/jsx-runtime"),ha=({date:a,changeAction:t,weekdays:n})=>{let o=a.date(),e=(0,V.useMemo)(()=>{let r=a.daysInMonth();return Array.from({length:r},(s,h)=>h+1)},[a]),l=r=>{r!==o&&t(a.date(r))};return(0,M.jsxs)("div",{className:"calendar-days",children:[n.map(r=>(0,M.jsx)("div",{className:"calendar-days-header",children:r},r)),e.map(r=>(0,M.jsx)("div",{onClick:()=>l(r),onKeyDown:s=>{(s.key==="Enter"||s.key===" ")&&l(r)},tabIndex:0,role:"button",className:(0,Q.default)("calendar-days-day",{calendar_active:r===o}),children:r},r))]})},z=ha;var E=require("react"),m=y(require("dayjs"),1);var c=require("react/jsx-runtime"),ua=({date:a,changeAction:t})=>{let[n,o]=(0,E.useState)((0,m.default)(a).format("HH")),[e,l]=(0,E.useState)((0,m.default)(a).format("mm")),r=(i,p)=>{t((0,m.default)(a).add(i,p))},s=(i,p)=>{t((0,m.default)(a).subtract(i,p))},h=(i,p)=>{let v="deltaY"in i?i.deltaY:0;v<0?t((0,m.default)(a).subtract(1,p)):v>0&&t((0,m.default)(a).add(1,p))};return(0,E.useEffect)(()=>{let i=(0,m.default)(a);o(i.format("HH")),l(i.format("mm"))},[a]),(0,c.jsxs)("div",{className:"calendar-time",children:[(0,c.jsxs)("div",{className:"calendar-time-half hours",onWheel:i=>h(i,"h"),children:[(0,c.jsx)("div",{className:"calendar-time-half-cell",onClick:()=>s(1,"h"),children:(0,c.jsx)(I,{})}),(0,c.jsx)("div",{onClick:()=>s(2,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(2,"h").format("HH")}),(0,c.jsx)("div",{onClick:()=>s(1,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(1,"h").format("HH")}),(0,c.jsx)("div",{className:"calendar-time-half-cell dividerhour",children:n}),(0,c.jsx)("div",{onClick:()=>r(1,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(1,"h").format("HH")}),(0,c.jsx)("div",{onClick:()=>r(2,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(2,"h").format("HH")}),(0,c.jsx)("div",{className:"calendar-time-half-cell",onClick:()=>r(1,"h"),children:(0,c.jsx)(L,{})})]}),(0,c.jsxs)("div",{className:"calendar-time-half",onWheel:i=>h(i,"m"),children:[(0,c.jsx)("div",{className:"calendar-time-half-cell",onClick:()=>s(1,"m"),children:(0,c.jsx)(I,{})}),(0,c.jsx)("div",{onClick:()=>s(2,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(2,"m").format("mm")}),(0,c.jsx)("div",{onClick:()=>s(1,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(1,"m").format("mm")}),(0,c.jsx)("div",{className:"calendar-time-half-cell",children:e}),(0,c.jsx)("div",{onClick:()=>r(1,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(1,"m").format("mm")}),(0,c.jsx)("div",{onClick:()=>r(2,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(2,"m").format("mm")}),(0,c.jsx)("div",{onClick:()=>r(1,"m"),className:"calendar-time-half-cell",children:(0,c.jsx)(L,{})})]})]})},B=ua;var X=y(require("dayjs"),1);var ga={ru:{t:"\u0441\u0435\u0433\u043E\u0434\u043D\u044F",y:"\u0432\u0447\u0435\u0440\u0430",wa:"\u043D\u0435\u0434\u0435\u043B\u044E \u043D\u0430\u0437\u0430\u0434",ma:"\u043C\u0435\u0441\u044F\u0446 \u043D\u0430\u0437\u0430\u0434",ya:"\u0433\u043E\u0434 \u043D\u0430\u0437\u0430\u0434"},en:{t:"today",y:"yesterday",wa:"week ago",ma:"month ago",ya:"year ago"},ua:{t:"\u0441\u044C\u043E\u0433\u043E\u0434\u043D\u0456",y:"\u0432\u0447\u043E\u0440\u0430",wa:"\u0442\u0438\u0436\u0434\u0435\u043D\u044C \u0442\u043E\u043C\u0443",ma:"\u043C\u0456\u0441\u044F\u0446\u044C \u0442\u043E\u043C\u0443",ya:"\u0440\u0456\u043A \u0442\u043E\u043C\u0443"},de:{t:"heute",y:"gestern",wa:"vor 1 Woche",ma:"vor 1 Monat",ya:"vor 1 Jahr"},"zh-cn":{t:"\u4ECA\u5929",y:"\u6628\u5929",wa:"\u4E00\u5468\u524D",ma:"\u4E00\u4E2A\u6708\u524D",ya:"\u4E00\u5E74\u524D"},fr:{t:"aujourd'hui",y:"hier",wa:"il y a une semaine",ma:"il y a un mois",ya:"il y a un an"},es:{t:"hoy",y:"ayer",wa:"hace una semana",ma:"hace un mes",ya:"hace un a\xF1o"},sr:{t:"danas",y:"ju\u010De",wa:"pre nedelju dana",ma:"pre mesec dana",ya:"pre godinu dana"}},W=ga;var O=require("react/jsx-runtime"),va=[{key:"t",amount:0,unit:"day"},{key:"y",amount:1,unit:"day"},{key:"wa",amount:1,unit:"week"},{key:"ma",amount:1,unit:"month"},{key:"ya",amount:1,unit:"year"}],ba=({locale:a,changeAction:t})=>{let n=W[a]||W.en,o=(e,l)=>{t((0,X.default)().subtract(e,l).startOf("day"))};return(0,O.jsx)("div",{className:"calendar-presets",children:va.map(({key:e,amount:l,unit:r})=>(0,O.jsx)("div",{onClick:()=>o(l,r),onKeyDown:s=>{(s.key==="Enter"||s.key===" ")&&o(l,r)},tabIndex:0,role:"button",className:"calendar-presets-preset",children:n[e]},e))})},$=ba;var Z=`
|
|
2
|
+
:root {
|
|
3
|
+
--cal-accent: #ffffff;
|
|
4
|
+
--cal-backdrop: #ffffff;
|
|
5
|
+
--cal-highlight: #1a1a1c;
|
|
6
|
+
--cal-tone: #f4f4f4;
|
|
7
|
+
--cal-color-text: #1a1a1c;
|
|
8
|
+
--cal-border-color: #f0f0f0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[data-theme="dark"] {
|
|
12
|
+
--cal-accent: #1a1a1c;
|
|
13
|
+
--cal-backdrop: #1a1a1c;
|
|
14
|
+
--cal-highlight: #ffffff;
|
|
15
|
+
--cal-tone: #2d2d2d;
|
|
16
|
+
--cal-color-text: #f0f0f0;
|
|
17
|
+
--cal-border-color: #333333;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
[data-theme="midnight"] {
|
|
21
|
+
--cal-accent: #141721;
|
|
22
|
+
--cal-backdrop: #1e2333;
|
|
23
|
+
--cal-highlight: #3559e0;
|
|
24
|
+
--cal-tone: #252a3d;
|
|
25
|
+
--cal-color-text: #ffffff;
|
|
26
|
+
--cal-border-color: #2d3246;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
[data-theme="sandstone"] {
|
|
30
|
+
--cal-accent: #1c1a17;
|
|
31
|
+
--cal-backdrop: #24211c;
|
|
32
|
+
--cal-highlight: #e3ae5c;
|
|
33
|
+
--cal-tone: #332f28;
|
|
34
|
+
--cal-color-text: #fdfbf7;
|
|
35
|
+
--cal-border-color: #3d372e;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[data-theme="mint_blue"] {
|
|
39
|
+
--cal-accent: #ffffff;
|
|
40
|
+
--cal-backdrop: #f8f9fc;
|
|
41
|
+
--cal-highlight: #60d276;
|
|
42
|
+
--cal-tone: #eaedf4;
|
|
43
|
+
--cal-color-text: #171827;
|
|
44
|
+
--cal-border-color: #eef0f5;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.calendar {
|
|
48
|
+
min-width: 450px;
|
|
49
|
+
min-height: 10vh;
|
|
50
|
+
max-height: 100vh;
|
|
51
|
+
background: var(--cal-accent);
|
|
52
|
+
color: var(--cal-color-text);
|
|
53
|
+
display: grid;
|
|
54
|
+
grid-template-columns: 2fr 5fr;
|
|
55
|
+
grid-template-rows: 60px auto;
|
|
56
|
+
grid-template-areas: "YY YY" "MM DD";
|
|
57
|
+
user-select: none;
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
font-family:
|
|
60
|
+
system-ui,
|
|
61
|
+
-apple-system,
|
|
62
|
+
sans-serif;
|
|
63
|
+
|
|
64
|
+
border-radius: 16px;
|
|
65
|
+
border: 1px solid var(--cal-border-color);
|
|
66
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
|
|
69
|
+
&.with_presets:not(.with_time) {
|
|
70
|
+
grid-template-rows: 60px auto 50px;
|
|
71
|
+
grid-template-areas: "YY YY" "MM DD" "PRESETS PRESETS";
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&.with_time:not(.with_presets) {
|
|
75
|
+
grid-template-columns: 2fr 5fr 2fr;
|
|
76
|
+
grid-template-areas: "YY YY YY" "MM DD TIME";
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&.with_time.with_presets {
|
|
80
|
+
grid-template-columns: 2fr 5fr 2fr;
|
|
81
|
+
grid-template-rows: 60px auto 50px;
|
|
82
|
+
grid-template-areas: "YY YY YY" "MM DD TIME" "PRESETS PRESETS PRESETS";
|
|
83
|
+
}
|
|
84
|
+
&.no_months {
|
|
85
|
+
grid-template-columns: 1fr;
|
|
86
|
+
|
|
87
|
+
grid-template-areas: "YY" "DD";
|
|
88
|
+
|
|
89
|
+
&.with_time {
|
|
90
|
+
grid-template-columns: 5fr 2fr;
|
|
91
|
+
grid-template-areas: "YY YY" "DD TIME";
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&.with_presets {
|
|
95
|
+
grid-template-areas: "YY" "DD" "PRESETS";
|
|
96
|
+
|
|
97
|
+
&.with_time {
|
|
98
|
+
grid-template-areas: "YY YY" "DD TIME" "PRESETS PRESETS";
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&.years_picker {
|
|
104
|
+
grid-template-columns: 1fr !important;
|
|
105
|
+
grid-template-rows: 1fr !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&
|
|
109
|
+
:is(
|
|
110
|
+
.calendar-button,
|
|
111
|
+
.calendar-yearPicker-arrow,
|
|
112
|
+
.calendar-yearPicker-year,
|
|
113
|
+
.calendar-presets-preset,
|
|
114
|
+
.calendar-time-half-cell,
|
|
115
|
+
.calendar-years-arrow,
|
|
116
|
+
.calendar-months-month,
|
|
117
|
+
.calendar-days-day
|
|
118
|
+
) {
|
|
119
|
+
border: none;
|
|
120
|
+
color: var(--cal-color-text);
|
|
121
|
+
display: flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
border-radius: 8px;
|
|
125
|
+
transition: all 0.2s ease;
|
|
126
|
+
|
|
127
|
+
&:not([disabled]):is(:hover, :active) {
|
|
128
|
+
background: var(--cal-tone);
|
|
129
|
+
cursor: pointer;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&[disabled] {
|
|
133
|
+
cursor: not-allowed;
|
|
134
|
+
filter: opacity(0.4);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
& svg {
|
|
138
|
+
width: 23px;
|
|
139
|
+
height: 23px;
|
|
140
|
+
fill: currentColor;
|
|
141
|
+
stroke-width: 1.4;
|
|
142
|
+
flex-shrink: 0;
|
|
143
|
+
display: block;
|
|
144
|
+
margin: auto;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.calendar-years {
|
|
150
|
+
grid-area: YY;
|
|
151
|
+
display: flex;
|
|
152
|
+
background: var(--cal-accent);
|
|
153
|
+
border-bottom: 1px solid var(--cal-border-color);
|
|
154
|
+
justify-content: space-between;
|
|
155
|
+
|
|
156
|
+
& .calendar-years-current {
|
|
157
|
+
flex: 4;
|
|
158
|
+
font: bold 21px system-ui;
|
|
159
|
+
display: flex;
|
|
160
|
+
align-items: center;
|
|
161
|
+
justify-content: center;
|
|
162
|
+
|
|
163
|
+
border-radius: 8px;
|
|
164
|
+
transition:
|
|
165
|
+
background 0.2s ease,
|
|
166
|
+
color 0.2s ease;
|
|
167
|
+
|
|
168
|
+
&:hover {
|
|
169
|
+
cursor: pointer;
|
|
170
|
+
background: var(--cal-tone);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
& .calendar-years-arrow {
|
|
174
|
+
flex-grow: 1;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.calendar-months {
|
|
179
|
+
grid-area: MM;
|
|
180
|
+
display: grid;
|
|
181
|
+
grid-template-columns: repeat(2, 1fr);
|
|
182
|
+
grid-template-rows: repeat(6, 1fr);
|
|
183
|
+
padding: 15px 10px;
|
|
184
|
+
gap: 4px;
|
|
185
|
+
border-right: 1px solid var(--cal-border-color);
|
|
186
|
+
background: var(--cal-backdrop);
|
|
187
|
+
|
|
188
|
+
& .calendar-months-month {
|
|
189
|
+
font-size: 13px;
|
|
190
|
+
padding: 10px 5px;
|
|
191
|
+
justify-content: center;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.calendar-days {
|
|
196
|
+
grid-area: DD;
|
|
197
|
+
background: var(--cal-backdrop);
|
|
198
|
+
display: grid;
|
|
199
|
+
grid-template-columns: repeat(7, 1fr);
|
|
200
|
+
padding: 15px;
|
|
201
|
+
gap: 5px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.calendar-time {
|
|
205
|
+
grid-area: TIME;
|
|
206
|
+
display: flex;
|
|
207
|
+
padding-left: 1px;
|
|
208
|
+
border-left: 1px solid var(--cal-border-color);
|
|
209
|
+
|
|
210
|
+
& .calendar-time-half {
|
|
211
|
+
flex: 1;
|
|
212
|
+
width: 50%;
|
|
213
|
+
display: grid;
|
|
214
|
+
grid-template-rows: repeat(7, 1fr);
|
|
215
|
+
background: var(--cal-backdrop);
|
|
216
|
+
|
|
217
|
+
& .calendar-time-half-cell:is(:first-child, :last-child) {
|
|
218
|
+
background: var(--cal-accent);
|
|
219
|
+
}
|
|
220
|
+
& .calendar-time-half-cell:nth-child(4) {
|
|
221
|
+
position: relative;
|
|
222
|
+
background: var(--cal-highlight);
|
|
223
|
+
color: var(--cal-accent);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
.calendar-days-header {
|
|
228
|
+
display: flex;
|
|
229
|
+
align-items: center;
|
|
230
|
+
justify-content: center;
|
|
231
|
+
font-size: 12px;
|
|
232
|
+
font-weight: 600;
|
|
233
|
+
color: var(--cal-color-text);
|
|
234
|
+
opacity: 0.5;
|
|
235
|
+
text-transform: uppercase;
|
|
236
|
+
user-select: none;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.calendar-presets {
|
|
240
|
+
grid-area: PRESETS;
|
|
241
|
+
display: flex;
|
|
242
|
+
|
|
243
|
+
border-top: 1px solid var(--cal-border-color);
|
|
244
|
+
padding: 5px 7px;
|
|
245
|
+
gap: 5px;
|
|
246
|
+
|
|
247
|
+
& .calendar-presets-preset {
|
|
248
|
+
flex: 1;
|
|
249
|
+
text-align: center;
|
|
250
|
+
font-size: 13px;
|
|
251
|
+
padding: 3px;
|
|
252
|
+
background: var(--cal-tone);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.calendar-yearPicker {
|
|
257
|
+
background: var(--cal-backdrop);
|
|
258
|
+
display: grid;
|
|
259
|
+
grid-template-columns: 50px repeat(5, 1fr) 50px;
|
|
260
|
+
grid-template-rows: repeat(5, 1fr);
|
|
261
|
+
animation: fadeIn 0.2s linear forwards;
|
|
262
|
+
|
|
263
|
+
& .calendar-yearPicker-arrow {
|
|
264
|
+
background: var(--cal-accent);
|
|
265
|
+
&:first-child {
|
|
266
|
+
grid-area: 1/1/6/2;
|
|
267
|
+
}
|
|
268
|
+
&:last-child {
|
|
269
|
+
grid-area: 1/7/6/7;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
& .calendar-yearPicker-year {
|
|
274
|
+
background: var(--cal-backdrop);
|
|
275
|
+
opacity: 0;
|
|
276
|
+
&.year_anim {
|
|
277
|
+
animation: fadeIn 0.3s forwards;
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.calendar_active {
|
|
283
|
+
background: var(--cal-highlight) !important;
|
|
284
|
+
color: var(--cal-accent) !important;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.dividerhour::after {
|
|
288
|
+
content: ":";
|
|
289
|
+
position: absolute;
|
|
290
|
+
top: 50%;
|
|
291
|
+
transform: translateY(-55%);
|
|
292
|
+
right: 0;
|
|
293
|
+
animation: fadeIn 1.1s infinite;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
@keyframes fadeIn {
|
|
297
|
+
from {
|
|
298
|
+
opacity: 0;
|
|
299
|
+
}
|
|
300
|
+
to {
|
|
301
|
+
opacity: 1;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
`;var f=require("react/jsx-runtime");w.default.extend(ea.default);var ka=({presets:a=!1,months:t=!0,date:n=new Date,time:o=!1,locale:e="en",onChangeDate:l,width:r=null,height:s=null,theme:h="light"})=>{let[i,p]=(0,x.useState)(!1),[v,d]=(0,x.useState)(!1),_=i?e:"en",P=(0,w.default)(n).locale(_),U=()=>d(!v);(0,x.useInsertionEffect)(()=>{let u="react-calendar-datetime-styles";if(typeof document<"u"&&!document.getElementById(u)){let Y=document.createElement("style");Y.id=u,Y.innerHTML=Z,document.head.appendChild(Y)}},[]);let D=u=>{l?l(u.toDate()):console.warn('Must provide an "onChangeDate" function')},ta=i?Array.from({length:12},(u,Y)=>(0,w.default)().locale(e).month(Y).format("MMMM")):[];(0,x.useEffect)(()=>{let u=!0;return(async()=>{try{e==="en"?w.default.locale("en"):(await import(`dayjs/locale/${e}.js`),u&&w.default.locale(e))}catch(oa){console.warn(`Could not load locale: ${e}`,oa)}finally{u&&p(!0)}})(),()=>{u=!1}},[e]);let ra=i?(0,w.default)().locale(e).localeData().weekdaysMin():[];return(0,f.jsx)("div",{style:{width:r??void 0,height:s??void 0},className:(0,aa.default)("calendar",{with_time:o,with_presets:a,years_picker:v,no_months:!t}),"data-theme":h!=="light"?h:void 0,children:v?(0,f.jsx)(A,{date:P,changeAction:D,toggleYearPicker:U}):(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(H,{date:P,toggleYearPicker:U,changeAction:D}),t&&(0,f.jsx)(K,{monthsNames:ta,date:P,changeAction:D}),i&&(0,f.jsx)(z,{date:P,changeAction:D,weekdays:ra}),o&&(0,f.jsx)(B,{date:P,changeAction:D}),a&&(0,f.jsx)($,{locale:e,changeAction:D})]})})};
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,304 @@
|
|
|
1
|
-
import ya from"clsx";import{useEffect as ha,useState as
|
|
2
|
-
|
|
1
|
+
import ya from"clsx";import{useEffect as ha,useInsertionEffect as ua,useState as U}from"react";import k from"dayjs";import ga from"dayjs/plugin/localeData";import"dayjs/locale/en";import"dayjs/locale/es";import"dayjs/locale/ru";import"dayjs/locale/de";import"dayjs/locale/sr";import"dayjs/locale/fr";import N from"dayjs";import{jsx as u}from"react/jsx-runtime";var Y=()=>u("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:u("path",{d:"m54 30h-39.899l15.278-14.552c.8-.762.831-2.028.069-2.828-.761-.799-2.027-.831-2.828-.069l-17.448 16.62c-.755.756-1.172 1.76-1.172 2.829 0 1.068.417 2.073 1.207 2.862l17.414 16.586c.387.369.883.552 1.379.552.528 0 1.056-.208 1.449-.621.762-.8.731-2.065-.069-2.827l-15.342-14.552h39.962c1.104 0 2-.896 2-2s-.896-2-2-2z"})}),P=()=>u("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:u("path",{d:"m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s-.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z"})}),M=()=>u("svg",{viewBox:"0 0 492.002 492.002",xmlns:"http://www.w3.org/2000/svg",children:u("path",{d:"M484.136,328.473L264.988,109.329c-5.064-5.064-11.816-7.844-19.172-7.844c-7.208,0-13.964,2.78-19.02,7.844 L7.852,328.265C2.788,333.333,0,340.089,0,347.297c0,7.208,2.784,13.968,7.852,19.032l16.124,16.124 c5.064,5.064,11.824,7.86,19.032,7.86s13.964-2.796,19.032-7.86l183.852-183.852l184.056,184.064 c5.064,5.06,11.82,7.852,19.032,7.852c7.208,0,13.96-2.792,19.028-7.852l16.128-16.132 C494.624,356.041,494.624,338.965,484.136,328.473z"})}),E=()=>u("svg",{viewBox:"0 0 256 256",xmlns:"http://www.w3.org/2000/svg",children:u("polygon",{points:"225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093"})});import{jsx as x,jsxs as V}from"react/jsx-runtime";var Q=({date:a,toggleYearPicker:i,changeAction:d})=>{let o=()=>{d(N(a).subtract(1,"year"))},t=()=>{d(N(a).add(1,"year"))};return V("div",{className:"calendar-years",children:[x("div",{tabIndex:0,role:"button",className:"calendar-years-arrow",onClick:o,onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&o()},children:x(Y,{})}),x("div",{onClick:i,className:"calendar-years-current",role:"button",tabIndex:0,children:N(a).format("YYYY")}),x("div",{onClick:t,role:"button",tabIndex:0,className:"calendar-years-arrow",onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&t()},children:x(P,{})})]})},R=Q;import{useEffect as X,useState as K}from"react";import Z from"clsx";import T from"dayjs";import{jsx as D,jsxs as ea}from"react/jsx-runtime";var aa=({toggleYearPicker:a,date:i,changeAction:d})=>{let[o,t]=K(T(i)),[r,e]=K(!0),n=o.year(),p=Array.from({length:25},(c,C)=>n-12+C),l=c=>{c?.preventDefault(),d(T(o)),a()},f=c=>{d(T(o).year(c)),a()},h=c=>`${(Math.abs(n-c)*.1/2).toFixed(2)}s`;return X(()=>{e(!1);let c=setTimeout(()=>e(!0),50);return()=>clearTimeout(c)},[o]),ea("div",{className:"calendar-yearPicker",onContextMenu:l,children:[D("button",{disabled:n<1925,onClick:()=>t(o.subtract(25,"y")),className:"calendar-yearPicker-arrow",children:D(Y,{})}),p.map(c=>D("button",{disabled:c>2100||c<1900,onClick:()=>f(c),className:Z("calendar-yearPicker-year",{year_anim:r,calendar_active:n===c}),style:{animationDelay:h(c),animationIterationCount:1},children:c},c)),D("button",{className:"calendar-yearPicker-arrow",disabled:n>2075,onClick:()=>t(o.add(25,"y")),children:D(P,{})})]})},j=aa;import ta from"clsx";import{jsx as z}from"react/jsx-runtime";var ra=({date:a,monthsNames:i,changeAction:d})=>{let o=a.month();return z("div",{className:"calendar-months",children:i.map((t,r)=>z("div",{className:ta("calendar-months-month",{calendar_active:r===o}),onClick:()=>d(a.month(r)),children:t},r))})},S=ra;import oa from"clsx";import{useMemo as na}from"react";import{jsx as B,jsxs as ca}from"react/jsx-runtime";var la=({date:a,changeAction:i,weekdays:d})=>{let o=a.date(),t=na(()=>{let e=a.daysInMonth();return Array.from({length:e},(n,p)=>p+1)},[a]),r=e=>{e!==o&&i(a.date(e))};return ca("div",{className:"calendar-days",children:[d.map(e=>B("div",{className:"calendar-days-header",children:e},e)),t.map(e=>B("div",{onClick:()=>r(e),onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&r(e)},tabIndex:0,role:"button",className:oa("calendar-days-day",{calendar_active:e===o}),children:e},e))]})},_=la;import{useEffect as sa,useState as W}from"react";import m from"dayjs";import{jsx as s,jsxs as I}from"react/jsx-runtime";var ia=({date:a,changeAction:i})=>{let[d,o]=W(m(a).format("HH")),[t,r]=W(m(a).format("mm")),e=(l,f)=>{i(m(a).add(l,f))},n=(l,f)=>{i(m(a).subtract(l,f))},p=(l,f)=>{let h="deltaY"in l?l.deltaY:0;h<0?i(m(a).subtract(1,f)):h>0&&i(m(a).add(1,f))};return sa(()=>{let l=m(a);o(l.format("HH")),r(l.format("mm"))},[a]),I("div",{className:"calendar-time",children:[I("div",{className:"calendar-time-half hours",onWheel:l=>p(l,"h"),children:[s("div",{className:"calendar-time-half-cell",onClick:()=>n(1,"h"),children:s(M,{})}),s("div",{onClick:()=>n(2,"h"),className:"calendar-time-half-cell",children:m(a).subtract(2,"h").format("HH")}),s("div",{onClick:()=>n(1,"h"),className:"calendar-time-half-cell",children:m(a).subtract(1,"h").format("HH")}),s("div",{className:"calendar-time-half-cell dividerhour",children:d}),s("div",{onClick:()=>e(1,"h"),className:"calendar-time-half-cell",children:m(a).add(1,"h").format("HH")}),s("div",{onClick:()=>e(2,"h"),className:"calendar-time-half-cell",children:m(a).add(2,"h").format("HH")}),s("div",{className:"calendar-time-half-cell",onClick:()=>e(1,"h"),children:s(E,{})})]}),I("div",{className:"calendar-time-half",onWheel:l=>p(l,"m"),children:[s("div",{className:"calendar-time-half-cell",onClick:()=>n(1,"m"),children:s(M,{})}),s("div",{onClick:()=>n(2,"m"),className:"calendar-time-half-cell",children:m(a).subtract(2,"m").format("mm")}),s("div",{onClick:()=>n(1,"m"),className:"calendar-time-half-cell",children:m(a).subtract(1,"m").format("mm")}),s("div",{className:"calendar-time-half-cell",children:t}),s("div",{onClick:()=>e(1,"m"),className:"calendar-time-half-cell",children:m(a).add(1,"m").format("mm")}),s("div",{onClick:()=>e(2,"m"),className:"calendar-time-half-cell",children:m(a).add(2,"m").format("mm")}),s("div",{onClick:()=>e(1,"m"),className:"calendar-time-half-cell",children:s(E,{})})]})]})},L=ia;import ma from"dayjs";var da={ru:{t:"\u0441\u0435\u0433\u043E\u0434\u043D\u044F",y:"\u0432\u0447\u0435\u0440\u0430",wa:"\u043D\u0435\u0434\u0435\u043B\u044E \u043D\u0430\u0437\u0430\u0434",ma:"\u043C\u0435\u0441\u044F\u0446 \u043D\u0430\u0437\u0430\u0434",ya:"\u0433\u043E\u0434 \u043D\u0430\u0437\u0430\u0434"},en:{t:"today",y:"yesterday",wa:"week ago",ma:"month ago",ya:"year ago"},ua:{t:"\u0441\u044C\u043E\u0433\u043E\u0434\u043D\u0456",y:"\u0432\u0447\u043E\u0440\u0430",wa:"\u0442\u0438\u0436\u0434\u0435\u043D\u044C \u0442\u043E\u043C\u0443",ma:"\u043C\u0456\u0441\u044F\u0446\u044C \u0442\u043E\u043C\u0443",ya:"\u0440\u0456\u043A \u0442\u043E\u043C\u0443"},de:{t:"heute",y:"gestern",wa:"vor 1 Woche",ma:"vor 1 Monat",ya:"vor 1 Jahr"},"zh-cn":{t:"\u4ECA\u5929",y:"\u6628\u5929",wa:"\u4E00\u5468\u524D",ma:"\u4E00\u4E2A\u6708\u524D",ya:"\u4E00\u5E74\u524D"},fr:{t:"aujourd'hui",y:"hier",wa:"il y a une semaine",ma:"il y a un mois",ya:"il y a un an"},es:{t:"hoy",y:"ayer",wa:"hace una semana",ma:"hace un mes",ya:"hace un a\xF1o"},sr:{t:"danas",y:"ju\u010De",wa:"pre nedelju dana",ma:"pre mesec dana",ya:"pre godinu dana"}},H=da;import{jsx as O}from"react/jsx-runtime";var fa=[{key:"t",amount:0,unit:"day"},{key:"y",amount:1,unit:"day"},{key:"wa",amount:1,unit:"week"},{key:"ma",amount:1,unit:"month"},{key:"ya",amount:1,unit:"year"}],pa=({locale:a,changeAction:i})=>{let d=H[a]||H.en,o=(t,r)=>{i(ma().subtract(t,r).startOf("day"))};return O("div",{className:"calendar-presets",children:fa.map(({key:t,amount:r,unit:e})=>O("div",{onClick:()=>o(r,e),onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&o(r,e)},tabIndex:0,role:"button",className:"calendar-presets-preset",children:d[t]},t))})},A=pa;var $=`
|
|
2
|
+
:root {
|
|
3
|
+
--cal-accent: #ffffff;
|
|
4
|
+
--cal-backdrop: #ffffff;
|
|
5
|
+
--cal-highlight: #1a1a1c;
|
|
6
|
+
--cal-tone: #f4f4f4;
|
|
7
|
+
--cal-color-text: #1a1a1c;
|
|
8
|
+
--cal-border-color: #f0f0f0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[data-theme="dark"] {
|
|
12
|
+
--cal-accent: #1a1a1c;
|
|
13
|
+
--cal-backdrop: #1a1a1c;
|
|
14
|
+
--cal-highlight: #ffffff;
|
|
15
|
+
--cal-tone: #2d2d2d;
|
|
16
|
+
--cal-color-text: #f0f0f0;
|
|
17
|
+
--cal-border-color: #333333;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
[data-theme="midnight"] {
|
|
21
|
+
--cal-accent: #141721;
|
|
22
|
+
--cal-backdrop: #1e2333;
|
|
23
|
+
--cal-highlight: #3559e0;
|
|
24
|
+
--cal-tone: #252a3d;
|
|
25
|
+
--cal-color-text: #ffffff;
|
|
26
|
+
--cal-border-color: #2d3246;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
[data-theme="sandstone"] {
|
|
30
|
+
--cal-accent: #1c1a17;
|
|
31
|
+
--cal-backdrop: #24211c;
|
|
32
|
+
--cal-highlight: #e3ae5c;
|
|
33
|
+
--cal-tone: #332f28;
|
|
34
|
+
--cal-color-text: #fdfbf7;
|
|
35
|
+
--cal-border-color: #3d372e;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[data-theme="mint_blue"] {
|
|
39
|
+
--cal-accent: #ffffff;
|
|
40
|
+
--cal-backdrop: #f8f9fc;
|
|
41
|
+
--cal-highlight: #60d276;
|
|
42
|
+
--cal-tone: #eaedf4;
|
|
43
|
+
--cal-color-text: #171827;
|
|
44
|
+
--cal-border-color: #eef0f5;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.calendar {
|
|
48
|
+
min-width: 450px;
|
|
49
|
+
min-height: 10vh;
|
|
50
|
+
max-height: 100vh;
|
|
51
|
+
background: var(--cal-accent);
|
|
52
|
+
color: var(--cal-color-text);
|
|
53
|
+
display: grid;
|
|
54
|
+
grid-template-columns: 2fr 5fr;
|
|
55
|
+
grid-template-rows: 60px auto;
|
|
56
|
+
grid-template-areas: "YY YY" "MM DD";
|
|
57
|
+
user-select: none;
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
font-family:
|
|
60
|
+
system-ui,
|
|
61
|
+
-apple-system,
|
|
62
|
+
sans-serif;
|
|
63
|
+
|
|
64
|
+
border-radius: 16px;
|
|
65
|
+
border: 1px solid var(--cal-border-color);
|
|
66
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
|
|
69
|
+
&.with_presets:not(.with_time) {
|
|
70
|
+
grid-template-rows: 60px auto 50px;
|
|
71
|
+
grid-template-areas: "YY YY" "MM DD" "PRESETS PRESETS";
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&.with_time:not(.with_presets) {
|
|
75
|
+
grid-template-columns: 2fr 5fr 2fr;
|
|
76
|
+
grid-template-areas: "YY YY YY" "MM DD TIME";
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&.with_time.with_presets {
|
|
80
|
+
grid-template-columns: 2fr 5fr 2fr;
|
|
81
|
+
grid-template-rows: 60px auto 50px;
|
|
82
|
+
grid-template-areas: "YY YY YY" "MM DD TIME" "PRESETS PRESETS PRESETS";
|
|
83
|
+
}
|
|
84
|
+
&.no_months {
|
|
85
|
+
grid-template-columns: 1fr;
|
|
86
|
+
|
|
87
|
+
grid-template-areas: "YY" "DD";
|
|
88
|
+
|
|
89
|
+
&.with_time {
|
|
90
|
+
grid-template-columns: 5fr 2fr;
|
|
91
|
+
grid-template-areas: "YY YY" "DD TIME";
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&.with_presets {
|
|
95
|
+
grid-template-areas: "YY" "DD" "PRESETS";
|
|
96
|
+
|
|
97
|
+
&.with_time {
|
|
98
|
+
grid-template-areas: "YY YY" "DD TIME" "PRESETS PRESETS";
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&.years_picker {
|
|
104
|
+
grid-template-columns: 1fr !important;
|
|
105
|
+
grid-template-rows: 1fr !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&
|
|
109
|
+
:is(
|
|
110
|
+
.calendar-button,
|
|
111
|
+
.calendar-yearPicker-arrow,
|
|
112
|
+
.calendar-yearPicker-year,
|
|
113
|
+
.calendar-presets-preset,
|
|
114
|
+
.calendar-time-half-cell,
|
|
115
|
+
.calendar-years-arrow,
|
|
116
|
+
.calendar-months-month,
|
|
117
|
+
.calendar-days-day
|
|
118
|
+
) {
|
|
119
|
+
border: none;
|
|
120
|
+
color: var(--cal-color-text);
|
|
121
|
+
display: flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
border-radius: 8px;
|
|
125
|
+
transition: all 0.2s ease;
|
|
126
|
+
|
|
127
|
+
&:not([disabled]):is(:hover, :active) {
|
|
128
|
+
background: var(--cal-tone);
|
|
129
|
+
cursor: pointer;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&[disabled] {
|
|
133
|
+
cursor: not-allowed;
|
|
134
|
+
filter: opacity(0.4);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
& svg {
|
|
138
|
+
width: 23px;
|
|
139
|
+
height: 23px;
|
|
140
|
+
fill: currentColor;
|
|
141
|
+
stroke-width: 1.4;
|
|
142
|
+
flex-shrink: 0;
|
|
143
|
+
display: block;
|
|
144
|
+
margin: auto;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.calendar-years {
|
|
150
|
+
grid-area: YY;
|
|
151
|
+
display: flex;
|
|
152
|
+
background: var(--cal-accent);
|
|
153
|
+
border-bottom: 1px solid var(--cal-border-color);
|
|
154
|
+
justify-content: space-between;
|
|
155
|
+
|
|
156
|
+
& .calendar-years-current {
|
|
157
|
+
flex: 4;
|
|
158
|
+
font: bold 21px system-ui;
|
|
159
|
+
display: flex;
|
|
160
|
+
align-items: center;
|
|
161
|
+
justify-content: center;
|
|
162
|
+
|
|
163
|
+
border-radius: 8px;
|
|
164
|
+
transition:
|
|
165
|
+
background 0.2s ease,
|
|
166
|
+
color 0.2s ease;
|
|
167
|
+
|
|
168
|
+
&:hover {
|
|
169
|
+
cursor: pointer;
|
|
170
|
+
background: var(--cal-tone);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
& .calendar-years-arrow {
|
|
174
|
+
flex-grow: 1;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.calendar-months {
|
|
179
|
+
grid-area: MM;
|
|
180
|
+
display: grid;
|
|
181
|
+
grid-template-columns: repeat(2, 1fr);
|
|
182
|
+
grid-template-rows: repeat(6, 1fr);
|
|
183
|
+
padding: 15px 10px;
|
|
184
|
+
gap: 4px;
|
|
185
|
+
border-right: 1px solid var(--cal-border-color);
|
|
186
|
+
background: var(--cal-backdrop);
|
|
187
|
+
|
|
188
|
+
& .calendar-months-month {
|
|
189
|
+
font-size: 13px;
|
|
190
|
+
padding: 10px 5px;
|
|
191
|
+
justify-content: center;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.calendar-days {
|
|
196
|
+
grid-area: DD;
|
|
197
|
+
background: var(--cal-backdrop);
|
|
198
|
+
display: grid;
|
|
199
|
+
grid-template-columns: repeat(7, 1fr);
|
|
200
|
+
padding: 15px;
|
|
201
|
+
gap: 5px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.calendar-time {
|
|
205
|
+
grid-area: TIME;
|
|
206
|
+
display: flex;
|
|
207
|
+
padding-left: 1px;
|
|
208
|
+
border-left: 1px solid var(--cal-border-color);
|
|
209
|
+
|
|
210
|
+
& .calendar-time-half {
|
|
211
|
+
flex: 1;
|
|
212
|
+
width: 50%;
|
|
213
|
+
display: grid;
|
|
214
|
+
grid-template-rows: repeat(7, 1fr);
|
|
215
|
+
background: var(--cal-backdrop);
|
|
216
|
+
|
|
217
|
+
& .calendar-time-half-cell:is(:first-child, :last-child) {
|
|
218
|
+
background: var(--cal-accent);
|
|
219
|
+
}
|
|
220
|
+
& .calendar-time-half-cell:nth-child(4) {
|
|
221
|
+
position: relative;
|
|
222
|
+
background: var(--cal-highlight);
|
|
223
|
+
color: var(--cal-accent);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
.calendar-days-header {
|
|
228
|
+
display: flex;
|
|
229
|
+
align-items: center;
|
|
230
|
+
justify-content: center;
|
|
231
|
+
font-size: 12px;
|
|
232
|
+
font-weight: 600;
|
|
233
|
+
color: var(--cal-color-text);
|
|
234
|
+
opacity: 0.5;
|
|
235
|
+
text-transform: uppercase;
|
|
236
|
+
user-select: none;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.calendar-presets {
|
|
240
|
+
grid-area: PRESETS;
|
|
241
|
+
display: flex;
|
|
242
|
+
|
|
243
|
+
border-top: 1px solid var(--cal-border-color);
|
|
244
|
+
padding: 5px 7px;
|
|
245
|
+
gap: 5px;
|
|
246
|
+
|
|
247
|
+
& .calendar-presets-preset {
|
|
248
|
+
flex: 1;
|
|
249
|
+
text-align: center;
|
|
250
|
+
font-size: 13px;
|
|
251
|
+
padding: 3px;
|
|
252
|
+
background: var(--cal-tone);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.calendar-yearPicker {
|
|
257
|
+
background: var(--cal-backdrop);
|
|
258
|
+
display: grid;
|
|
259
|
+
grid-template-columns: 50px repeat(5, 1fr) 50px;
|
|
260
|
+
grid-template-rows: repeat(5, 1fr);
|
|
261
|
+
animation: fadeIn 0.2s linear forwards;
|
|
262
|
+
|
|
263
|
+
& .calendar-yearPicker-arrow {
|
|
264
|
+
background: var(--cal-accent);
|
|
265
|
+
&:first-child {
|
|
266
|
+
grid-area: 1/1/6/2;
|
|
267
|
+
}
|
|
268
|
+
&:last-child {
|
|
269
|
+
grid-area: 1/7/6/7;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
& .calendar-yearPicker-year {
|
|
274
|
+
background: var(--cal-backdrop);
|
|
275
|
+
opacity: 0;
|
|
276
|
+
&.year_anim {
|
|
277
|
+
animation: fadeIn 0.3s forwards;
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.calendar_active {
|
|
283
|
+
background: var(--cal-highlight) !important;
|
|
284
|
+
color: var(--cal-accent) !important;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.dividerhour::after {
|
|
288
|
+
content: ":";
|
|
289
|
+
position: absolute;
|
|
290
|
+
top: 50%;
|
|
291
|
+
transform: translateY(-55%);
|
|
292
|
+
right: 0;
|
|
293
|
+
animation: fadeIn 1.1s infinite;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
@keyframes fadeIn {
|
|
297
|
+
from {
|
|
298
|
+
opacity: 0;
|
|
299
|
+
}
|
|
300
|
+
to {
|
|
301
|
+
opacity: 1;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
`;import{Fragment as va,jsx as g,jsxs as ba}from"react/jsx-runtime";k.extend(ga);var Re=({presets:a=!1,months:i=!0,date:d=new Date,time:o=!1,locale:t="en",onChangeDate:r,width:e=null,height:n=null,theme:p="light"})=>{let[l,f]=U(!1),[h,c]=U(!1),C=l?t:"en",w=k(d).locale(C),F=()=>c(!h);ua(()=>{let y="react-calendar-datetime-styles";if(typeof document<"u"&&!document.getElementById(y)){let b=document.createElement("style");b.id=y,b.innerHTML=$,document.head.appendChild(b)}},[]);let v=y=>{r?r(y.toDate()):console.warn('Must provide an "onChangeDate" function')},G=l?Array.from({length:12},(y,b)=>k().locale(t).month(b).format("MMMM")):[];ha(()=>{let y=!0;return(async()=>{try{t==="en"?k.locale("en"):(await import(`dayjs/locale/${t}.js`),y&&k.locale(t))}catch(q){console.warn(`Could not load locale: ${t}`,q)}finally{y&&f(!0)}})(),()=>{y=!1}},[t]);let J=l?k().locale(t).localeData().weekdaysMin():[];return g("div",{style:{width:e??void 0,height:n??void 0},className:ya("calendar",{with_time:o,with_presets:a,years_picker:h,no_months:!i}),"data-theme":p!=="light"?p:void 0,children:h?g(j,{date:w,changeAction:v,toggleYearPicker:F}):ba(va,{children:[g(R,{date:w,toggleYearPicker:F,changeAction:v}),i&&g(S,{monthsNames:G,date:w,changeAction:v}),l&&g(_,{date:w,changeAction:v,weekdays:J}),o&&g(L,{date:w,changeAction:v}),a&&g(A,{locale:t,changeAction:v})]})})};export{Re as Calendar};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-calendar-datetime",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.8",
|
|
4
4
|
"description": "React date and time calendar component (with presets and locale)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
11
12
|
"import": "./dist/index.mjs",
|
|
12
13
|
"require": "./dist/index.cjs"
|
|
13
|
-
}
|
|
14
|
-
"./style.css": "./dist/index.css"
|
|
14
|
+
}
|
|
15
15
|
},
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|