diff --git a/README.md b/README.md index c1da1e8..34756d9 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,26 @@ -# nodep-date-input-polyfill +# date-input-polyfill Just include this simple script and IE, Firefox, and OS X Safari will support ``, without any dependencies, not even jQuery! Support dynamically created inputs, so can be used in single page applications. -Forked from [html5-simple-date-input-polyfill](https://www.npmjs.com/package/html5-simple-date-input-polyfill). Continuing as a separate project. +Forked from [nodep-date-input-polyfill](https://github.com/brianblakely/nodep-date-input-polyfilll). Continuing as a separate project. ## Install -`npm install --save nodep-date-input-polyfill` +`npm install --save date-input-polyfill` Add to your project: -* **Webpack/Browserify:** `require('nodep-date-input-polyfill');` +* **Webpack/Browserify:** `require('date-input-polyfill');` - or alongside **Babel:** `import 'nodep-date-input-polyfill';` + or alongside **Babel:** `import 'date-input-polyfill';` -* **Script Tag:** Copy `nodep-date-input-polyfill.dist.js` from `node_modules` and +* **Script Tag:** Copy `date-input-polyfill.dist.js` from `node_modules` and include it anywhere in your HTML. * This package also supports **AMD**. ## Features -* **Easily Stylable:** [These are the default styles](https://github.com/brianblakely/nodep-date-input-polyfill/blob/master/nodep-date-input-polyfill.scss), +* **Easily Stylable:** [These are the default styles](https://github.com/jcgertig/date-input-polyfill/blob/master/date-input-polyfill.scss), which you may override with your own. * **Polyfills `valueAsDate` and `valueAsNumber`:** @@ -35,6 +35,15 @@ increment/decrement the date by one day. `` +* **Formatting:** Specify the display format by setting either the +`date-format` or `data-date-format` attribute of the `input` element. The default format is `yyyy-mm-dd`. +[Available options list.](https://github.com/felixge/node-dateformat#mask-options) + + `` + + `` + + ## Contributing ### Local Development diff --git a/date-input-polyfill.dist.js b/date-input-polyfill.dist.js new file mode 100644 index 0000000..86ec2b2 --- /dev/null +++ b/date-input-polyfill.dist.js @@ -0,0 +1,2 @@ +!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}n(84);var o=n(41),i=r(o),a=function(){i["default"].addPickerToOtherInputs(),i["default"].supportsDateInput()||i["default"].addPickerToDateInputs()};a(),document.addEventListener("DOMContentLoaded",function(){a()}),document.querySelector("body").addEventListener("mousedown",function(){a()})},function(t,e,n){t.exports=!n(11)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(9),o=n(32),i=n(25),a=Object.defineProperty;e.f=n(1)?Object.defineProperty:function(t,e,n){if(r(t),e=i(e,!0),r(n),o)try{return a(t,e,n)}catch(u){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(59),o=n(16);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(4),o=n(14);t.exports=n(1)?function(t,e,n){return r.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(23)("wks"),o=n(15),i=n(2).Symbol,a="function"==typeof i,u=t.exports=function(t){return r[t]||(r[t]=a&&i[t]||(a?i:o)("Symbol."+t))};u.store=r},function(t,e){var n=t.exports={version:"2.4.0"};"number"==typeof __e&&(__e=n)},function(t,e,n){var r=n(12);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e,n){var r=n(2),o=n(8),i=n(56),a=n(6),u="prototype",s=function(t,e,n){var c,l,f,d=t&s.F,p=t&s.G,h=t&s.S,y=t&s.P,m=t&s.B,v=t&s.W,b=p?o:o[e]||(o[e]={}),g=b[u],x=p?r:h?r[e]:(r[e]||{})[u];p&&(n=e);for(c in n)l=!d&&x&&void 0!==x[c],l&&c in b||(f=l?x[c]:n[c],b[c]=p&&"function"!=typeof x[c]?n[c]:m&&l?i(f,r):v&&x[c]==f?function(t){var e=function(e,n,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,r)}return t.apply(this,arguments)};return e[u]=t[u],e}(f):y&&"function"==typeof f?i(Function.call,f):f,y&&((b.virtual||(b.virtual={}))[c]=f,t&s.R&&g&&!g[c]&&a(g,c,f)))};s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,t.exports=s},function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){var r=n(38),o=n(17);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){t.exports={}},function(t,e){t.exports=!0},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(4).f,o=n(3),i=n(7)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){var r=n(23)("keys"),o=n(15);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e,n){var r=n(2),o="__core-js_shared__",i=r[o]||(r[o]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(12);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var r=n(2),o=n(8),i=n(19),a=n(27),u=n(4).f;t.exports=function(t){var e=o.Symbol||(o.Symbol=i?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||u(e,t,{value:a.f(t)})}},function(t,e,n){e.f=n(7)},function(t,e){"use strict";e.__esModule=!0,e["default"]=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(45),i=r(o);e["default"]=function(){function t(t,e){for(var n=0;n";for(e.style.display="none",n(58).appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(o+"script"+a+"document.F=Object"+o+"/script"+a),t.close(),c=t.F;r--;)delete c[s][i[r]];return c()};t.exports=Object.create||function(t,e){var n;return null!==t?(u[s]=r(t),n=new u,u[s]=null,n[a]=t):n=c(),void 0===e?n:o(n,e)}},function(t,e,n){var r=n(4),o=n(9),i=n(13);t.exports=n(1)?Object.defineProperties:function(t,e){o(t);for(var n,a=i(e),u=a.length,s=0;u>s;)r.f(t,n=a[s++],e[n]);return t}},function(t,e,n){var r=n(38),o=n(17).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(3),o=n(5),i=n(55)(!1),a=n(22)("IE_PROTO");t.exports=function(t,e){var n,u=o(t),s=0,c=[];for(n in u)n!=a&&r(u,n)&&c.push(n);for(;e.length>s;)r(u,n=e[s++])&&(~i(c,n)||c.push(n));return c}},function(t,e,n){t.exports=n(6)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){for(t=String(t),e=e||2;t.length0?"-":"+")+o(100*Math.floor(Math.abs(w)/60)+Math.abs(w)%60,4),S:["th","st","nd","rd"][h%10>3?0:(h%100-h%10!=10)*h%10],W:S,N:O};return s.replace(t,function(t){return t in D?D[t]:t.slice(1,t.length-1)})}}();l.masks={"default":"ddd mmm dd yyyy HH:MM:ss",shortDate:"m/d/yy",mediumDate:"mmm d, yyyy",longDate:"mmmm d, yyyy",fullDate:"dddd, mmmm d, yyyy",shortTime:"h:MM TT",mediumTime:"h:MM:ss TT",longTime:"h:MM:ss TT Z",isoDate:"yyyy-mm-dd",isoTime:"HH:MM:ss",isoDateTime:"yyyy-mm-dd'T'HH:MM:sso",isoUtcDateTime:"UTC:yyyy-mm-dd'T'HH:MM:ss'Z'",expiresHeaderFormat:"ddd, dd mmm yyyy HH:MM:ss Z"},l.i18n={dayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","January","February","March","April","May","June","July","August","September","October","November","December"]},e["default"]=l},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var o=n(44),i=r(o),a=n(28),u=r(a),s=n(29),c=r(s),l=n(43),f=r(l),d=n(42),p=r(d),h=n(40),y=r(h),m=function(){function t(e){var n=this;(0,u["default"])(this,t),this.element=e,this.element.setAttribute("data-has-picker",""),this.locale=this.element.getAttribute("lang")||document.body.getAttribute("lang")||"en",this.format=this.element.getAttribute("date-format")||document.body.getAttribute("date-format")||this.element.getAttribute("data-date-format")||document.body.getAttribute("data-date-format")||"yyyy-mm-dd",this.localeText=this.getLocaleText(),(0,i["default"])(this.element,{valueAsDate:{get:function(){if(!n.element.value)return null;var t=n.format||"yyyy-mm-dd",e=n.element.value.match(/(\d+)/g),r=0,o={};return t.replace(/(yyyy|dd|mm)/g,function(t){o[t]=r++}),new Date(e[o.yyyy],e[o.mm]-1,e[o.dd])},set:function(t){n.element.value=(0,y["default"])(t,n.format)}},valueAsNumber:{get:function(){return n.element.value?n.element.valueAsDate.valueOf():NaN},set:function(t){n.element.valueAsDate=new Date(t)}}});var r=function(t){var e=n.element;e.locale=n.localeText,f["default"].attachTo(e)};this.element.addEventListener("focus",r),this.element.addEventListener("mouseup",r),this.element.addEventListener("keydown",function(t){var e=new Date;switch(t.keyCode){case 9:case 27:f["default"].hide();break;case 38:n.element.valueAsDate&&(e.setDate(n.element.valueAsDate.getDate()+1),n.element.valueAsDate=e,f["default"].pingInput());break;case 40:n.element.valueAsDate&&(e.setDate(n.element.valueAsDate.getDate()-1),n.element.valueAsDate=e,f["default"].pingInput())}f["default"].sync()}),this.element.addEventListener("keyup",function(t){f["default"].sync()})}return(0,c["default"])(t,[{key:"getLocaleText",value:function(){var t=this.locale.toLowerCase();for(var e in p["default"]){var n=e.split("_");if(n.map(function(t){return t.toLowerCase()}),~n.indexOf(t)||~n.indexOf(t.substr(0,2)))return p["default"][e]}}}],[{key:"supportsDateInput",value:function(){var t=document.createElement("input");t.setAttribute("type","date");var e="not-a-date";return t.setAttribute("value",e),!(t.value===e)}},{key:"addPickerToDateInputs",value:function(){var e=document.querySelectorAll('input[type="date"]:not([data-has-picker])'),n=e.length;if(!n)return!1;for(var r=0;r"],n=0,r=this.locale.days.length;n'+this.locale.days[n]+"");this.daysHead.innerHTML=e.join(""),t.createRangeSelect(this.month,0,11,this.locale.months)}},{key:"refreshDaysMatrix",value:function(){this.refreshLocale();for(var e=this.date.getFullYear(),n=this.date.getMonth(),r=new Date(e,n,1).getDay(),o=new Date(this.date.getFullYear(),n+1,0).getDate(),i=t.absoluteDate(this.input.valueAsDate)||!1,a=i&&e===i.getFullYear()&&n===i.getMonth(),u=[],s=0;s":"")+"\n \n "),s+1<=r)u.push("");else{var c=s+1-r,l=a&&i.getDate()===c;u.push("\n "+c+"\n ")}this.days.innerHTML=u.join("")}},{key:"pingInput",value:function(){var t=void 0,e=void 0;try{t=new Event("input"),e=new Event("change")}catch(n){t=document.createEvent("KeyboardEvent"),t.initEvent("input",!0,!1),e=document.createEvent("KeyboardEvent"),e.initEvent("change",!0,!1)}this.input.dispatchEvent(t),this.input.dispatchEvent(e)}}],[{key:"createRangeSelect",value:function(t,e,n,r){t.innerHTML="";for(var o=e;o<=n;++o){var i=document.createElement("option");t.appendChild(i);var a=r?r[o-e]:o;i.text=a,i.value=o}return t}},{key:"absoluteDate",value:function(t){return t&&new Date(t.getTime()+60*t.getTimezoneOffset()*1e3)}}]),t}();window.thePicker=new s,e["default"]=window.thePicker},function(t,e,n){t.exports={"default":n(49),__esModule:!0}},function(t,e,n){t.exports={"default":n(50),__esModule:!0}},function(t,e,n){t.exports={"default":n(51),__esModule:!0}},function(t,e,n){t.exports={"default":n(52),__esModule:!0}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(47),i=r(o),a=n(46),u=r(a),s="function"==typeof u["default"]&&"symbol"==typeof i["default"]?function(t){return typeof t}:function(t){return t&&"function"==typeof u["default"]&&t.constructor===u["default"]?"symbol":typeof t};e["default"]="function"==typeof u["default"]&&"symbol"===s(i["default"])?function(t){return"undefined"==typeof t?"undefined":s(t)}:function(t){return t&&"function"==typeof u["default"]&&t.constructor===u["default"]?"symbol":"undefined"==typeof t?"undefined":s(t)}},function(t,e,n){n(73);var r=n(8).Object;t.exports=function(t,e){return r.defineProperties(t,e)}},function(t,e,n){n(74);var r=n(8).Object;t.exports=function(t,e,n){return r.defineProperty(t,e,n)}},function(t,e,n){n(77),n(75),n(78),n(79),t.exports=n(8).Symbol},function(t,e,n){n(76),n(80),t.exports=n(27).f("iterator")},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){t.exports=function(){}},function(t,e,n){var r=n(5),o=n(70),i=n(69);t.exports=function(t){return function(e,n,a){var u,s=r(e),c=o(s.length),l=i(a,c);if(t&&n!=n){for(;c>l;)if(u=s[l++],u!=u)return!0}else for(;c>l;l++)if((t||l in s)&&s[l]===n)return t||l||0;return!t&&-1}}},function(t,e,n){var r=n(53);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var r=n(13),o=n(37),i=n(20);t.exports=function(t){var e=r(t),n=o.f;if(n)for(var a,u=n(t),s=i.f,c=0;u.length>c;)s.call(t,a=u[c++])&&e.push(a);return e}},function(t,e,n){t.exports=n(2).document&&document.documentElement},function(t,e,n){var r=n(30);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(30);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){"use strict";var r=n(34),o=n(14),i=n(21),a={};n(6)(a,n(7)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=r(a,{next:o(1,n)}),i(t,e+" Iterator")}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){var r=n(13),o=n(5);t.exports=function(t,e){for(var n,i=o(t),a=r(i),u=a.length,s=0;u>s;)if(i[n=a[s++]]===e)return n}},function(t,e,n){var r=n(15)("meta"),o=n(12),i=n(3),a=n(4).f,u=0,s=Object.isExtensible||function(){return!0},c=!n(11)(function(){return s(Object.preventExtensions({}))}),l=function(t){a(t,r,{value:{i:"O"+ ++u,w:{}}})},f=function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,r)){if(!s(t))return"F";if(!e)return"E";l(t)}return t[r].i},d=function(t,e){if(!i(t,r)){if(!s(t))return!0;if(!e)return!1;l(t)}return t[r].w},p=function(t){return c&&h.NEED&&s(t)&&!i(t,r)&&l(t),t},h=t.exports={KEY:r,NEED:!1,fastKey:f,getWeak:d,onFreeze:p}},function(t,e,n){var r=n(20),o=n(14),i=n(5),a=n(25),u=n(3),s=n(32),c=Object.getOwnPropertyDescriptor;e.f=n(1)?c:function(t,e){if(t=i(t),e=a(e,!0),s)try{return c(t,e)}catch(n){}if(u(t,e))return o(!r.f.call(t,e),t[e])}},function(t,e,n){var r=n(5),o=n(36).f,i={}.toString,a="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],u=function(t){try{return o(t)}catch(e){return a.slice()}};t.exports.f=function(t){return a&&"[object Window]"==i.call(t)?u(t):o(r(t))}},function(t,e,n){var r=n(3),o=n(71),i=n(22)("IE_PROTO"),a=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),r(t,i)?t[i]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?a:null}},function(t,e,n){var r=n(24),o=n(16);t.exports=function(t){return function(e,n){var i,a,u=String(o(e)),s=r(n),c=u.length;return s<0||s>=c?t?"":void 0:(i=u.charCodeAt(s),i<55296||i>56319||s+1===c||(a=u.charCodeAt(s+1))<56320||a>57343?t?u.charAt(s):i:t?u.slice(s,s+2):(i-55296<<10)+(a-56320)+65536)}}},function(t,e,n){var r=n(24),o=Math.max,i=Math.min;t.exports=function(t,e){return t=r(t),t<0?o(t+e,0):i(t,e)}},function(t,e,n){var r=n(24),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(16);t.exports=function(t){return Object(r(t))}},function(t,e,n){"use strict";var r=n(54),o=n(62),i=n(18),a=n(5);t.exports=n(33)(Array,"Array",function(t,e){this._t=a(t),this._i=0,this._k=e},function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,o(1)):"keys"==e?o(0,n):"values"==e?o(0,t[n]):o(0,[n,t[n]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},function(t,e,n){var r=n(10);r(r.S+r.F*!n(1),"Object",{defineProperties:n(35)})},function(t,e,n){var r=n(10);r(r.S+r.F*!n(1),"Object",{defineProperty:n(4).f})},function(t,e){},function(t,e,n){"use strict";var r=n(68)(!0);n(33)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})})},function(t,e,n){"use strict";var r=n(2),o=n(3),i=n(1),a=n(10),u=n(39),s=n(64).KEY,c=n(11),l=n(23),f=n(21),d=n(15),p=n(7),h=n(27),y=n(26),m=n(63),v=n(57),b=n(60),g=n(9),x=n(5),M=n(25),w=n(14),S=n(34),O=n(66),D=n(65),T=n(4),_=n(13),A=D.f,k=T.f,E=O.f,j=r.Symbol,C=r.JSON,N=C&&C.stringify,L="prototype",P=p("_hidden"),F=p("toPrimitive"),J={}.propertyIsEnumerable,H=l("symbol-registry"),I=l("symbols"),Y=l("op-symbols"),R=Object[L],z="function"==typeof j,U=r.QObject,B=!U||!U[L]||!U[L].findChild,W=i&&c(function(){return 7!=S(k({},"a",{get:function(){return k(this,"a",{value:7}).a}})).a})?function(t,e,n){var r=A(R,e);r&&delete R[e],k(t,e,n),r&&t!==R&&k(R,e,r)}:k,Z=function(t){var e=I[t]=S(j[L]);return e._k=t,e},G=z&&"symbol"==typeof j.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof j},K=function(t,e,n){return t===R&&K(Y,e,n),g(t),e=M(e,!0),g(n),o(I,e)?(n.enumerable?(o(t,P)&&t[P][e]&&(t[P][e]=!1),n=S(n,{enumerable:w(0,!1)})):(o(t,P)||k(t,P,w(1,{})),t[P][e]=!0),W(t,e,n)):k(t,e,n)},V=function(t,e){g(t);for(var n,r=v(e=x(e)),o=0,i=r.length;i>o;)K(t,n=r[o++],e[n]);return t},q=function(t,e){return void 0===e?S(t):V(S(t),e)},Q=function(t){var e=J.call(this,t=M(t,!0));return!(this===R&&o(I,t)&&!o(Y,t))&&(!(e||!o(this,t)||!o(I,t)||o(this,P)&&this[P][t])||e)},X=function(t,e){if(t=x(t),e=M(e,!0),t!==R||!o(I,e)||o(Y,e)){var n=A(t,e);return!n||!o(I,e)||o(t,P)&&t[P][e]||(n.enumerable=!0),n}},$=function(t){for(var e,n=E(x(t)),r=[],i=0;n.length>i;)o(I,e=n[i++])||e==P||e==s||r.push(e);return r},tt=function(t){for(var e,n=t===R,r=E(n?Y:x(t)),i=[],a=0;r.length>a;)!o(I,e=r[a++])||n&&!o(R,e)||i.push(I[e]);return i};z||(j=function(){if(this instanceof j)throw TypeError("Symbol is not a constructor!");var t=d(arguments.length>0?arguments[0]:void 0),e=function(n){this===R&&e.call(Y,n),o(this,P)&&o(this[P],t)&&(this[P][t]=!1),W(this,t,w(1,n))};return i&&B&&W(R,t,{configurable:!0,set:e}),Z(t)},u(j[L],"toString",function(){return this._k}),D.f=X,T.f=K,n(36).f=O.f=$,n(20).f=Q,n(37).f=tt,i&&!n(19)&&u(R,"propertyIsEnumerable",Q,!0),h.f=function(t){return Z(p(t))}),a(a.G+a.W+a.F*!z,{Symbol:j});for(var et="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),nt=0;et.length>nt;)p(et[nt++]);for(var et=_(p.store),nt=0;et.length>nt;)y(et[nt++]);a(a.S+a.F*!z,"Symbol",{"for":function(t){return o(H,t+="")?H[t]:H[t]=j(t)},keyFor:function(t){if(G(t))return m(H,t);throw TypeError(t+" is not a symbol!")},useSetter:function(){B=!0},useSimple:function(){B=!1}}),a(a.S+a.F*!z,"Object",{create:q,defineProperty:K,defineProperties:V,getOwnPropertyDescriptor:X,getOwnPropertyNames:$,getOwnPropertySymbols:tt}),C&&a(a.S+a.F*(!z||c(function(){var t=j();return"[null]"!=N([t])||"{}"!=N({a:t})||"{}"!=N(Object(t))})),"JSON",{stringify:function(t){if(void 0!==t&&!G(t)){for(var e,n,r=[t],o=1;arguments.length>o;)r.push(arguments[o++]);return e=r[1],"function"==typeof e&&(n=e),!n&&b(e)||(e=function(t,e){if(n&&(e=n.call(this,t,e)),!G(e))return e}),r[1]=e,N.apply(C,r)}}}),j[L][F]||n(6)(j[L],F,j[L].valueOf),f(j,"Symbol"),f(Math,"Math",!0),f(r.JSON,"JSON",!0)},function(t,e,n){n(26)("asyncIterator")},function(t,e,n){n(26)("observable")},function(t,e,n){n(72);for(var r=n(2),o=n(6),i=n(18),a=n(7)("toStringTag"),u=["NodeList","DOMTokenList","MediaList","StyleSheetList","CSSRuleList"],s=0;s<5;s++){var c=u[s],l=r[c],f=l&&l.prototype;f&&!f[a]&&o(f,a,c),i[c]=i.Array}},function(t,e,n){e=t.exports=n(82)(),e.push([t.id,"date-input-polyfill{background:#fff;color:#000;text-shadow:none;border:0;padding:0;height:auto;width:auto;line-height:normal;font-family:sans-serif;font-size:14px;position:absolute!important;text-align:center;box-shadow:0 3px 10px 1px rgba(0,0,0,.22);cursor:default;z-index:1;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;overflow:hidden;display:block}date-input-polyfill[data-open=false]{visibility:hidden;z-index:-100!important;top:0}date-input-polyfill[data-open=true]{visibility:visible}date-input-polyfill select,date-input-polyfill table,date-input-polyfill td,date-input-polyfill th{background:#fff;color:#000;text-shadow:none;border:0;padding:0;height:auto;width:auto;line-height:normal;font-family:sans-serif;font-size:14px;box-shadow:none;font-family:Lato,Helvetica,Arial,sans-serif}date-input-polyfill button,date-input-polyfill select{border:0;border-radius:0;border-bottom:1px solid #dadfe1;height:24px;vertical-align:top;-webkit-appearance:none;-moz-appearance:none}date-input-polyfill .monthSelect-wrapper{width:55%;display:inline-block}date-input-polyfill .yearSelect-wrapper{width:25%;display:inline-block}date-input-polyfill select{width:100%}date-input-polyfill select:first-of-type{border-right:1px solid #dadfe1;border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}date-input-polyfill button{width:20%;background:#dadfe1;border-radius:0 5px 0 0;-moz-border-radius:0 5px 0 0;-webkit-border-radius:0 5px 0 0}date-input-polyfill button:hover{background:#eee}date-input-polyfill table{border-collapse:separate!important;border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;overflow:hidden;max-width:280px;width:280px}date-input-polyfill td,date-input-polyfill th{width:32px;padding:4px;text-align:center;box-sizing:content-box}date-input-polyfill td[data-day]{cursor:pointer}date-input-polyfill td[data-day]:hover{background:#dadfe1}date-input-polyfill [data-selected]{font-weight:700;background:#d8eaf6}",""]); +},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e=0&&g.splice(e,1)}function u(t){var e=document.createElement("style");return e.type="text/css",i(t,e),e}function s(t){var e=document.createElement("link");return e.rel="stylesheet",i(t,e),e}function c(t,e){var n,r,o;if(e.singleton){var i=b++;n=v||(v=u(e)),r=l.bind(null,n,i,!1),o=l.bind(null,n,i,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=s(e),r=d.bind(null,n),o=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=u(e),r=f.bind(null,n),o=function(){a(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}function l(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=x(e,o);else{var i=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}function f(t,e){var n=e.css,r=e.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function d(t,e){var n=e.css,r=e.sourceMap;r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([n],{type:"text/css"}),i=t.href;t.href=URL.createObjectURL(o),i&&URL.revokeObjectURL(i)}var p={},h=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},y=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),m=h(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,b=0,g=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=y()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var n=o(t);return r(n,e),function(t){for(var i=[],a=0;a { + Input.addPickerToOtherInputs(); + // Check if type="date" is supported. + if(!Input.supportsDateInput()) { + Input.addPickerToDateInputs(); + } +}; + +// Run the above code on any in the document, also on dynamically created ones. +addPickers(); + +document.addEventListener(`DOMContentLoaded`, () => { + addPickers(); +}); + +// This is also on mousedown event so it will capture new inputs that might +// be added to the DOM dynamically. +document.querySelector(`body`).addEventListener(`mousedown`, () => { + addPickers(); +}); diff --git a/date-input-polyfill.scss b/date-input-polyfill.scss new file mode 100644 index 0000000..5975b27 --- /dev/null +++ b/date-input-polyfill.scss @@ -0,0 +1,112 @@ +@mixin reset() { + background: #fff; + color: #000; + text-shadow: none; + border: 0; + padding: 0; + height: auto; + width: auto; + line-height: normal; + font-family: sans-serif; + font-size: 14px; +} + +date-input-polyfill { + @include reset(); + position: absolute !important; + text-align: center; + box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.22); + cursor: default; + z-index: 1; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + overflow: hidden; + display: block; + + &[data-open="false"] { + visibility: hidden; + z-index: -100 !important; + top: 0; + } + &[data-open="true"] { + visibility: visible; + } + + select, table, th, td { + @include reset(); + box-shadow: none; + font-family: 'Lato', Helvetica, Arial, sans-serif; + } + + select, button { + border: 0; + border-radius: 0; + border-bottom: 1px solid #DADFE1; + height: 24px; + vertical-align: top; + -webkit-appearance: none; + -moz-appearance: none; + } + + .monthSelect-wrapper { + width: 55%; + display: inline-block; + } + + .yearSelect-wrapper { + width: 25%; + display: inline-block; + } + + select { + width: 100%; + + &:first-of-type { + border-right: 1px solid #DADFE1; + border-radius: 5px 0 0 0; + -moz-border-radius: 5px 0 0 0; + -webkit-border-radius: 5px 0 0 0; + } + } + button { + width: 20%; + background: #DADFE1; + border-radius: 0 5px 0 0; + -moz-border-radius: 0 5px 0 0; + -webkit-border-radius: 0 5px 0 0; + + &:hover { + background: #eee; + } + } + + table { + border-collapse: separate !important; + border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + -webkit-border-radius: 0 0 5px 5px; + overflow: hidden; + max-width: 280px; + width: 280px; + } + + th, td { + width: 32px; + padding: 4px; + text-align: center; + box-sizing: content-box; + } + td[data-day] { + cursor: pointer; + + + &:hover { + background: #DADFE1; + } + } + [data-selected] { + font-weight: bold; + background: #D8EAF6; + } +} diff --git a/dateformat.js b/dateformat.js new file mode 100644 index 0000000..ec547ba --- /dev/null +++ b/dateformat.js @@ -0,0 +1,215 @@ +/* + * Date Format 1.2.3 + * (c) 2007-2009 Steven Levithan + * MIT license + * + * Includes enhancements by Scott Trenda + * and Kris Kowal + * + * Accepts a date, a mask, or a date and a mask. + * Returns a formatted version of the given date. + * The date defaults to the current date/time. + * The mask defaults to dateFormat.masks.default. + */ + +'use strict'; + +var dateFormat = (function() { + var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZWN]|'[^']*'|'[^']*'/g; + var timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g; + var timezoneClip = /[^-+\dA-Z]/g; + + // Regexes and supporting functions are cached through closure + return function (date, mask, utc, gmt) { + + // You can't provide utc if you skip other args (use the 'UTC:' mask prefix) + if(arguments.length === 1 && kindOf(date) === 'string' && !/\d/.test(date)) { + mask = date; + date = undefined; + } + + date = date || new Date; + + if(!(date instanceof Date)) { + date = new Date(date); + } + + if (isNaN(date)) { + throw TypeError('Invalid date'); + } + + mask = String(dateFormat.masks[mask] || mask || dateFormat.masks['default']); + + // Allow setting the utc/gmt argument via the mask + var maskSlice = mask.slice(0, 4); + if (maskSlice === 'UTC:' || maskSlice === 'GMT:') { + mask = mask.slice(4); + utc = true; + if (maskSlice === 'GMT:') { + gmt = true; + } + } + + var _ = utc ? 'getUTC' : 'get'; + var d = date[_ + 'Date'](); + var D = date[_ + 'Day'](); + var m = date[_ + 'Month'](); + var y = date[_ + 'FullYear'](); + var H = date[_ + 'Hours'](); + var M = date[_ + 'Minutes'](); + var s = date[_ + 'Seconds'](); + var L = date[_ + 'Milliseconds'](); + var o = utc ? 0 : date.getTimezoneOffset(); + var W = getWeek(date); + var N = getDayOfWeek(date); + var flags = { + d: d, + dd: pad(d), + ddd: dateFormat.i18n.dayNames[D], + dddd: dateFormat.i18n.dayNames[D + 7], + m: m + 1, + mm: pad(m + 1), + mmm: dateFormat.i18n.monthNames[m], + mmmm: dateFormat.i18n.monthNames[m + 12], + yy: String(y).slice(2), + yyyy: y, + h: H % 12 || 12, + hh: pad(H % 12 || 12), + H: H, + HH: pad(H), + M: M, + MM: pad(M), + s: s, + ss: pad(s), + l: pad(L, 3), + L: pad(Math.round(L / 10)), + t: H < 12 ? 'a' : 'p', + tt: H < 12 ? 'am' : 'pm', + T: H < 12 ? 'A' : 'P', + TT: H < 12 ? 'AM' : 'PM', + Z: gmt ? 'GMT' : utc ? 'UTC' : (String(date).match(timezone) || ['']).pop().replace(timezoneClip, ''), + o: (o > 0 ? '-' : '+') + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4), + S: ['th', 'st', 'nd', 'rd'][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10], + W: W, + N: N + }; + + return mask.replace(token, function (match) { + if(match in flags) { + return flags[match]; + } + return match.slice(1, match.length - 1); + }); + }; +})(); + +dateFormat.masks = { + 'default': 'ddd mmm dd yyyy HH:MM:ss', + 'shortDate': 'm/d/yy', + 'mediumDate': 'mmm d, yyyy', + 'longDate': 'mmmm d, yyyy', + 'fullDate': 'dddd, mmmm d, yyyy', + 'shortTime': 'h:MM TT', + 'mediumTime': 'h:MM:ss TT', + 'longTime': 'h:MM:ss TT Z', + 'isoDate': 'yyyy-mm-dd', + 'isoTime': 'HH:MM:ss', + 'isoDateTime': 'yyyy-mm-dd\'T\'HH:MM:sso', + 'isoUtcDateTime': 'UTC:yyyy-mm-dd\'T\'HH:MM:ss\'Z\'', + 'expiresHeaderFormat': 'ddd, dd mmm yyyy HH:MM:ss Z' +}; + +// Internationalization strings +dateFormat.i18n = { + dayNames: [ + 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', + 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' + ], + monthNames: [ + 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', + 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', + 'October', 'November', 'December' + ] +}; + +function pad(val, len) { + val = String(val); + len = len || 2; + while(val.length < len) { + val = `0${val}`; + } + return val; +} + +/** + * Get the ISO 8601 week number + * Based on comments from + * http://techblog.procurios.nl/k/n618/news/view/33796/14863/Calculate-ISO-8601-week-and-year-in-javascript.html + * + * @param {Object} `date` + * @return {Number} + */ +function getWeek(date) { + // Remove time components of date + var targetThursday = new Date(date.getFullYear(), date.getMonth(), date.getDate()); + + // Change date to Thursday same week + targetThursday.setDate(targetThursday.getDate() - ((targetThursday.getDay() + 6) % 7) + 3); + + // Take January 4th as it is always in week 1 (see ISO 8601) + var firstThursday = new Date(targetThursday.getFullYear(), 0, 4); + + // Change date to Thursday same week + firstThursday.setDate(firstThursday.getDate() - ((firstThursday.getDay() + 6) % 7) + 3); + + // Check if daylight-saving-time-switch occured and correct for it + var ds = targetThursday.getTimezoneOffset() - firstThursday.getTimezoneOffset(); + targetThursday.setHours(targetThursday.getHours() - ds); + + // Number of weeks between target Thursday and first Thursday + var weekDiff = (targetThursday - firstThursday) / (86400000*7); + return 1 + Math.floor(weekDiff); +} + +/** + * Get ISO-8601 numeric representation of the day of the week + * 1 (for Monday) through 7 (for Sunday) + * + * @param {Object} `date` + * @return {Number} + */ +function getDayOfWeek(date) { + var dow = date.getDay(); + if(dow === 0) { + dow = 7; + } + return dow; +} + +/** + * kind-of shortcut + * @param {*} val + * @return {String} + */ +function kindOf(val) { + if (val === null) { + return 'null'; + } + + if (val === undefined) { + return 'undefined'; + } + + if (typeof val !== 'object') { + return typeof val; + } + + if (Array.isArray(val)) { + return 'array'; + } + + return {}.toString.call(val) + .slice(8, -1).toLowerCase(); +}; + +export default dateFormat; diff --git a/index.html b/index.html index 3f1f297..342a458 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,8 @@ - nodep Polyfill Test - + Polyfill Test + @@ -24,6 +24,22 @@

+

+ with format ("date-format"): + +

+ +

+ with format ("data-date-format"): + +

+ +

+ text class with format: + +

+ +

dynamically created:

- + - \ No newline at end of file + diff --git a/input.js b/input.js index bae9766..e2f8f15 100644 --- a/input.js +++ b/input.js @@ -1,5 +1,6 @@ -import { thePicker } from './picker.js'; +import thePicker from './picker.js'; import locales from './locales.js'; +import dateFormat from './dateformat.js'; export default class Input { constructor(input) { @@ -11,22 +12,33 @@ export default class Input { || document.body.getAttribute(`lang`) || `en`; + this.format = this.element.getAttribute('date-format') + || document.body.getAttribute('date-format') + || this.element.getAttribute(`data-date-format`) + || document.body.getAttribute(`data-date-format`) + || `yyyy-mm-dd`; + this.localeText = this.getLocaleText(); Object.defineProperties( this.element, { 'valueAsDate': { - get: ()=> { + get: () => { if(!this.element.value) { return null; } - - const val = this.element.value.split(/\D/); - return new Date(`${val[0]}-${`0${val[1]}`.slice(-2)}-${`0${val[2]}`.slice(-2)}`); + const format = this.format || 'yyyy-mm-dd'; + const parts = this.element.value.match(/(\d+)/g); + let i = 0, fmt = {}; + + format.replace(/(yyyy|dd|mm)/g, part=> { + fmt[part] = i++; + }); + return new Date(parts[fmt['yyyy']], parts[fmt['mm']]-1, parts[fmt['dd']]); }, - set: val=> { - this.element.value = val.toISOString().slice(0,10); + set: val => { + this.element.value = dateFormat(val, this.format); } }, 'valueAsNumber': { @@ -35,7 +47,7 @@ export default class Input { return NaN; } - return this.element.valueAsDate.getTime(); + return this.element.valueAsDate.valueOf(); }, set: val=> { this.element.valueAsDate = new Date(val); @@ -46,18 +58,20 @@ export default class Input { // Open the picker when the input get focus, // also on various click events to capture it in all corner cases. - const showPicker = ()=> { - thePicker.attachTo(this.element); + const showPicker = (e) => { + const elm = this.element; + elm.locale = this.localeText; + const didAttach = thePicker.attachTo(elm); }; this.element.addEventListener(`focus`, showPicker); - this.element.addEventListener(`mousedown`, showPicker); this.element.addEventListener(`mouseup`, showPicker); // Update the picker if the date changed manually in the input. - this.element.addEventListener(`keydown`, e=> { + this.element.addEventListener(`keydown`, e => { const date = new Date(); switch(e.keyCode) { + case 9: case 27: thePicker.hide(); break; @@ -81,6 +95,10 @@ export default class Input { thePicker.sync(); }); + + this.element.addEventListener(`keyup`, e => { + thePicker.sync(); + }); } getLocaleText() { @@ -124,4 +142,18 @@ export default class Input { new Input(dateInputs[i]); } } + + static addPickerToOtherInputs() { + // Get and loop all the input[type="text"] class date-polyfill in the page that do not have `[data-has-picker]` yet. + const dateInputs = document.querySelectorAll(`input[type="text"].date-polyfill:not([data-has-picker])`); + const length = dateInputs.length; + + if(!length) { + return false; + } + + for(let i = 0; i < length; ++i) { + new Input(dateInputs[i]); + } + } } diff --git a/locales.js b/locales.js index 7f44676..7fa9e2b 100644 --- a/locales.js +++ b/locales.js @@ -5,13 +5,13 @@ const locales = { 'en_en-US_en-UK': { days: [ - `Sun`, - `Mon`, - `Tue`, - `Wed`, - `Thu`, - `Fri`, - `Sat` + `Su`, + `Mo`, + `Tu`, + `We`, + `Th`, + `Fr`, + `Sa` ], months: [ `January`, @@ -132,6 +132,229 @@ const locales = { `Dezember` ] }, + /* Dutch */ + 'nl_nl-NL_nl-BE': { + days: [ + `Zondag`, + `Maandag`, + `Dinsdag`, + `Woensdag`, + `Donderdag`, + `Vrijdag`, + `Zaterdag` + ], + months: [ + `Januari`, + `Februari`, + `Maart`, + `April`, + `Mei`, + `Juni`, + `Juli`, + `Augustus`, + `September`, + `Oktober`, + `November`, + `December` + ], + today: `Vandaag`, + format: `D/M/Y` + }, + /* Portuguese */ + 'pt_pt-BR': { + days: [ + `Dom`, + `Seg`, + `Ter`, + `Qua`, + `Qui`, + `Sex`, + `Sáb` + ], + months: [ + `Janeiro`, + `Fevereiro`, + `Março`, + `Abril`, + `Maio`, + `Junho`, + `Julho`, + `Agosto`, + `Setembro`, + `Outubro`, + `Novembro`, + `Dezembro` + ], + today: "Hoje" + }, + /* French */ + 'fr_fr-FR_fr-BE': { + days: [ + `Di`, + `Lu`, + `Ma`, + `Me`, + `Je`, + `Ve`, + `Sa` + ], + months: [ + `Janvier`, + `Février`, + `Mars`, + `Avril`, + `Mai`, + `Juin`, + `Juillet`, + `Août`, + `Septembre`, + `Octobre`, + `Novembre`, + `Décembre` + ], + today: `Aujourd'hui`, + format: `D/M/Y` + }, + /* Spanish */ + 'es_es-VE': { + days: [ + `Do`, + `Lu`, + `Ma`, + `Mi`, + `Ju`, + `Vi`, + `Sa` + ], + months: [ + `Enero`, + `Febrero`, + `Marzo`, + `Abril`, + `Mayo`, + `Junio`, + `Julio`, + `Agosto`, + `Septiembre`, + `Octubre`, + `Noviembre`, + `Diciembre` + ], + today: `Hoy`, + format: `D/M/Y` + }, + /* Danish */ + 'da_da-dk': { + days: [ + `Søndag`, + `Mandag`, + `Tirsdag`, + `Onsdag`, + `Torsdag`, + `Fredag`, + `Lørdag` + ], + months: [ + `Januar`, + `Februar`, + `Marts`, + `April`, + `Maj`, + `Juni`, + `Juli`, + `August`, + `September`, + `Oktober`, + `November`, + `December` + ], + today: `I dag`, + format: `dd/MM-YYYY` + }, + /* Russian */ + 'ru_ru-RU_ru-UA_ru-KZ_ru-MD': { + days: [ + `Вс`, + `Пн`, + `Вт`, + `Ср`, + `Чт`, + `Пт`, + `Сб` + ], + months: [ + `Январь`, + `Февраль`, + `Март`, + `Апрель`, + `Май`, + `Июнь`, + `Июль`, + `Август`, + `Сентябрь`, + `Октябрь`, + `Ноябрь`, + `Декабрь` + ], + today: `Сегодня`, + format: `D.M.Y` + }, + /* Ukrainian */ + 'uk_uk-UA': { + days: [ + `Нд`, + `Пн`, + `Вт`, + `Ср`, + `Чт`, + `Пт`, + `Сб` + ], + months: [ + `Січень`, + `Лютий`, + `Березень`, + `Квітень`, + `Травень`, + `Червень`, + `Липень`, + `Серпень`, + `Вересень`, + `Жовтень`, + `Листопад`, + `Грудень` + ], + today: `Cьогодні`, + format: `D.M.Y` + }, + /* Swedish (Sweden) */ + 'sv_sv-SE': { + days: [ + `Söndag`, + `Måndag`, + `Tisdag`, + `Onsdag`, + `Torsdag`, + `Fredag`, + `Lördag` + ], + months: [ + `Januari`, + `Februari`, + `Mars`, + `April`, + `Maj`, + `Juni`, + `Juli`, + `Augusti`, + `September`, + `Oktober`, + `November`, + `December` + ], + today: `Idag`, + format: `YYYY-MM-dd` + }, 'test_test-TEST': { days: [ `Foo`, @@ -156,6 +379,33 @@ const locales = { `November`, `December` ] + }, + 'ja': { + days: [ + `日`, + `月`, + `火`, + `水`, + `木`, + `金`, + `土` + ], + months: [ + `一月`, + `二月`, + `三月`, + `四月`, + `五月`, + `六月`, + `七月`, + `八月`, + `九月`, + `十月`, + `十一月`, + `十二月` + ], + today: `今日`, + format: `YYYY-MM-dd` } }; diff --git a/nodep-date-input-polyfill.dist.js b/nodep-date-input-polyfill.dist.js deleted file mode 100644 index 0e6a63a..0000000 --- a/nodep-date-input-polyfill.dist.js +++ /dev/null @@ -1 +0,0 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}n(46);var i=n(13),o=r(i);o["default"].supportsDateInput()||(o["default"].addPickerToDateInputs(),document.addEventListener("DOMContentLoaded",function(){o["default"].addPickerToDateInputs()}),document.querySelector("body").addEventListener("mousedown",function(){o["default"].addPickerToDateInputs()}))},function(e,t,n){e.exports=!n(10)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t){var n=e.exports={version:"2.1.3"};"number"==typeof __e&&(__e=n)},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,n){var r=n(8),i=n(29),o=n(39),a=Object.defineProperty;t.f=n(1)?Object.defineProperty:function(e,t,n){if(r(e),t=o(t,!0),r(n),i)try{return a(e,t,n)}catch(u){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(e[t]=n.value),e}},function(e,t){"use strict";t.__esModule=!0,t["default"]=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var i=n(17),o=r(i);t["default"]=function(){function e(e,t){for(var n=0;n0?r:n)(e)}},function(e,t,n){var r=n(30),i=n(24);e.exports=function(e){return r(i(e))}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(16),o=r(i),a=n(6),u=r(a),s=n(7),l=r(s),c=n(15),f=n(14),d=r(f),p=function(){function e(t){var n=this;(0,u["default"])(this,e),this.element=t,this.element.setAttribute("data-has-picker",""),this.locale=this.element.getAttribute("lang")||document.body.getAttribute("lang")||"en",this.localeText=this.getLocaleText(),(0,o["default"])(this.element,{valueAsDate:{get:function(){if(!n.element.value)return null;var e=n.element.value.split(/\D/);return new Date(e[0]+"-"+("0"+e[1]).slice(-2)+"-"+("0"+e[2]).slice(-2))},set:function(e){n.element.value=e.toISOString().slice(0,10)}},valueAsNumber:{get:function(){return n.element.value?n.element.valueAsDate.getTime():NaN},set:function(e){n.element.valueAsDate=new Date(e)}}});var r=function(){c.thePicker.attachTo(n.element)};this.element.addEventListener("focus",r),this.element.addEventListener("mousedown",r),this.element.addEventListener("mouseup",r),this.element.addEventListener("keydown",function(e){var t=new Date;switch(e.keyCode){case 27:c.thePicker.hide();break;case 38:n.element.valueAsDate&&(t.setDate(n.element.valueAsDate.getDate()+1),n.element.valueAsDate=t,c.thePicker.pingInput());break;case 40:n.element.valueAsDate&&(t.setDate(n.element.valueAsDate.getDate()-1),n.element.valueAsDate=t,c.thePicker.pingInput())}c.thePicker.sync()})}return(0,l["default"])(e,[{key:"getLocaleText",value:function(){var e=this.locale.toLowerCase();for(var t in d["default"]){var n=t.split("_");if(n.map(function(e){return e.toLowerCase()}),~n.indexOf(e)||~n.indexOf(e.substr(0,2)))return d["default"][t]}}}],[{key:"supportsDateInput",value:function(){var e=document.createElement("input");e.setAttribute("type","date");var t="not-a-date";return e.setAttribute("value",t),!(e.value===t)}},{key:"addPickerToDateInputs",value:function(){var t=document.querySelectorAll('input[type="date"]:not([data-has-picker])'),n=t.length;if(!n)return!1;for(var r=0;n>r;++r)new e(t[r])}}]),e}();t["default"]=p},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n={"en_en-US_en-UK":{days:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],months:["January","February","March","April","May","June","July","August","September","October","November","December"]},"test_test-TEST":{days:["Foo","Mon","Tue","Wed","Thu","Fri","Sat"],months:["Foo","February","March","April","May","June","July","August","September","October","November","December"]}};t["default"]=n},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(6),o=r(i),a=n(7),u=r(a),s=function(){function e(){var t=this;if((0,o["default"])(this,e),l)return l;this.date=new Date,this.input=null,this.isOpen=!1,this.container=document.createElement("date-input-polyfill"),this.year=document.createElement("select"),e.createRangeSelect(this.year,this.date.getFullYear()-80,this.date.getFullYear()+20),this.year.className="yearSelect",this.year.addEventListener("change",function(){t.date.setYear(t.year.value),t.refreshDaysMatrix()}),this.container.appendChild(this.year),this.month=document.createElement("select"),this.month.className="monthSelect",this.month.addEventListener("change",function(){t.date.setMonth(t.month.value),t.refreshDaysMatrix()}),this.container.appendChild(this.month),this.today=document.createElement("button"),this.today.textContent="Today",this.today.addEventListener("click",function(){var e=new Date;t.date=new Date(e.getFullYear()+"/"+("0"+(e.getMonth()+1)).slice(-2)+"/"+("0"+e.getDate()).slice(-2)),t.setInput()}),this.container.appendChild(this.today);var n=document.createElement("table");this.daysHead=document.createElement("thead"),this.days=document.createElement("tbody"),this.days.addEventListener("click",function(e){var n=e.target;if(!n.hasAttribute("data-day"))return!1;var r=t.days.querySelector("[data-selected]");r&&r.removeAttribute("data-selected"),n.setAttribute("data-selected",""),t.date.setDate(parseInt(n.textContent)),t.setInput()}),n.appendChild(this.daysHead),n.appendChild(this.days),this.container.appendChild(n),this.hide(),document.body.appendChild(this.container),document.addEventListener("click",function(e){for(var n=e.target,r=n===t.container;!r&&(n=n.parentNode);)r=n===t.container;"date"!==e.target.getAttribute("type")&&!r&&t.hide()})}return(0,u["default"])(e,[{key:"hide",value:function(){this.container.setAttribute("data-open",this.isOpen=!1)}},{key:"show",value:function(){this.container.setAttribute("data-open",this.isOpen=!0)}},{key:"goto",value:function(e){var t=e.getBoundingClientRect();this.container.style.top=t.top+t.height+(document.documentElement.scrollTop||document.body.scrollTop)+"px",this.container.style.left=t.left+(document.documentElement.scrollLeft||document.body.scrollLeft)+"px",this.show()}},{key:"attachTo",value:function(e){return e===this.input&&this.isOpen?!1:(this.input=e,this.sync(),void this["goto"](this.input))}},{key:"sync",value:function(){this.input.valueAsDate?this.date=e.absoluteDate(this.input.valueAsDate):this.date=new Date,this.year.value=this.date.getFullYear(),this.month.value=this.date.getMonth(),this.refreshDaysMatrix()}},{key:"setInput",value:function(){var e=this;this.input.valueAsDate=this.date,this.input.focus(),setTimeout(function(){e.hide()},100),this.pingInput()}},{key:"refreshLocale",value:function(){if(this.locale===this.input.locale)return!1;this.locale=this.input.locale;for(var t=[""],n=0,r=this.input.localeText.days.length;r>n;++n)t.push(''+this.input.localeText.days[n]+"");this.daysHead.innerHTML=t.join(""),e.createRangeSelect(this.month,0,11,this.input.localeText.months)}},{key:"refreshDaysMatrix",value:function(){this.refreshLocale();for(var t=this.date.getFullYear(),n=this.date.getMonth(),r=new Date(t,n,1).getDay(),i=new Date(this.date.getFullYear(),n+1,0).getDate(),o=e.absoluteDate(this.input.valueAsDate)||!1,a=o&&t===o.getFullYear()&&n===o.getMonth(),u=[],s=0;i+r>s;++s)if(s%7===0&&u.push("\n "+(0!==s?"":"")+"\n \n "),r>=s+1)u.push("");else{var l=s+1-r,c=a&&o.getDate()===l;u.push("\n "+l+"\n ")}this.days.innerHTML=u.join("")}},{key:"pingInput",value:function(){var e=void 0,t=void 0;try{e=new Event("input"),t=new Event("change")}catch(n){e=document.createEvent("KeyboardEvent"),e.initEvent("input",!0,!1),t=document.createEvent("KeyboardEvent"),t.initEvent("change",!0,!1)}this.input.dispatchEvent(e),this.input.dispatchEvent(t)}}],[{key:"createRangeSelect",value:function(e,t,n,r){e.innerHTML="";for(var i=t;n>=i;++i){var o=document.createElement("option");e.appendChild(o);var a=r?r[i-t]:i;o.text=a,o.value=i}return e}},{key:"absoluteDate",value:function(e){return e&&new Date(e.getTime()+60*e.getTimezoneOffset()*1e3)}}]),e}(),l=new s;t["default"]=l},function(e,t,n){e.exports={"default":n(18),__esModule:!0}},function(e,t,n){e.exports={"default":n(19),__esModule:!0}},function(e,t,n){n(41);var r=n(2).Object;e.exports=function(e,t){return r.defineProperties(e,t)}},function(e,t,n){n(42);var r=n(2).Object;e.exports=function(e,t,n){return r.defineProperty(e,t,n)}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,n){var r=n(12),i=n(38),o=n(37);e.exports=function(e){return function(t,n,a){var u,s=r(t),l=i(s.length),c=o(a,l);if(e&&n!=n){for(;l>c;)if(u=s[c++],u!=u)return!0}else for(;l>c;c++)if((e||c in s)&&s[c]===n)return e||c;return!e&&-1}}},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var r=n(20);e.exports=function(e,t,n){if(r(e),void 0===t)return e;switch(n){case 1:return function(n){return e.call(t,n)};case 2:return function(n,r){return e.call(t,n,r)};case 3:return function(n,r,i){return e.call(t,n,r,i)}}return function(){return e.apply(t,arguments)}}},function(e,t){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,t,n){var r=n(4),i=n(3).document,o=r(i)&&r(i.createElement);e.exports=function(e){return o?i.createElement(e):{}}},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},function(e,t,n){var r=n(5),i=n(34);e.exports=n(1)?function(e,t,n){return r.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){e.exports=!n(1)&&!n(10)(function(){return 7!=Object.defineProperty(n(25)("div"),"a",{get:function(){return 7}}).a})},function(e,t,n){var r=n(22);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==r(e)?e.split(""):Object(e)}},function(e,t,n){var r=n(5),i=n(8),o=n(33);e.exports=n(1)?Object.defineProperties:function(e,t){i(e);for(var n,a=o(t),u=a.length,s=0;u>s;)r.f(e,n=a[s++],t[n]);return e}},function(e,t,n){var r=n(27),i=n(12),o=n(21)(!1),a=n(35)("IE_PROTO");e.exports=function(e,t){var n,u=i(e),s=0,l=[];for(n in u)n!=a&&r(u,n)&&l.push(n);for(;t.length>s;)r(u,n=t[s++])&&(~o(l,n)||l.push(n));return l}},function(e,t,n){var r=n(32),i=n(26);e.exports=Object.keys||function(e){return r(e,i)}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){var r=n(36)("keys"),i=n(40);e.exports=function(e){return r[e]||(r[e]=i(e))}},function(e,t,n){var r=n(3),i="__core-js_shared__",o=r[i]||(r[i]={});e.exports=function(e){return o[e]||(o[e]={})}},function(e,t,n){var r=n(11),i=Math.max,o=Math.min;e.exports=function(e,t){return e=r(e),0>e?i(e+t,0):o(e,t)}},function(e,t,n){var r=n(11),i=Math.min;e.exports=function(e){return e>0?i(r(e),9007199254740991):0}},function(e,t,n){var r=n(4);e.exports=function(e,t){if(!r(e))return e;var n,i;if(t&&"function"==typeof(n=e.toString)&&!r(i=n.call(e)))return i;if("function"==typeof(n=e.valueOf)&&!r(i=n.call(e)))return i;if(!t&&"function"==typeof(n=e.toString)&&!r(i=n.call(e)))return i;throw TypeError("Can't convert object to primitive value")}},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+r).toString(36))}},function(e,t,n){var r=n(9);r(r.S+r.F*!n(1),"Object",{defineProperties:n(31)})},function(e,t,n){var r=n(9);r(r.S+r.F*!n(1),"Object",{defineProperty:n(5).f})},function(e,t,n){t=e.exports=n(44)(),t.push([e.id,"date-input-polyfill{background:#fff;color:#000;text-shadow:none;border:0;padding:0;height:auto;width:auto;line-height:normal;border-radius:0;font-family:sans-serif;font-size:14px;position:absolute!important;text-align:center;box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12);cursor:default;z-index:1}date-input-polyfill[data-open=false]{display:none}date-input-polyfill[data-open=true]{display:block}date-input-polyfill select,date-input-polyfill table,date-input-polyfill td,date-input-polyfill th{background:#fff;color:#000;text-shadow:none;border:0;padding:0;height:auto;width:auto;line-height:normal;border-radius:0;font-family:sans-serif;font-size:14px;box-shadow:none}date-input-polyfill button,date-input-polyfill select{border:0;border-bottom:1px solid #e0e0e0;height:24px;vertical-align:top}date-input-polyfill select{width:55%}date-input-polyfill select:first-of-type{border-right:1px solid #e0e0e0;width:25%}date-input-polyfill button{width:20%;background:#e0e0e0}date-input-polyfill table{border-collapse:collapse}date-input-polyfill td,date-input-polyfill th{width:32px;padding:4px;text-align:center}date-input-polyfill td[data-day]{cursor:pointer}date-input-polyfill td[data-day]:hover{background:#e0e0e0}date-input-polyfill [data-selected]{font-weight:700;background:#d8eaf6}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t=0&&g.splice(t,1)}function u(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",o(e,t),t}function l(e,t){var n,r,i;if(t.singleton){var o=b++;n=m||(m=u(t)),r=c.bind(null,n,o,!1),i=c.bind(null,n,o,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=s(t),r=d.bind(null,n),i=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=u(t),r=f.bind(null,n),i=function(){a(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else i()}}function c(e,t,n,r){var i=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=x(t,i);else{var o=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function f(e,t){var n=t.css,r=t.media;if(t.sourceMap,r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function d(e,t){var n=t.css,r=(t.media,t.sourceMap);r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var i=new Blob([n],{type:"text/css"}),o=e.href;e.href=URL.createObjectURL(i),o&&URL.revokeObjectURL(o)}var p={},h=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},v=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),y=h(function(){return document.head||document.getElementsByTagName("head")[0]}),m=null,b=0,g=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=v()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var n=i(e);return r(n,t),function(e){for(var o=[],a=0;a in the document, also on dynamically created ones. -// Check if type="date" is supported. -if(!Input.supportsDateInput()) { - Input.addPickerToDateInputs(); - - document.addEventListener(`DOMContentLoaded`, ()=> { - Input.addPickerToDateInputs(); - }); - // This is also on mousedown event so it will capture new inputs that might - // be added to the DOM dynamically. - document.querySelector(`body`).addEventListener(`mousedown`, ()=> { - Input.addPickerToDateInputs(); - }); -} diff --git a/nodep-date-input-polyfill.scss b/nodep-date-input-polyfill.scss deleted file mode 100644 index 1aec401..0000000 --- a/nodep-date-input-polyfill.scss +++ /dev/null @@ -1,77 +0,0 @@ -@mixin reset() { - background: #fff; - color: #000; - text-shadow: none; - border: 0; - padding: 0; - height: auto; - width: auto; - line-height: normal; - border-radius: 0; - font-family: sans-serif; - font-size: 14px; -} - -date-input-polyfill { - @include reset(); - position: absolute !important; - text-align: center; - box-shadow: - 0 7px 8px -4px rgba(0,0,0,.2), - 0 12px 17px 2px rgba(0,0,0,.14), - 0 5px 22px 4px rgba(0,0,0,.12); - cursor: default; - z-index: 1; - - &[data-open="false"] { - display: none; - } - &[data-open="true"] { - display: block; - } - - select, table, th, td { - @include reset(); - box-shadow: none; - } - - select, button { - border: 0; - border-bottom: 1px solid #E0E0E0; - height: 24px; - vertical-align: top; - } - - select { - width: 55%; - - &:first-of-type { - border-right: 1px solid #E0E0E0; - width: 25%; - } - } - button { - width: 20%; - background: #E0E0E0; - } - - table { - border-collapse: collapse; - } - th, td { - width: 32px; - padding: 4px; - text-align: center; - } - td[data-day] { - cursor: pointer; - - &:hover { - background: #E0E0E0; - } - } - [data-selected] { - font-weight: bold; - background: #D8EAF6; - } -} \ No newline at end of file diff --git a/package.json b/package.json index 1040998..ba62b84 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,34 @@ { - "name": "nodep-date-input-polyfill", - "version": "2.4.6", + "name": "date-input-polyfill", + "version": "2.14.0", "description": "Automatically adds datepickers to input[type=date] on IE, Firefox, and OS X Safari.", - "main": "nodep-date-input-polyfill.dist.js", - "author": { - "name": "Brian Blakely", - "email": "anewpage.media@gmail.com" - }, + "main": "date-input-polyfill.dist.js", + "contributors": [ + { + "name": "Brian Blakely", + "email": "anewpage.media@gmail.com" + }, + { + "name": "Jonathan Gertig", + "email": "jcgertig@gmail.com", + "url": "https://github.com/jcgertig" + }, + { + "name": "Pierre Klink" + }, + { + "name": "Kyle Alwyn" + }, + { + "name": "Joseph Victor Estolas", + "url": "https://github.com/jvestolas" + } + ], "repository": { "type": "git", - "url": "git://github.com/brianblakely/nodep-date-input-polyfill.git" + "url": "git://github.com/jcgertig/date-input-polyfill.git" }, - "bugs": "https://github.com/brianblakely/nodep-date-input-polyfill/issues", + "bugs": "https://github.com/jcgertig/date-input-polyfill/issues", "keywords": [ "html5", "light", @@ -25,21 +42,21 @@ "analyze": true, "license": "MIT", "devDependencies": { - "babel-core": "^6.4.5", - "babel-loader": "^6.2.2", - "babel-plugin-transform-runtime": "^6.4.3", - "babel-preset-es2015": "^6.3.13", - "babel-preset-stage-3": "^6.3.13", - "css-loader": "^0.23.1", - "eslint": "^2.4.0", - "node-sass": "^3.4.2", - "sass-loader": "^3.1.2", - "style-loader": "^0.13.0", - "webpack": "^1.12.13", - "webpack-dev-server": "^1.14.1" + "babel-core": "^6.17.0", + "babel-loader": "^6.2.5", + "babel-plugin-transform-runtime": "^6.15.0", + "babel-preset-es2015": "^6.16.0", + "babel-preset-stage-3": "^6.17.0", + "css-loader": "^0.25.0", + "eslint": "^3.7.1", + "node-sass": "^3.10.1", + "sass-loader": "^4.0.2", + "style-loader": "^0.13.1", + "webpack": "^1.13.2", + "webpack-dev-server": "^1.16.2" }, "dependencies": { - "babel-runtime": "^6.3.19" + "babel-runtime": "^6.11.6" }, "scripts": { "start": "./node_modules/.bin/webpack-dev-server", diff --git a/picker.js b/picker.js index 38b3470..293ac34 100644 --- a/picker.js +++ b/picker.js @@ -1,8 +1,8 @@ class Picker { constructor() { // This is a singleton. - if(thePicker) { - return thePicker; + if(window.thePicker) { + return window.thePicker; } this.date = new Date(); @@ -18,7 +18,7 @@ class Picker { this.year = document.createElement(`select`); Picker.createRangeSelect( this.year, - this.date.getFullYear() - 80, + 1890, // oldest person alive born in 1894 this.date.getFullYear() + 20 ); this.year.className = `yearSelect`; @@ -26,7 +26,10 @@ class Picker { this.date.setYear(this.year.value); this.refreshDaysMatrix(); }); - this.container.appendChild(this.year); + const yearWrapper = document.createElement(`span`); + yearWrapper.className = `yearSelect-wrapper`; + yearWrapper.appendChild(this.year); + this.container.appendChild(yearWrapper); // Month picker. this.month = document.createElement(`select`); @@ -35,7 +38,10 @@ class Picker { this.date.setMonth(this.month.value); this.refreshDaysMatrix(); }); - this.container.appendChild(this.month); + const monthWrapper = document.createElement(`span`); + monthWrapper.className = `monthSelect-wrapper`; + monthWrapper.appendChild(this.month); + this.container.appendChild(monthWrapper); // Today button. this.today = document.createElement(`button`); @@ -87,62 +93,100 @@ class Picker { this.hide(); document.body.appendChild(this.container); - // Close the picker when clicking outside of a date input or picker. - document.addEventListener(`click`, e=> { - let el = e.target; - let isPicker = el === this.container; - - while(!isPicker && (el = el.parentNode)) { - isPicker = el === this.container; + this.removeClickOut = e => { + if(this.isOpen) { + let el = e.target; + let isPicker = el === this.container || el === this.input; + while(!isPicker && (el = el.parentNode)) { + isPicker = el === this.container; + } + ((e.target.getAttribute(`type`) !== `date` && !isPicker) || !isPicker) + && this.hide(); } + }; - e.target.getAttribute(`type`) !== `date` && !isPicker - && this.hide(); - }); + this.removeBlur = e => { + if(this.isOpen) { + this.hide(); + } + }; } // Hide. hide() { this.container.setAttribute(`data-open`, this.isOpen = false); + // Close the picker when clicking outside of a date input or picker. + if(this.input) { this.input.blur() } + document.removeEventListener(`mousedown`, this.removeClickOut); + document.removeEventListener(`touchstart`, this.removeClickOut); } // Show. show() { this.container.setAttribute(`data-open`, this.isOpen = true); + // Close the picker when clicking outside of a date input or picker. + setTimeout(()=>{ + document.addEventListener(`mousedown`, this.removeClickOut); + document.addEventListener(`touchstart`, this.removeClickOut); + }, 500); + + // when used in a single-page app or otherwise, + // hide datepicker when the browser's back button is pressed + window.onpopstate = () => { + this.hide(); + } } - // Position picker below element. Align to element's left edge. + // Position picker below element. Align to element's right edge. goto(element) { const rekt = element.getBoundingClientRect(); this.container.style.top = `${ rekt.top + rekt.height + (document.documentElement.scrollTop || document.body.scrollTop) + + 3 }px`; + + const contRekt = this.container.getBoundingClientRect(); + const width = contRekt.width ? contRekt.width : 280; + + const classWithOutPos = () => { + return this.container.className + .replace(`polyfill-left-aligned`, ``) + .replace(`polyfill-right-aligned`, ``) + .replace(/\s+/g,` `).trim(); + }; + + let base = rekt.right - width; + if(rekt.right < width) { + base = rekt.left; + this.container.className = `${classWithOutPos()} polyfill-left-aligned`; + } else { + this.container.className = `${classWithOutPos()} polyfill-right-aligned`; + } this.container.style.left = `${ - rekt.left + base + (document.documentElement.scrollLeft || document.body.scrollLeft) }px`; - this.show(); } // Initiate I/O with given date input. attachTo(input) { - if( - input === this.input - && this.isOpen - ) { + if(input === this.input && this.isOpen) { return false; } this.input = input; + this.refreshLocale(); this.sync(); this.goto(this.input); + return true; } // Match picker date with input date. sync() { - if(this.input.valueAsDate) { + // fixes bug where an empty calendar appears if year is missing from keyboard input + if (!isNaN(Date.parse(this.input.valueAsDate))) { this.date = Picker.absoluteDate(this.input.valueAsDate); } else { this.date = new Date(); @@ -171,9 +215,11 @@ class Picker { this.locale = this.input.locale; + this.today.textContent = this.locale.today || `Today`; + const daysHeadHTML = [``]; - for(let i = 0, len = this.input.localeText.days.length; i < len; ++i) { - daysHeadHTML.push(`${this.input.localeText.days[i]}`); + for(let i = 0, len = this.locale.days.length; i < len; ++i) { + daysHeadHTML.push(`${this.locale.days[i]}`); } this.daysHead.innerHTML = daysHeadHTML.join(``); @@ -181,7 +227,7 @@ class Picker { this.month, 0, 11, - this.input.localeText.months + this.locale.months ); } @@ -283,6 +329,6 @@ class Picker { } } -const thePicker = new Picker(); +window.thePicker = new Picker(); -export default thePicker; +export default window.thePicker; diff --git a/webpack.config.js b/webpack.config.js index bc47941..9b28bf0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,7 @@ var webpack = require('webpack'); module.exports = { - entry: './nodep-date-input-polyfill.js', + entry: './date-input-polyfill.js', plugins: [ new webpack.optimize.UglifyJsPlugin({ @@ -44,7 +44,7 @@ module.exports = { devtool: 'cheap-module-eval-source-map', output: { path: process.cwd()+'/', - filename: 'nodep-date-input-polyfill.dist.js', + filename: 'date-input-polyfill.dist.js', libraryTarget: 'umd' } };