datepickerdate
Version:
A lightweight datepicker component for Preact
3 lines (2 loc) • 8.67 kB
JavaScript
import{h as t,createRef as e,Component as n}from"preact";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function a(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function c(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&s(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function s(t,e){return(s=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function f(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function d(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?f(t):e}function h(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var p=(new Date).getFullYear(),g=(new Date).getMonth()+1,y=h(Array(7).keys()).map((function(t){return new Date(2017,9,t+1).toLocaleString(void 0,{weekday:"short"})})),v=h(Array(12).keys()).map((function(t){return new Date(2017,t,1).toLocaleString(void 0,{month:"long"})})),w=function(t,e){return"".concat(t).padStart(e,"0")},b=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:g,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:p,n=[4,6,9,11],r=e%4==0;return 2===t?r?29:28:n.includes(t)?30:31},m=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:g,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:p;return new Date("".concat(e,"-").concat(w(t,2),"-01")).getDay()+1},D=function(t){var e="[object Date]"===Object.prototype.toString.call(t),n=t&&!Number.isNaN(t.valueOf());return e&&n},O=function(t,e){if(!D(t)||!D(e))throw new Error("Value was not a Date object");var n=e.getDate(),r=e.getMonth()+1,o=e.getFullYear(),a=t.getDate(),i=t.getMonth()+1,c=t.getFullYear();return n===a&&r===i&&o===c},k=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:new Date;if(!D(t))throw new Error("Invalid date format. Please follow 'ISO 8601' format; 2013-08-30");return[t.getFullYear(),w(t.getMonth()+1,2),w(t.getDate(),2)].join("-")},j=function(t,e){return{month:t>1?t-1:12,year:t>1?e:e-1}},C=function(t,e){return{month:t<12?t+1:1,year:t<12?e:e+1}},M=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:g,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:p,n=b(t,e),r=m(t,e),o=r-1,a=o+n,i=35-a,c=42-a,u=i<0?c:i,l=j(t,e),s=l.month,f=l.year,d=C(t,e),y=d.month,v=d.year,D=b(s,f),O=h(new Array(o)).map((function(t,e){var n=e+1+(D-o);return[f,w(s,2),w(n,2)]})),k=h(new Array(n)).map((function(n,r){return[e,w(t,2),w(r+1,2)]})),M=h(new Array(u)).map((function(t,e){return[v,w(y,2),w(e+1,2)]}));return[].concat(h(O),h(k),h(M))},P=function(o){function s(n){var o;return r(this,s),i(f(o=d(this,l(s).call(this,n))),"checkClickOutside",(function(t){"keydown"!==t.type||"Escape"!==t.key?o.calendarRef.current&&(o.calendarRef.current.contains(t.target)||o.props.toggleCalendar()):o.props.toggleCalendar()})),i(f(o),"resolveStateFromDate",(function(t){var e=D(t)?t:new Date;return{current:e,month:e.getMonth()+1,year:e.getFullYear()}})),i(f(o),"getCalendarDates",(function(){var t=o.state,e=t.current,n=t.month,r=t.year,a=n||e.getMonth()+1,i=r||e.getFullYear();return M(a,i)})),i(f(o),"renderMonthAndYear",(function(){var e=o.state,n=e.month,r=e.year,a=v[n-1];return t("div",{class:"monthPicker"},t("button",{type:"button",class:"prevMonth",onClick:o.handlePrevious,title:"Previous Month"},t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"25",height:"25",class:"monthArrow",fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",viewBox:"0 0 24 24"},t("path",{d:"M19 12H5M12 19l-7-7 7-7"}))),t("div",{class:"monthYearLabel"},a," ",r),t("button",{type:"button",class:"nextMonth",onClick:o.handleNext,title:"Next Month"},t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"25",height:"25",fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",class:"monthArrow",viewBox:"0 0 24 24"},t("path",{d:"M5 12h14M12 5l7 7-7 7"}))))})),i(f(o),"renderDayLabels",(function(){return t("div",{class:"dayLabels"},y.map((function(e){return t("div",{key:e,class:"dayLabel"},e.toUpperCase())})))})),i(f(o),"renderCalendarDate",(function(){return t("div",{role:"presentation",class:"dateLabels",onMouseDown:o.gotoDate},M(o.state.month,o.state.year).map((function(e,n){var r=o.state,a=r.current,i=r.month,c=r.year,u=r.today,l=e.join("-"),s=new Date(l),f=O(s,u),d=O(s,a),h=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:new Date;if(!D(t)||!D(e))return!1;var n=e.getMonth()+1,r=e.getFullYear(),o=t.getMonth()+1,a=t.getFullYear();return n===o&&r===a}(s,new Date("".concat(c,"-").concat(i,"-01")));return t("button",{type:"button",key:"".concat(c,"-").concat(i,"-").concat(n),"data-date":l,class:[!h&&"notInMonth",d&&"currentDay",f&&"today","dateLabel"].filter(Boolean).join(" ")},s.getDate())})))})),i(f(o),"gotoDate",(function(t){var e=t.target.dataset.date,n=o.props.onDateChanged;o.setState(o.resolveStateFromDate(new Date(e))),"function"==typeof n&&n(e)})),i(f(o),"gotoPreviousMonth",(function(){return o.setState((function(t){return j(t.month,t.year)}))})),i(f(o),"gotoNextMonth",(function(){return o.setState((function(t){return C(t.month,t.year)}))})),i(f(o),"gotoPreviousYear",(function(){return o.setState((function(t){return{year:t.year-1}}))})),i(f(o),"gotoNextYear",(function(){return o.setState((function(t){return{year:t.year+1}}))})),i(f(o),"handlePrevious",(function(t){return t.shiftKey?o.gotoPreviousYear():o.gotoPreviousMonth()})),i(f(o),"handleNext",(function(t){return t.shiftKey?o.gotoNextYear():o.gotoNextMonth()})),o.state=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?c(Object(n),!0).forEach((function(e){i(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},o.resolveStateFromDate(n.date),{today:new Date}),o.calendarRef=e(),o}return u(s,n),a(s,[{key:"componentDidMount",value:function(){document.addEventListener("keydown",this.checkClickOutside,!0),document.addEventListener("click",this.checkClickOutside,!0)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keydown",this.checkClickOutside,!0),document.removeEventListener("click",this.checkClickOutside,!0)}},{key:"render",value:function(){return t("div",{class:"calendar"},t("div",{ref:this.calendarRef},this.renderMonthAndYear(),this.renderDayLabels(),this.renderCalendarDate()))}}]),s}(),S=function(e){function o(){var t,e;r(this,o);for(var n=arguments.length,a=new Array(n),c=0;c<n;c++)a[c]=arguments[c];return i(f(e=d(this,(t=l(o)).call.apply(t,[this].concat(a)))),"state",{date:null,calendarOpen:!1}),i(f(e),"toggleCalendar",(function(){e.setState((function(t){return{calendarOpen:!t.calendarOpen}}))})),i(f(e),"handleDateChange",(function(t){var n=e.props,r=n.onDateChanged,o=n.name;e.setState({date:t}),e.toggleCalendar(),"function"==typeof r&&r(o,t)})),e}return u(o,n),a(o,[{key:"componentDidMount",value:function(){var t=this.props.value;t&&this.setState({date:k(new Date(t))})}},{key:"render",value:function(e,n){var r=e.placeholder,o=e.formatter,a=void 0===o?function(t){return t}:o,i=n.date,c=n.calendarOpen;return t("div",{class:"dpd",style:"position:relative"},t("input",{type:"text",value:a(i),readOnly:"readonly",placeholder:r,onClick:this.toggleCalendar}),c&&t(P,{date:i&&new Date(i),onDateChanged:this.handleDateChange,toggleCalendar:this.toggleCalendar}))}}]),o}();export{S as Datepicker,y as WEEK_DAYS};
//# sourceMappingURL=index.esm.js.map