├── .babelrc
├── .gitignore
├── README.md
├── dist
    ├── vue-date-picker.js
    └── vue-date-picker.min.js
├── example
    └── index.html
├── package.json
├── src
    ├── DatePicker.vue
    └── plugin.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"],
4 |   "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | package-lock.json
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Date Picker
  2 | 
  3 | > A vue date picker component inspired by material design
  4 | 
  5 | ## Contents
  6 | 
  7 |  - [Installing](https://github.com/ridewn/vue-date-picker#installing)
  8 |  - [Examples](https://github.com/ridewn/vue-date-picker#examples)
  9 |  - [Formatting Selected Date](https://github.com/ridewn/vue-date-picker#formatting)
 10 |  - [API](https://github.com/ridewn/vue-date-picker#api)
 11 | 
 12 | ## Installing
 13 | 
 14 | `$ npm install vue-md-date-picker --save`
 15 | 
 16 | `import DatePicker from 'vue-md-date-picker'`
 17 | 
 18 | ## Examples
 19 | 
 20 | The most common use case
 21 | 
 22 | ```html
 23 | <DatePicker
 24 |   v-if="show"
 25 |   v-model="date"
 26 |   @close="show = false"
 27 | />
 28 | ```
 29 | 
 30 | Note that there is a `v-if` directive and a `@close` event. This is because the date picker allows you to choose when it is displayed, and how to handle closing it.
 31 | 
 32 | Setting a min date to choose from
 33 | 
 34 | ```html
 35 | <DatePicker
 36 |   v-if="show"
 37 |   v-model="date"
 38 |   @close="show = false"
 39 |   min="2017-8-16"
 40 | />
 41 | ```
 42 | 
 43 | Setting a max date to choose from
 44 | 
 45 | 
 46 | ```html
 47 | <DatePicker
 48 |   v-if="show"
 49 |   v-model="date"
 50 |   @close="show = false"
 51 |   max="2017-8-24"
 52 | />
 53 | ```
 54 | 
 55 | Setting a range of dates to choose from
 56 | 
 57 | ```html
 58 | <date-picker
 59 |   v-if="show"
 60 |   v-model="date"
 61 |   @close="show = false"
 62 |   min="2017-8-16"
 63 |   max="2017-8-24"
 64 | />
 65 | ```
 66 | 
 67 | You may also specifiy a color to change the theme of the date picker
 68 | 
 69 | ```html
 70 | <DatePicker
 71 |   color="#F44336"
 72 |   @close="show = false"
 73 |   v-if="show"
 74 |   v-model="date"
 75 | />
 76 | ```
 77 | There is also a provided transition if you want to fade the date picker in
 78 | 
 79 | ```html
 80 | <transition name="calendar-fade">
 81 |   <DatePicker
 82 |     @close="show = false"
 83 |     v-if="show"
 84 |     v-model="date"
 85 |   />
 86 | </transition>
 87 | ```
 88 | 
 89 | ## Formatting
 90 | 
 91 | To format the date picker's value, you may use the `:format` prop. The format prop takes a reference to a function; this function receives the date picker's date value (e.g. 2016-4-19) and may format it however you wish
 92 | 
 93 | 
 94 | ```html
 95 | <DatePicker
 96 |   v-if="show"
 97 |   v-model="date"
 98 |   @close="show = false"
 99 |   :format="formatDate"
100 | />
101 | ```
102 | 
103 | In your component's methods...
104 | 
105 | ```javascript
106 | formatDate (date) {
107 |   return moment(date).format('LL')
108 | }
109 | ```
110 | 
111 | In the above example, if a user selected "2017-8-29" as the date, the `date` value would be "August 29, 2017".
112 | 
113 | ## API
114 | 
115 | ### Props
116 | 
117 | | Name   | Type     | Description                                                             |
118 | | :----- | :------- | :---------------------------------------------------------------------- |
119 | | color  | String   | Changes the theme color of the date picker.                             |
120 | | format | Function | Formats the date picker's emitted date via a user specified function.   |
121 | | min    | String   | Limits the date to a minimum specified value.                           |
122 | | max    | String   | Limits the date to a maximum specified value.                           |
123 | 
124 | ### Events
125 | 
126 | | Name   | Description |
127 | | :----- | :---------- |
128 | | close  | Closes the date picker. This is fired when the Cancel button is pressed, when the escape key is pressed, or when the input event is emitted.     |
129 | | input  | Sets the selected date. This is fired when the Ok button is pressed, or when the user presses the enter or space key after selecting a date. If a format function is passed to the date picker, the emitted value will be run through that before this event is emitted.   |
130 | 


--------------------------------------------------------------------------------
/dist/vue-date-picker.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-date-picker",[],t):"object"==typeof exports?exports["vue-date-picker"]=t():e["vue-date-picker"]=t()}(this,function(){return function(e){function t(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t,a){a(1);var r=a(6)(a(7),a(8),"data-v-58e44443",null);e.exports=r.exports},function(e,t,a){var r=a(2);"string"==typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);a(4)("326a8e33",r,!0)},function(e,t,a){t=e.exports=a(3)(!1),t.push([e.id,"[data-v-58e44443],[data-v-58e44443]:after,[data-v-58e44443]:before{box-sizing:inherit}button[data-v-58e44443],div[data-v-58e44443],h2[data-v-58e44443],h3[data-v-58e44443],h4[data-v-58e44443],table[data-v-58e44443],tbody[data-v-58e44443],td[data-v-58e44443],thead[data-v-58e44443],tr[data-v-58e44443]{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}button[data-v-58e44443]{border-radius:2px;cursor:pointer;display:inline-block;font-size:16px;padding:0 16px;outline:none;user-select:none}.flex[data-v-58e44443]{display:flex}.flex-center[data-v-58e44443]{display:flex;align-items:center;justify-content:center}.date-picker-background[data-v-58e44443],.date-picker-container[data-v-58e44443]{overflow-y:auto;position:fixed;top:0;left:0;width:100%;height:100%}.date-picker-container[data-v-58e44443]{line-height:1.5;z-index:9998}.date-picker-background[data-v-58e44443]{background-color:rgba(0,0,0,.5);z-index:9999}.calendar-faint[data-v-58e44443]{opacity:.75}.calendar-container[data-v-58e44443]{background-color:#fff;border-radius:2px;box-shadow:0 12px 52px rgba(0,0,0,.25);cursor:auto;position:relative;user-select:text;width:350px;z-index:10001;user-select:none}.calendar[data-v-58e44443]{height:500px;position:relative}.hidden-footer .calendar[data-v-58e44443]{height:470px}.calendar-header[data-v-58e44443]{border-top-left-radius:2px;border-top-right-radius:2px;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:16px 28px}.calendar-header h2[data-v-58e44443],.calendar-header h3[data-v-58e44443]{cursor:default}.calendar-header h2.calendar-faint[data-v-58e44443],.calendar-header h3.calendar-faint[data-v-58e44443]{cursor:pointer}.calendar-header h2[data-v-58e44443]{font-size:28px;line-height:30px;margin-top:3px}.calendar-header h3[data-v-58e44443]{font-size:1.125rem;font-weight:300}.calendar-body[data-v-58e44443]{padding:16px}.calendar-date[data-v-58e44443]{display:flex}.calendar-date .calendar-arrows.left[data-v-58e44443]{display:flex;align-items:center;justify-content:flex-start}.calendar-current-date[data-v-58e44443]{cursor:default;text-align:center}.calendar-date .calendar-arrows.right[data-v-58e44443]{display:flex;align-items:center;justify-content:flex-end}.calendar-date>div[data-v-58e44443]{width:33.333%}.calendar-date h4[data-v-58e44443]{font-size:14px;font-weight:500}.calendar-arrows[data-v-58e44443]{cursor:pointer;padding:0 8px}.calendar-body table[data-v-58e44443]{border-spacing:2px;border-collapse:separate;cursor:default;font-size:12px;margin-top:8px;table-layout:fixed;text-align:center;width:100%}.calendar-body table thead[data-v-58e44443]{color:#757575}.calendar-body table thead td[data-v-58e44443]{cursor:default!important}.calendar-body tr[data-v-58e44443]{height:43px;vertical-align:middle}.calendar-body td[data-v-58e44443]{border-radius:50%;cursor:pointer;vertical-align:middle;transition:background-color .15s;width:43px}.calendar-body td[data-v-58e44443]:focus{outline:none}.calendar-body tbody td[data-v-58e44443]:hover{background-color:rgba(0,0,0,.1)}.calendar-body td[data-v-58e44443]:empty{background-color:transparent!important;cursor:default}.calendar-body td.current-day[data-v-58e44443]{font-weight:700}.calendar-body td.disabled[data-v-58e44443]{color:#c5c5c5;cursor:default;pointer-events:none}.calendar-body td.selected[data-v-58e44443]{border-radius:50%;color:#fff;cursor:pointer}.calendar-year-select[data-v-58e44443]{box-shadow:inset 0 -1px 1px rgba(0,0,0,.075);height:353px;overflow-y:scroll;text-align:center}.hidden-footer .calendar-year-select[data-v-58e44443]{height:378px}.calendar-year-select div[data-v-58e44443]{cursor:pointer;padding:8px 0;transition:background-color .15s}.calendar-year-select div[data-v-58e44443]:hover{background-color:rgba(0,0,0,.1)}.calendar-year-select .selected[data-v-58e44443]{font-size:24px}.calendar-footer[data-v-58e44443]{position:absolute;bottom:16px;right:16px}.calendar-footer button[data-v-58e44443]{background-color:transparent;border:1px solid transparent;box-shadow:none}.calendar-fade-enter-active[data-v-58e44443],.calendar-fade-leave-active[data-v-58e44443]{transition:opacity .15s}.calendar-fade-enter[data-v-58e44443],.calendar-fade-leave-to[data-v-58e44443]{opacity:0}",""])},function(e,t){function a(e,t){var a=e[1]||"",n=e[3];if(!n)return a;if(t&&"function"==typeof btoa){var o=r(n),i=n.sources.map(function(e){return"/*# sourceURL="+n.sourceRoot+e+" */"});return[a].concat(i).concat([o]).join("\n")}return[a].join("\n")}function r(e){var t=btoa(unescape(encodeURIComponent(JSON.stringify(e)))),a="sourceMappingURL=data:application/json;charset=utf-8;base64,"+t;return"/*# "+a+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=a(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,a){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},n=0;n<this.length;n++){var o=this[n][0];"number"==typeof o&&(r[o]=!0)}for(n=0;n<e.length;n++){var i=e[n];"number"==typeof i[0]&&r[i[0]]||(a&&!i[2]?i[2]=a:a&&(i[2]="("+i[2]+") and ("+a+")"),t.push(i))}},t}},function(e,t,a){function r(e){for(var t=0;t<e.length;t++){var a=e[t],r=l[a.id];if(r){r.refs++;for(var n=0;n<r.parts.length;n++)r.parts[n](a.parts[n]);for(;n<a.parts.length;n++)r.parts.push(o(a.parts[n]));r.parts.length>a.parts.length&&(r.parts.length=a.parts.length)}else{for(var i=[],n=0;n<a.parts.length;n++)i.push(o(a.parts[n]));l[a.id]={id:a.id,refs:1,parts:i}}}}function n(){var e=document.createElement("style");return e.type="text/css",u.appendChild(e),e}function o(e){var t,a,r=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(r){if(v)return p;r.parentNode.removeChild(r)}if(y){var o=f++;r=h||(h=n()),t=i.bind(null,r,o,!1),a=i.bind(null,r,o,!0)}else r=n(),t=d.bind(null,r),a=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else a()}}function i(e,t,a,r){var n=a?"":r.css;if(e.styleSheet)e.styleSheet.cssText=g(t,n);else{var o=document.createTextNode(n),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function d(e,t){var a=t.css,r=t.media,n=t.sourceMap;if(r&&e.setAttribute("media",r),n&&(a+="\n/*# sourceURL="+n.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),e.styleSheet)e.styleSheet.cssText=a;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(a))}}var s="undefined"!=typeof document,c=a(5),l={},u=s&&(document.head||document.getElementsByTagName("head")[0]),h=null,f=0,v=!1,p=function(){},y="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,a){v=a;var n=c(e,t);return r(n),function(t){for(var a=[],o=0;o<n.length;o++){var i=n[o],d=l[i.id];d.refs--,a.push(d)}t?(n=c(e,t),r(n)):n=[];for(var o=0;o<a.length;o++){var d=a[o];if(0===d.refs){for(var s=0;s<d.parts.length;s++)d.parts[s]();delete l[d.id]}}}};var g=function(){var e=[];return function(t,a){return e[t]=a,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var a=[],r={},n=0;n<t.length;n++){var o=t[n],i=o[0],d=o[1],s=o[2],c=o[3],l={id:e+":"+n,css:d,media:s,sourceMap:c};r[i]?r[i].parts.push(l):a.push(r[i]={id:i,parts:[l]})}return a}},function(e,t){e.exports=function(e,t,a,r){var n,o=e=e||{},i=typeof e["default"];"object"!==i&&"function"!==i||(n=e,o=e["default"]);var d="function"==typeof o?o.options:o;if(t&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns),a&&(d._scopeId=a),r){var s=Object.create(d.computed||null);Object.keys(r).forEach(function(e){var t=r[e];s[e]=function(){return t}}),d.computed=s}return{esModule:n,exports:o,options:d}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a={0:"Sun",1:"Mon",2:"Tue",3:"Wed",4:"Thu",5:"Fri",6:"Sat"},r={0:"January",1:"February",2:"March",3:"April",4:"May",5:"June",6:"July",7:"August",8:"September",9:"October",10:"November",11:"December"},n=function(e,t,a){var r=null==e?0:e.length;if(!r)return[];t=null==t?0:t,a=void 0===a?r:a,t<0&&(t=-t>r?0:r+t),a=a>r?r:a,a<0&&(a+=r),r=t>a?0:a-t>>>0,t>>>=0;for(var n=-1,o=new Array(r);++n<r;)o[n]=e[n+t];return o},o=function(e,t){t=Math.max(t,0);var a=null==e?0:e.length;if(!a||t<1)return[];for(var r=0,o=0,i=new Array(Math.ceil(a/t));r<a;)i[o++]=n(e,r,r+=t);return i};t["default"]={props:{color:{type:String,required:!1,"default":"#009688"},format:{type:Function,required:!1},min:{type:String,required:!1},max:{type:String,required:!1},value:{type:String,required:!1},footer:{type:Boolean,required:!1,"default":!1}},computed:{initialDate:function(){return!(!this.value&&!this.min)},specifiedDate:function(){return new Date(this.value)},calculatedDate:function(){var e=this.selectedDay>=10?this.selectedDay:"0"+this.selectedDay,t=this.selectedMonth+1>=10?this.selectedMonth+1:"0"+(this.selectedMonth+1);return this.selectedYear+"-"+t+"-"+e},abbrivatedDay:function(){return a[this.selectedDayOfWeek]},currentMonthWord:function(){return r[this.currentMonth]},selectedMonthWord:function(){return r[this.selectedMonth]},minDate:function(){if(this.min){var e=this.min.split("-");return new Date(e[0],e[1],e[2])}},maxDate:function(){if(this.max){var e=this.max.split("-");return new Date(e[0],e[1],e[2])}},showLeftArrow:function(){return!this.min||(this.minDate.getFullYear()!==this.currentYear||this.minDate.getMonth()-1!==this.currentMonth)},showRightArrow:function(){return!this.max||(this.maxDate.getFullYear()!==this.currentYear||this.maxDate.getMonth()-1!==this.currentMonth)},calendar:function(){for(var e=this,t=[],a=new Date(this.currentYear,this.currentMonth,1).getDay(),r=0,n=a;r<n;r++)t.push("");for(var i=32-new Date(this.currentYear,this.currentMonth,32).getDate(),d=0;d<i;d++)t.push(d+1);var s=new Date,c=t.map(function(t){var a=t===s.getDate()&&e.currentMonth===s.getMonth()&&e.currentYear===s.getFullYear(),r=e.selectedDay===t&&e.currentMonth===e.selectedMonth&&e.currentYear===e.selectedYear,n=e.dayDisabled(t);return{day:t,currentDay:a,selected:r,disabled:n}});return o(c,7)},years:function i(){var e=this,t=void 0;t=this.min?this.minDate.getFullYear():this.value?this.specifiedDate.getFullYear():(new Date).getFullYear();for(var a=this.max?this.maxDate.getFullYear()+1-t:101,i=[],r=t,n=t+a;r<n;r++)i.push(r);return i.map(function(t){return{year:t,selected:t===e.selectedYear}})}},created:function(){this.hideBodyOverflow(!0),this.setDate(),this.setEscapeEvent()},data:function(){return{selecting:"date",currentMonth:"",currentYear:"",selectedDayOfWeek:"",selectedDay:"",selectedMonth:"",selectedYear:""}},methods:{setSelecting:function(e){var t=this;this.selecting=e,"year"===e&&this.$nextTick(function(){var e=document.querySelector(".calendar-year-select"),a=document.getElementById(t.selectedYear+"-calendar-year");e.scrollTop=a.offsetTop-100-76})},setByDay:function(e){e.disabled||(this.selectedYear=this.currentYear,this.selectedDay=e.day,this.selectedMonth=this.currentMonth,this.selectedDayOfWeek=new Date(this.selectedYear,this.selectedMonth,e.day).getDay(),this.footer&&this.onInput())},setByMonth:function(e){return 12===e?(this.currentYear=this.currentYear+1,void(this.currentMonth=0)):e===-1?(this.currentYear=this.currentYear-1,void(this.currentMonth=11)):void(this.currentMonth=e)},setByYear:function(e){this.selectedYear=e,this.currentYear=e,this.selecting="date"},setDate:function(){var e=void 0;e=this.min&&this.min&&!this.value?new Date(this.min):this.value&&this.value?new Date(this.value):new Date,this.initialDate?this.selectedDay=e.getDate()+1:this.selectedDay=e.getDate(),this.selectedDayOfWeek=e.getDay(),this.selectedMonth=e.getMonth(),this.currentMonth=e.getMonth(),this.selectedYear=e.getFullYear(),this.currentYear=e.getFullYear()},dayDisabled:function(e){return!!(this.min&&this.minDate.getMonth()-1===this.currentMonth&&this.minDate.getFullYear()===this.currentYear&&e<this.minDate.getDate())||!!(this.max&&this.maxDate.getMonth()-1===this.currentMonth&&this.maxDate.getFullYear()===this.currentYear&&e>this.maxDate.getDate())},hideBodyOverflow:function(e){var t=document.querySelector("body");return e===!0?void(t.style.overflow="hidden"):void(t.style.overflow="")},setEscapeEvent:function(){var e=this;document.addEventListener("keydown",function(t){27!=t.keyCode&&"Escape"!=t.key||e.onClose()})},onInput:function(){var e=this.format?this.format(this.calculatedDate):this.calculatedDate;this.$emit("input",e),this.onClose()},onClose:function(){this.hideBodyOverflow(!1),this.$emit("close")}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"date-picker-container flex-center","class":{"hidden-footer":e.footer}},[a("div",{staticClass:"date-picker-background flex-center",on:{click:function(t){t.stopPropagation(),t.preventDefault(),e.onClose(t)}}}),e._v(" "),a("div",{staticClass:"calendar-container"},[a("div",{staticClass:"calendar"},[a("div",{staticClass:"calendar-header flex-center",style:{"background-color":e.color}},[a("div",[a("h3",{"class":{"calendar-faint":"date"===e.selecting},on:{click:function(t){e.setSelecting("year")}}},[e._v("\n            "+e._s(e.selectedYear)+"\n          ")]),e._v(" "),a("h2",{"class":{"calendar-faint":"year"===e.selecting},on:{click:function(t){e.setSelecting("date")}}},[e._v("\n            "+e._s(e.abbrivatedDay)+", "+e._s(e.selectedMonthWord)+" "+e._s(e.selectedDay)+"\n          ")])])]),e._v(" "),"date"===e.selecting?a("div",{staticClass:"calendar-body"},[a("div",{staticClass:"calendar-date"},[a("div",[e.showLeftArrow?a("div",{staticClass:"calendar-arrows flex left",on:{click:function(t){e.setByMonth(e.currentMonth-1)}}},[a("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"}},[a("path",{attrs:{fill:"#212121",d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"}})])]):e._e()]),e._v(" "),a("div",{staticClass:"calendar-current-date flex-center"},[a("h4",[e._v(e._s(e.currentMonthWord)+" "+e._s(e.currentYear))])]),e._v(" "),a("div",[e.showRightArrow?a("div",{staticClass:"calendar-arrows flex right",on:{click:function(t){e.setByMonth(e.currentMonth+1)}}},[a("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"}},[a("path",{attrs:{fill:"#212121",d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}})])]):e._e()])]),e._v(" "),a("table",[e._m(0),e._v(" "),a("tbody",e._l(e.calendar,function(t,r){return a("tr",{key:r},e._l(t,function(t,r){return a("td",{key:"day-"+r+"-"+t.day,"class":{"current-day":t.currentDay,disabled:t.disabled,selected:t.selected},style:{color:t.currentDay&&!t.selected?e.color:"","background-color":t.selected?e.color:""},attrs:{tabindex:"0"},on:{keydown:[function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key)?void e.onInput(t):null},function(t){return"button"in t||!e._k(t.keyCode,"space",32,t.key)?(t.stopPropagation(),t.preventDefault(),void e.onInput(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"esc",27,t.key)?void e.onClose(t):null}],click:function(a){e.setByDay(t)}}},[e._v(e._s(t.day))])}))}))])]):e._e(),e._v(" "),"year"===e.selecting?a("div",{staticClass:"calendar-year-select"},e._l(e.years,function(t){return a("div",{key:t.year,"class":{selected:t.selected},style:{color:t.selected?e.color:""},attrs:{id:t.year+"-calendar-year"},on:{click:function(a){e.setByYear(t.year)}}},[e._v("\n          "+e._s(t.year)+"\n        ")])})):e._e(),e._v(" "),e.footer?e._e():a("div",{staticClass:"calendar-footer"},[a("button",{style:{color:e.color},on:{click:function(t){t.stopPropagation(),t.preventDefault(),e.onClose(t)}}},[e._v("Cancel")]),e._v(" "),a("button",{style:{color:e.color},on:{click:function(t){t.stopPropagation(),t.preventDefault(),e.onInput(t)}}},[e._v("Ok")])])])])])},staticRenderFns:[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("thead",[a("tr",[a("td",[e._v("S")]),e._v(" "),a("td",[e._v("M")]),e._v(" "),a("td",[e._v("T")]),e._v(" "),a("td",[e._v("W")]),e._v(" "),a("td",[e._v("T")]),e._v(" "),a("td",[e._v("F")]),e._v(" "),a("td",[e._v("S")])])])}]}}])});


--------------------------------------------------------------------------------
/dist/vue-date-picker.min.js:
--------------------------------------------------------------------------------
1 | window.DatePicker=function(e){function t(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t,a){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}var n=a(1),o=r(n);e.exports={install:function(e,t){e.component("date-picker",o["default"])}}},function(e,t,a){a(2);var r=a(7)(a(8),a(9),"data-v-58e44443",null);e.exports=r.exports},function(e,t,a){var r=a(3);"string"==typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);a(5)("326a8e33",r,!0)},function(e,t,a){t=e.exports=a(4)(!1),t.push([e.id,"[data-v-58e44443],[data-v-58e44443]:after,[data-v-58e44443]:before{box-sizing:inherit}button[data-v-58e44443],div[data-v-58e44443],h2[data-v-58e44443],h3[data-v-58e44443],h4[data-v-58e44443],table[data-v-58e44443],tbody[data-v-58e44443],td[data-v-58e44443],thead[data-v-58e44443],tr[data-v-58e44443]{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}button[data-v-58e44443]{border-radius:2px;cursor:pointer;display:inline-block;font-size:16px;padding:0 16px;outline:none;user-select:none}.flex[data-v-58e44443]{display:flex}.flex-center[data-v-58e44443]{display:flex;align-items:center;justify-content:center}.date-picker-background[data-v-58e44443],.date-picker-container[data-v-58e44443]{overflow-y:auto;position:fixed;top:0;left:0;width:100%;height:100%}.date-picker-container[data-v-58e44443]{line-height:1.5;z-index:9998}.date-picker-background[data-v-58e44443]{background-color:rgba(0,0,0,.5);z-index:9999}.calendar-faint[data-v-58e44443]{opacity:.75}.calendar-container[data-v-58e44443]{background-color:#fff;border-radius:2px;box-shadow:0 12px 52px rgba(0,0,0,.25);cursor:auto;position:relative;user-select:text;width:350px;z-index:10001;user-select:none}.calendar[data-v-58e44443]{height:500px;position:relative}.hidden-footer .calendar[data-v-58e44443]{height:470px}.calendar-header[data-v-58e44443]{border-top-left-radius:2px;border-top-right-radius:2px;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:16px 28px}.calendar-header h2[data-v-58e44443],.calendar-header h3[data-v-58e44443]{cursor:default}.calendar-header h2.calendar-faint[data-v-58e44443],.calendar-header h3.calendar-faint[data-v-58e44443]{cursor:pointer}.calendar-header h2[data-v-58e44443]{font-size:28px;line-height:30px;margin-top:3px}.calendar-header h3[data-v-58e44443]{font-size:1.125rem;font-weight:300}.calendar-body[data-v-58e44443]{padding:16px}.calendar-date[data-v-58e44443]{display:flex}.calendar-date .calendar-arrows.left[data-v-58e44443]{display:flex;align-items:center;justify-content:flex-start}.calendar-current-date[data-v-58e44443]{cursor:default;text-align:center}.calendar-date .calendar-arrows.right[data-v-58e44443]{display:flex;align-items:center;justify-content:flex-end}.calendar-date>div[data-v-58e44443]{width:33.333%}.calendar-date h4[data-v-58e44443]{font-size:14px;font-weight:500}.calendar-arrows[data-v-58e44443]{cursor:pointer;padding:0 8px}.calendar-body table[data-v-58e44443]{border-spacing:2px;border-collapse:separate;cursor:default;font-size:12px;margin-top:8px;table-layout:fixed;text-align:center;width:100%}.calendar-body table thead[data-v-58e44443]{color:#757575}.calendar-body table thead td[data-v-58e44443]{cursor:default!important}.calendar-body tr[data-v-58e44443]{height:43px;vertical-align:middle}.calendar-body td[data-v-58e44443]{border-radius:50%;cursor:pointer;vertical-align:middle;transition:background-color .15s;width:43px}.calendar-body td[data-v-58e44443]:focus{outline:none}.calendar-body tbody td[data-v-58e44443]:hover{background-color:rgba(0,0,0,.1)}.calendar-body td[data-v-58e44443]:empty{background-color:transparent!important;cursor:default}.calendar-body td.current-day[data-v-58e44443]{font-weight:700}.calendar-body td.disabled[data-v-58e44443]{color:#c5c5c5;cursor:default;pointer-events:none}.calendar-body td.selected[data-v-58e44443]{border-radius:50%;color:#fff;cursor:pointer}.calendar-year-select[data-v-58e44443]{box-shadow:inset 0 -1px 1px rgba(0,0,0,.075);height:353px;overflow-y:scroll;text-align:center}.hidden-footer .calendar-year-select[data-v-58e44443]{height:378px}.calendar-year-select div[data-v-58e44443]{cursor:pointer;padding:8px 0;transition:background-color .15s}.calendar-year-select div[data-v-58e44443]:hover{background-color:rgba(0,0,0,.1)}.calendar-year-select .selected[data-v-58e44443]{font-size:24px}.calendar-footer[data-v-58e44443]{position:absolute;bottom:16px;right:16px}.calendar-footer button[data-v-58e44443]{background-color:transparent;border:1px solid transparent;box-shadow:none}.calendar-fade-enter-active[data-v-58e44443],.calendar-fade-leave-active[data-v-58e44443]{transition:opacity .15s}.calendar-fade-enter[data-v-58e44443],.calendar-fade-leave-to[data-v-58e44443]{opacity:0}",""])},function(e,t){function a(e,t){var a=e[1]||"",n=e[3];if(!n)return a;if(t&&"function"==typeof btoa){var o=r(n),i=n.sources.map(function(e){return"/*# sourceURL="+n.sourceRoot+e+" */"});return[a].concat(i).concat([o]).join("\n")}return[a].join("\n")}function r(e){var t=btoa(unescape(encodeURIComponent(JSON.stringify(e)))),a="sourceMappingURL=data:application/json;charset=utf-8;base64,"+t;return"/*# "+a+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=a(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,a){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},n=0;n<this.length;n++){var o=this[n][0];"number"==typeof o&&(r[o]=!0)}for(n=0;n<e.length;n++){var i=e[n];"number"==typeof i[0]&&r[i[0]]||(a&&!i[2]?i[2]=a:a&&(i[2]="("+i[2]+") and ("+a+")"),t.push(i))}},t}},function(e,t,a){function r(e){for(var t=0;t<e.length;t++){var a=e[t],r=l[a.id];if(r){r.refs++;for(var n=0;n<r.parts.length;n++)r.parts[n](a.parts[n]);for(;n<a.parts.length;n++)r.parts.push(o(a.parts[n]));r.parts.length>a.parts.length&&(r.parts.length=a.parts.length)}else{for(var i=[],n=0;n<a.parts.length;n++)i.push(o(a.parts[n]));l[a.id]={id:a.id,refs:1,parts:i}}}}function n(){var e=document.createElement("style");return e.type="text/css",u.appendChild(e),e}function o(e){var t,a,r=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(r){if(v)return p;r.parentNode.removeChild(r)}if(y){var o=f++;r=h||(h=n()),t=i.bind(null,r,o,!1),a=i.bind(null,r,o,!0)}else r=n(),t=d.bind(null,r),a=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else a()}}function i(e,t,a,r){var n=a?"":r.css;if(e.styleSheet)e.styleSheet.cssText=g(t,n);else{var o=document.createTextNode(n),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function d(e,t){var a=t.css,r=t.media,n=t.sourceMap;if(r&&e.setAttribute("media",r),n&&(a+="\n/*# sourceURL="+n.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),e.styleSheet)e.styleSheet.cssText=a;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(a))}}var s="undefined"!=typeof document,c=a(6),l={},u=s&&(document.head||document.getElementsByTagName("head")[0]),h=null,f=0,v=!1,p=function(){},y="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,a){v=a;var n=c(e,t);return r(n),function(t){for(var a=[],o=0;o<n.length;o++){var i=n[o],d=l[i.id];d.refs--,a.push(d)}t?(n=c(e,t),r(n)):n=[];for(var o=0;o<a.length;o++){var d=a[o];if(0===d.refs){for(var s=0;s<d.parts.length;s++)d.parts[s]();delete l[d.id]}}}};var g=function(){var e=[];return function(t,a){return e[t]=a,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var a=[],r={},n=0;n<t.length;n++){var o=t[n],i=o[0],d=o[1],s=o[2],c=o[3],l={id:e+":"+n,css:d,media:s,sourceMap:c};r[i]?r[i].parts.push(l):a.push(r[i]={id:i,parts:[l]})}return a}},function(e,t){e.exports=function(e,t,a,r){var n,o=e=e||{},i=typeof e["default"];"object"!==i&&"function"!==i||(n=e,o=e["default"]);var d="function"==typeof o?o.options:o;if(t&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns),a&&(d._scopeId=a),r){var s=Object.create(d.computed||null);Object.keys(r).forEach(function(e){var t=r[e];s[e]=function(){return t}}),d.computed=s}return{esModule:n,exports:o,options:d}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a={0:"Sun",1:"Mon",2:"Tue",3:"Wed",4:"Thu",5:"Fri",6:"Sat"},r={0:"January",1:"February",2:"March",3:"April",4:"May",5:"June",6:"July",7:"August",8:"September",9:"October",10:"November",11:"December"},n=function(e,t,a){var r=null==e?0:e.length;if(!r)return[];t=null==t?0:t,a=void 0===a?r:a,t<0&&(t=-t>r?0:r+t),a=a>r?r:a,a<0&&(a+=r),r=t>a?0:a-t>>>0,t>>>=0;for(var n=-1,o=new Array(r);++n<r;)o[n]=e[n+t];return o},o=function(e,t){t=Math.max(t,0);var a=null==e?0:e.length;if(!a||t<1)return[];for(var r=0,o=0,i=new Array(Math.ceil(a/t));r<a;)i[o++]=n(e,r,r+=t);return i};t["default"]={props:{color:{type:String,required:!1,"default":"#009688"},format:{type:Function,required:!1},min:{type:String,required:!1},max:{type:String,required:!1},value:{type:String,required:!1},footer:{type:Boolean,required:!1,"default":!1}},computed:{initialDate:function(){return!(!this.value&&!this.min)},specifiedDate:function(){return new Date(this.value)},calculatedDate:function(){var e=this.selectedDay>=10?this.selectedDay:"0"+this.selectedDay,t=this.selectedMonth+1>=10?this.selectedMonth+1:"0"+(this.selectedMonth+1);return this.selectedYear+"-"+t+"-"+e},abbrivatedDay:function(){return a[this.selectedDayOfWeek]},currentMonthWord:function(){return r[this.currentMonth]},selectedMonthWord:function(){return r[this.selectedMonth]},minDate:function(){if(this.min){var e=this.min.split("-");return new Date(e[0],e[1],e[2])}},maxDate:function(){if(this.max){var e=this.max.split("-");return new Date(e[0],e[1],e[2])}},showLeftArrow:function(){return!this.min||(this.minDate.getFullYear()!==this.currentYear||this.minDate.getMonth()-1!==this.currentMonth)},showRightArrow:function(){return!this.max||(this.maxDate.getFullYear()!==this.currentYear||this.maxDate.getMonth()-1!==this.currentMonth)},calendar:function(){for(var e=this,t=[],a=new Date(this.currentYear,this.currentMonth,1).getDay(),r=0,n=a;r<n;r++)t.push("");for(var i=32-new Date(this.currentYear,this.currentMonth,32).getDate(),d=0;d<i;d++)t.push(d+1);var s=new Date,c=t.map(function(t){var a=t===s.getDate()&&e.currentMonth===s.getMonth()&&e.currentYear===s.getFullYear(),r=e.selectedDay===t&&e.currentMonth===e.selectedMonth&&e.currentYear===e.selectedYear,n=e.dayDisabled(t);return{day:t,currentDay:a,selected:r,disabled:n}});return o(c,7)},years:function i(){var e=this,t=void 0;t=this.min?this.minDate.getFullYear():this.value?this.specifiedDate.getFullYear():(new Date).getFullYear();for(var a=this.max?this.maxDate.getFullYear()+1-t:101,i=[],r=t,n=t+a;r<n;r++)i.push(r);return i.map(function(t){return{year:t,selected:t===e.selectedYear}})}},created:function(){this.hideBodyOverflow(!0),this.setDate(),this.setEscapeEvent()},data:function(){return{selecting:"date",currentMonth:"",currentYear:"",selectedDayOfWeek:"",selectedDay:"",selectedMonth:"",selectedYear:""}},methods:{setSelecting:function(e){var t=this;this.selecting=e,"year"===e&&this.$nextTick(function(){var e=document.querySelector(".calendar-year-select"),a=document.getElementById(t.selectedYear+"-calendar-year");e.scrollTop=a.offsetTop-100-76})},setByDay:function(e){e.disabled||(this.selectedYear=this.currentYear,this.selectedDay=e.day,this.selectedMonth=this.currentMonth,this.selectedDayOfWeek=new Date(this.selectedYear,this.selectedMonth,e.day).getDay(),this.footer&&this.onInput())},setByMonth:function(e){return 12===e?(this.currentYear=this.currentYear+1,void(this.currentMonth=0)):e===-1?(this.currentYear=this.currentYear-1,void(this.currentMonth=11)):void(this.currentMonth=e)},setByYear:function(e){this.selectedYear=e,this.currentYear=e,this.selecting="date"},setDate:function(){var e=void 0;e=this.min&&this.min&&!this.value?new Date(this.min):this.value&&this.value?new Date(this.value):new Date,this.initialDate?this.selectedDay=e.getDate()+1:this.selectedDay=e.getDate(),this.selectedDayOfWeek=e.getDay(),this.selectedMonth=e.getMonth(),this.currentMonth=e.getMonth(),this.selectedYear=e.getFullYear(),this.currentYear=e.getFullYear()},dayDisabled:function(e){return!!(this.min&&this.minDate.getMonth()-1===this.currentMonth&&this.minDate.getFullYear()===this.currentYear&&e<this.minDate.getDate())||!!(this.max&&this.maxDate.getMonth()-1===this.currentMonth&&this.maxDate.getFullYear()===this.currentYear&&e>this.maxDate.getDate())},hideBodyOverflow:function(e){var t=document.querySelector("body");return e===!0?void(t.style.overflow="hidden"):void(t.style.overflow="")},setEscapeEvent:function(){var e=this;document.addEventListener("keydown",function(t){27!=t.keyCode&&"Escape"!=t.key||e.onClose()})},onInput:function(){var e=this.format?this.format(this.calculatedDate):this.calculatedDate;this.$emit("input",e),this.onClose()},onClose:function(){this.hideBodyOverflow(!1),this.$emit("close")}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"date-picker-container flex-center","class":{"hidden-footer":e.footer}},[a("div",{staticClass:"date-picker-background flex-center",on:{click:function(t){t.stopPropagation(),t.preventDefault(),e.onClose(t)}}}),e._v(" "),a("div",{staticClass:"calendar-container"},[a("div",{staticClass:"calendar"},[a("div",{staticClass:"calendar-header flex-center",style:{"background-color":e.color}},[a("div",[a("h3",{"class":{"calendar-faint":"date"===e.selecting},on:{click:function(t){e.setSelecting("year")}}},[e._v("\n            "+e._s(e.selectedYear)+"\n          ")]),e._v(" "),a("h2",{"class":{"calendar-faint":"year"===e.selecting},on:{click:function(t){e.setSelecting("date")}}},[e._v("\n            "+e._s(e.abbrivatedDay)+", "+e._s(e.selectedMonthWord)+" "+e._s(e.selectedDay)+"\n          ")])])]),e._v(" "),"date"===e.selecting?a("div",{staticClass:"calendar-body"},[a("div",{staticClass:"calendar-date"},[a("div",[e.showLeftArrow?a("div",{staticClass:"calendar-arrows flex left",on:{click:function(t){e.setByMonth(e.currentMonth-1)}}},[a("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"}},[a("path",{attrs:{fill:"#212121",d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"}})])]):e._e()]),e._v(" "),a("div",{staticClass:"calendar-current-date flex-center"},[a("h4",[e._v(e._s(e.currentMonthWord)+" "+e._s(e.currentYear))])]),e._v(" "),a("div",[e.showRightArrow?a("div",{staticClass:"calendar-arrows flex right",on:{click:function(t){e.setByMonth(e.currentMonth+1)}}},[a("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"}},[a("path",{attrs:{fill:"#212121",d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}})])]):e._e()])]),e._v(" "),a("table",[e._m(0),e._v(" "),a("tbody",e._l(e.calendar,function(t,r){return a("tr",{key:r},e._l(t,function(t,r){return a("td",{key:"day-"+r+"-"+t.day,"class":{"current-day":t.currentDay,disabled:t.disabled,selected:t.selected},style:{color:t.currentDay&&!t.selected?e.color:"","background-color":t.selected?e.color:""},attrs:{tabindex:"0"},on:{keydown:[function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key)?void e.onInput(t):null},function(t){return"button"in t||!e._k(t.keyCode,"space",32,t.key)?(t.stopPropagation(),t.preventDefault(),void e.onInput(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"esc",27,t.key)?void e.onClose(t):null}],click:function(a){e.setByDay(t)}}},[e._v(e._s(t.day))])}))}))])]):e._e(),e._v(" "),"year"===e.selecting?a("div",{staticClass:"calendar-year-select"},e._l(e.years,function(t){return a("div",{key:t.year,"class":{selected:t.selected},style:{color:t.selected?e.color:""},attrs:{id:t.year+"-calendar-year"},on:{click:function(a){e.setByYear(t.year)}}},[e._v("\n          "+e._s(t.year)+"\n        ")])})):e._e(),e._v(" "),e.footer?e._e():a("div",{staticClass:"calendar-footer"},[a("button",{style:{color:e.color},on:{click:function(t){t.stopPropagation(),t.preventDefault(),e.onClose(t)}}},[e._v("Cancel")]),e._v(" "),a("button",{style:{color:e.color},on:{click:function(t){t.stopPropagation(),t.preventDefault(),e.onInput(t)}}},[e._v("Ok")])])])])])},staticRenderFns:[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("thead",[a("tr",[a("td",[e._v("S")]),e._v(" "),a("td",[e._v("M")]),e._v(" "),a("td",[e._v("T")]),e._v(" "),a("td",[e._v("W")]),e._v(" "),a("td",[e._v("T")]),e._v(" "),a("td",[e._v("F")]),e._v(" "),a("td",[e._v("S")])])])}]}}]);


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 | 
  6 |   <title>Vue Date Picker</title>
  7 | 
  8 |   <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
  9 | 
 10 |   <style>
 11 |     body {
 12 |       font-family: 'Roboto', sans-serif;
 13 |     }
 14 | 
 15 |     .container {
 16 |       margin: auto;
 17 |       max-width: 760px;
 18 |     }
 19 | 
 20 |     .center {
 21 |       text-align: center;
 22 |     }
 23 | 
 24 |     .example {
 25 |       display: flex;
 26 |       justify-content: space-between;
 27 |       align-items: center;
 28 |       margin-top: 32px;
 29 |       padding-bottom: 32px;
 30 |     }
 31 | 
 32 |     .example:not(:last-child) {
 33 |       border-bottom: 1px solid #e0e0e0;
 34 |     }
 35 | 
 36 |     .example input {
 37 |       border: 1px solid #e0e0e0;
 38 |       border-radius: 2px;
 39 |       font-family: 'Roboto', sans-serif;
 40 |       font-size: 16px;
 41 |       margin-left: 16px;
 42 |       padding: 8px;
 43 |     }
 44 |   </style>
 45 | </head>
 46 | 
 47 | <body>
 48 |     <div class="app">
 49 |       <div class="container">
 50 |         <div class="center"><h2>Vue Date Picker</h2></div>
 51 | 
 52 |         <div class="example">
 53 |           <label for="regular-date">Select a date:</label>
 54 |           <input type="text" id="regular-date" readonly @focus="showRegularDate = true" v-model="regularDate">
 55 | 
 56 |           <transition name="calendar-fade">
 57 |             <date-picker color="#E91E63"
 58 |                          @close="showRegularDate = false"
 59 |                          v-if="showRegularDate"
 60 |                          v-model="regularDate"></date-picker>
 61 |           </transition>
 62 |         </div>
 63 | 
 64 |         <div class="example">
 65 |           <label for="min-date">Select a date starting from today:</label>
 66 |           <input type="text" id="min-date" readonly @focus="showMinDate = true" v-model="minDate">
 67 | 
 68 |           <transition name="calendar-fade">
 69 |             <date-picker color="#3F51B5"
 70 |                          :min="minDateLimit"
 71 |                          @close="showMinDate = false"
 72 |                          v-if="showMinDate"
 73 |                          v-model="minDate"></date-picker>
 74 |           </transition>
 75 |         </div>
 76 | 
 77 |         <div class="example">
 78 |           <label for="max-date">Select a date less than a week from now:</label>
 79 |           <input type="text" id="max-date" readonly @focus="showMaxDate = true" v-model="maxDate">
 80 | 
 81 |           <transition name="calendar-fade">
 82 |             <date-picker color="#00BCD4"
 83 |                          :max="maxDateLimit"
 84 |                          @close="showMaxDate = false"
 85 |                          v-if="showMaxDate"
 86 |                          v-model="maxDate"></date-picker>
 87 |           </transition>
 88 |         </div>
 89 | 
 90 |         <div class="example">
 91 |           <label for="range-date">Select a date within a week from now:</label>
 92 |           <input type="text" id="range-date" readonly @focus="showRangeDate = true" v-model="rangeDate">
 93 | 
 94 |           <transition name="calendar-fade">
 95 |             <date-picker color="#4CAF50"
 96 |                          :min="minDateLimit"
 97 |                          :max="maxDateLimit"
 98 |                          @close="showRangeDate = false"
 99 |                          v-if="showRangeDate"
100 |                          v-model="rangeDate"></date-picker>
101 |           </transition>
102 |         </div>
103 | 
104 |         <div class="example">
105 |           <label for="range-date">Start at a specified date:</label>
106 |           <input type="text" id="range-date" readonly @focus="showSpecifiedDate = true" v-model="specifiedDate">
107 | 
108 |           <transition name="calendar-fade">
109 |             <date-picker color="#FF9800"
110 |                          @close="showSpecifiedDate = false"
111 |                          v-if="showSpecifiedDate"
112 |                          v-model="specifiedDate"></date-picker>
113 |           </transition>
114 |         </div>
115 | 
116 |         <div class="example">
117 |           <label for="range-date">Format the chosen date:</label>
118 |           <input type="text" id="formatted-date" readonly @focus="showFormattedDate = true" v-model="formattedDate">
119 | 
120 |           <transition name="calendar-fade">
121 |             <date-picker color="#FF5722"
122 |                          :format="formatDate"
123 |                          @close="showFormattedDate = false"
124 |                          v-if="showFormattedDate"
125 |                          v-model="formattedDate"></date-picker>
126 |           </transition>
127 |         </div>
128 |       </div>
129 |     </div>
130 | 
131 |     <script src="../node_modules/vue/dist/vue.min.js"></script>
132 | 
133 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
134 | 
135 |     <script src="../dist/vue-date-picker.min.js"></script>
136 | 
137 |     <script>
138 |       Vue.use(DatePicker)
139 | 
140 |       new Vue({
141 |         el: '.app',
142 | 
143 |         created: function () {
144 |           var today = new Date
145 | 
146 |           this.minDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
147 | 
148 |           this.maxDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + (today.getDate() + 7)
149 |         },
150 | 
151 |         data: {
152 |           regularDate: '',
153 |           showRegularDate: false,
154 | 
155 |           minDateLimit: '',
156 |           minDate: '',
157 |           showMinDate: false,
158 | 
159 |           maxDateLimit: '',
160 |           maxDate: '',
161 |           showMaxDate: false,
162 | 
163 |           rangeDate: '',
164 |           showRangeDate: false,
165 | 
166 |           specifiedDate: '2016-4-19',
167 |           showSpecifiedDate: false,
168 | 
169 |           formattedDate: '',
170 |           showFormattedDate: false
171 |         },
172 | 
173 |         methods: {
174 |           formatDate: function (date) {
175 |             return moment(date).format('LL')
176 |           }
177 |         }
178 |       })
179 |     </script>
180 | </body>
181 | </html>
182 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-md-date-picker",
 3 |   "version": "1.0.16",
 4 |   "description": "A vue date picker component inspired by material design",
 5 |   "main": "dist/vue-date-picker.js",
 6 |   "scripts": {
 7 |     "build": "rimraf ./dist && webpack --config ./webpack.config.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/ridewn/vue-date-picker.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "javascript",
16 |     "date",
17 |     "picker",
18 |     "datepicker",
19 |     "calendar",
20 |     "time",
21 |     "component",
22 |     "material",
23 |     "design"
24 |   ],
25 |   "author": "Trevor Stacy",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/ridewn/vue-date-picker/issues"
29 |   },
30 |   "homepage": "https://github.com/ridewn/vue-date-picker#readme",
31 |   "devDependencies": {
32 |     "babel-core": "^6.10.4",
33 |     "babel-loader": "^6.2.4",
34 |     "babel-plugin-transform-runtime": "^6.9.0",
35 |     "babel-preset-es2015": "^6.9.0",
36 |     "babel-preset-stage-2": "^6.11.0",
37 |     "babel-runtime": "^6.9.2",
38 |     "css-loader": "^0.28.5",
39 |     "rimraf": "^2.6.1",
40 |     "vue": "^2.2.1",
41 |     "vue-html-loader": "^1.2.3",
42 |     "vue-loader": "^11.1.4",
43 |     "vue-style-loader": "^2.0.3",
44 |     "vue-template-compiler": "^2.2.1",
45 |     "webpack": "1.13.1",
46 |     "webpack-merge": "^4.1.0"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/DatePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="date-picker-container flex-center" :class="{'hidden-footer': footer }">
  3 |     <div class="date-picker-background flex-center" @click.stop.prevent="onClose"></div>
  4 | 
  5 |     <div class="calendar-container">
  6 |       <div class="calendar">
  7 |         <div :style="{ 'background-color': color }" class="calendar-header flex-center">
  8 |           <div>
  9 |             <h3 :class="{ 'calendar-faint': selecting === 'date' }"
 10 |                 @click="setSelecting('year')">
 11 |               {{ selectedYear }}
 12 |             </h3>
 13 | 
 14 |             <h2 :class="{ 'calendar-faint': selecting === 'year' }"
 15 |                 @click="setSelecting('date')">
 16 |               {{ abbrivatedDay }}, {{ selectedMonthWord }} {{ selectedDay }}
 17 |             </h2>
 18 |           </div>
 19 |         </div>
 20 | 
 21 |         <!-- Calendar -->
 22 |         <div class="calendar-body" v-if="selecting === 'date'">
 23 |           <div class="calendar-date">
 24 |             <div>
 25 |               <!-- The svg's are from the material design chevron arrows -->
 26 |               <div class="calendar-arrows flex left" @click="setByMonth(currentMonth - 1)"
 27 |                    v-if="showLeftArrow">
 28 |                 <svg xmlns="http://www.w3.org/2000/svg"
 29 |                      width="24"
 30 |                      height="24"
 31 |                      viewBox="0 0 24 24">
 32 |                   <path fill="#212121" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
 33 |                 </svg>
 34 |               </div>
 35 |             </div>
 36 | 
 37 |             <div class="calendar-current-date flex-center">
 38 |               <h4>{{ currentMonthWord }} {{ currentYear }}</h4>
 39 |             </div>
 40 | 
 41 |             <div>
 42 |               <div class="calendar-arrows flex right" @click="setByMonth(currentMonth + 1)"
 43 |                    v-if="showRightArrow">
 44 |                 <svg xmlns="http://www.w3.org/2000/svg"
 45 |                      width="24"
 46 |                      height="24"
 47 |                      viewBox="0 0 24 24">
 48 |                   <path fill="#212121" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
 49 |                 </svg>
 50 |               </div>
 51 |             </div>
 52 |           </div>
 53 | 
 54 |           <table>
 55 |             <thead>
 56 |               <tr>
 57 |                 <td>S</td>
 58 |                 <td>M</td>
 59 |                 <td>T</td>
 60 |                 <td>W</td>
 61 |                 <td>T</td>
 62 |                 <td>F</td>
 63 |                 <td>S</td>
 64 |               </tr>
 65 |             </thead>
 66 | 
 67 |             <tbody>
 68 |               <tr v-for="(days, index) in calendar" :key="index">
 69 |                 <td :style="{
 70 |                       'color': day.currentDay && ! day.selected ? color : '',
 71 |                       'background-color': day.selected ? color : ''
 72 |                     }"
 73 |                     :class="{
 74 |                       'current-day': day.currentDay,
 75 |                       'disabled': day.disabled,
 76 |                       'selected': day.selected
 77 |                     }"
 78 |                     v-for="(day, index) in days"
 79 |                     :key="`day-${index}-${day.day}`"
 80 |                     tabindex="0"
 81 |                     @keydown.enter="onInput"
 82 |                     @keydown.space.stop.prevent="onInput"
 83 |                     @keydown.esc="onClose"
 84 |                     @click="setByDay(day)">{{ day.day }}</td>
 85 |               </tr>
 86 |             </tbody>
 87 |           </table>
 88 |         </div>
 89 | 
 90 |         <!-- Years -->
 91 |         <div class="calendar-year-select" v-if="selecting === 'year'">
 92 |           <div :style="{ 'color': year.selected ? color : '' }"
 93 |                :class="{ 'selected': year.selected }"
 94 |                :id="`${year.year}-calendar-year`"
 95 |                v-for="year in years"
 96 |                :key="year.year"
 97 |                @click="setByYear(year.year)">
 98 |             {{ year.year }}
 99 |           </div>
100 |         </div>
101 | 
102 |         <div class="calendar-footer" v-if="! footer">
103 |           <button :style="{ 'color': color }" @click.stop.prevent="onClose">Cancel</button>
104 | 
105 |           <button :style="{ 'color': color }" @click.stop.prevent="onInput">Ok</button>
106 |         </div>
107 |       </div>
108 |     </div>
109 |   </div>
110 | </template>
111 | 
112 | <script>
113 |   /**
114 |    * Helpers for no dependencies™
115 |    */
116 | 
117 |   const dayMap = {
118 |     0: 'Sun',
119 |     1: 'Mon',
120 |     2: 'Tue',
121 |     3: 'Wed',
122 |     4: 'Thu',
123 |     5: 'Fri',
124 |     6: 'Sat',
125 |   }
126 | 
127 |   const monthMap = {
128 |     0: 'January',
129 |     1: 'February',
130 |     2: 'March',
131 |     3: 'April',
132 |     4: 'May',
133 |     5: 'June',
134 |     6: 'July',
135 |     7: 'August',
136 |     8: 'September',
137 |     9: 'October',
138 |     10: 'November',
139 |     11: 'December'
140 |   }
141 | 
142 |   // Thanks, Lodash.
143 | 
144 |   /**
145 |    * https://lodash.com/docs/4.17.4#slice
146 |    */
147 |   const slice = (array, start, end) => {
148 |     let length = array == null ? 0 : array.length
149 | 
150 |     if (! length) {
151 |       return []
152 |     }
153 | 
154 |     start = start == null ? 0 : start
155 | 
156 |     end = end === undefined ? length : end
157 | 
158 |     if (start < 0) {
159 |       start = -start > length ? 0 : (length + start)
160 |     }
161 | 
162 |     end = end > length ? length : end
163 | 
164 |     if (end < 0) {
165 |       end += length
166 |     }
167 | 
168 |     length = start > end ? 0 : ((end - start) >>> 0)
169 |     start >>>= 0
170 | 
171 |     let index = -1
172 | 
173 |     const result = new Array(length)
174 | 
175 |     while (++index < length) {
176 |       result[index] = array[index + start]
177 |     }
178 | 
179 |     return result
180 |   }
181 | 
182 |   /**
183 |    * https://lodash.com/docs/4.17.4#chunk
184 |    */
185 |   const chunk = (array, size) => {
186 |     size = Math.max(size, 0)
187 | 
188 |     const length = array == null ? 0 : array.length
189 | 
190 |     if (! length || size < 1) {
191 |       return []
192 |     }
193 | 
194 |     let index = 0
195 | 
196 |     let resIndex = 0
197 | 
198 |     const result = new Array(Math.ceil(length / size))
199 | 
200 |     while (index < length) {
201 |       result[resIndex++] = slice(array, index, (index += size))
202 |     }
203 | 
204 |     return result
205 |   }
206 | 
207 |   /**
208 |    * Actual component stuff
209 |    */
210 | 
211 |   export default {
212 |     props: {
213 |       color: {
214 |         type: String,
215 |         required: false,
216 |         default: '#009688'
217 |       },
218 | 
219 |       format: {
220 |         type: Function,
221 |         required: false
222 |       },
223 | 
224 |       min: {
225 |         type: String,
226 |         required: false
227 |       },
228 | 
229 |       max: {
230 |         type: String,
231 |         required: false
232 |       },
233 | 
234 |       value: {
235 |         type: String,
236 |         required: false
237 |       },
238 | 
239 |        footer: {
240 |          type: Boolean,
241 |          required: false,
242 |          default: false
243 |        }
244 |     },
245 | 
246 |     computed: {
247 |       /**
248 |        * Returns if there was any initial date settings.
249 |        *
250 |        * @return {Boolean}
251 |        */
252 |       initialDate () {
253 |         return !! (this.value || this.min)
254 |       },
255 | 
256 |       /**
257 |        * The date property, converted to a date.
258 |        *
259 |        * @return {Date}
260 |        */
261 |       specifiedDate () {
262 |         return new Date(this.value)
263 |       },
264 | 
265 |       /**
266 |        * Returns a formatted date e.g. 2016-4-19. This is emiited on the input event.
267 |        *
268 |        * @return {String}
269 |        */
270 |       calculatedDate () {
271 |         const day = this.selectedDay >= 10 ? this.selectedDay : `0${this.selectedDay}`
272 | 
273 |         const month = this.selectedMonth + 1 >= 10 ? this.selectedMonth + 1 : `0${this.selectedMonth + 1}`
274 | 
275 |         return `${this.selectedYear}-${month}-${day}`
276 |       },
277 | 
278 |       /**
279 |        * Returns an abbreviation of a day e.g. Sun, Mon, etc.
280 |        *
281 |        * @return {String}
282 |        */
283 |       abbrivatedDay () {
284 |         return dayMap[this.selectedDayOfWeek]
285 |       },
286 | 
287 |       /**
288 |        * Returns the currently viewed month as a word.
289 |        *
290 |        * @return {String}
291 |        */
292 |       currentMonthWord () {
293 |         return monthMap[this.currentMonth]
294 |       },
295 | 
296 |       /**
297 |        * Returns the selected month as a word.
298 |        *
299 |        * @return {String}
300 |        */
301 |       selectedMonthWord () {
302 |         return monthMap[this.selectedMonth]
303 |       },
304 | 
305 |       /**
306 |        * The minimum date the calendar will allow you to select.
307 |        *
308 |        * @return {Date}
309 |        */
310 |       minDate () {
311 |         if (this.min) {
312 |           const minDateSplit = this.min.split('-')
313 | 
314 |           return new Date(minDateSplit[0], minDateSplit[1], minDateSplit[2])
315 |         }
316 | 
317 |         return
318 |       },
319 | 
320 |       /**
321 |        * The maximum date the calendar will allow you to select.
322 |        *
323 |        * @return {Date}
324 |        */
325 |       maxDate () {
326 |         if (this.max) {
327 |           const maxDateSplit = this.max.split('-')
328 | 
329 |           return new Date(maxDateSplit[0], maxDateSplit[1], maxDateSplit[2])
330 |         }
331 | 
332 |         return
333 |       },
334 | 
335 |       /**
336 |        * Determines if the left arrow for the current date should be shown.
337 |        *
338 |        * @return {Boolean}
339 |        */
340 |       showLeftArrow () {
341 |         // Show the left arrow when there is either no mininum date, or when the
342 |         // minimum year and minimum month are the same as the current year and
343 |         // current month.
344 |         if (! this.min) return true
345 | 
346 |         if (this.minDate.getFullYear() === this.currentYear &&
347 |             this.minDate.getMonth() - 1 === this.currentMonth) {
348 |           return false
349 |         }
350 | 
351 |         return true
352 |       },
353 | 
354 |       /**
355 |        * Determines if the right arrow for the current date should be shown.
356 |        *
357 |        * @return {Boolean}
358 |        */
359 |       showRightArrow () {
360 |         // Show the right arrow when there is either no maximum date, or when
361 |         // the maximum year and maximum month are the same as the current
362 |         // year and current month.
363 |         if (! this.max) return true
364 | 
365 |         if (this.maxDate.getFullYear() === this.currentYear &&
366 |             this.maxDate.getMonth() - 1 === this.currentMonth) {
367 |           return false
368 |         }
369 | 
370 |         return true
371 |       },
372 | 
373 |       /**
374 |        * Computes a formatted array of days for a given month and year.
375 |        *
376 |        * @return {Array}
377 |        */
378 |       calendar () {
379 |         // The calendar's output is a function of all of the days in a given
380 |         // month, chunked into an array of arrays, each containing 5 or 6
381 |         // and 7 elements respectively.
382 |         const days = []
383 | 
384 |         // Padding for the first row, e.g. if the month's first day starts on
385 |         // Friday, the first array will be ['', '', '', '', '', '1', '2']
386 |         const startOfMonthDay = new Date(this.currentYear, this.currentMonth, 1).getDay()
387 | 
388 |         for (let i = 0, len = startOfMonthDay; i < len; i++) {
389 |           days.push('')
390 |         }
391 | 
392 |         // Create an array containing all days in the current month
393 |         const daysInMonth = 32 - new Date(this.currentYear, this.currentMonth, 32).getDate()
394 | 
395 |         for (let i = 0, len = daysInMonth; i < daysInMonth; i++) {
396 |           days.push(i + 1)
397 |         }
398 | 
399 |         // Map the days from numbers to objects that have current day,
400 |         // selected, and disabled properties for the view.
401 |         const today = new Date()
402 | 
403 |         const dayObjects = days.map((day) => {
404 |           const currentDay = (day === today.getDate()) &&
405 |                              (this.currentMonth === today.getMonth()) &&
406 |                              (this.currentYear === today.getFullYear())
407 | 
408 |           const selected = (this.selectedDay === day) &&
409 |                            (this.currentMonth === this.selectedMonth) &&
410 |                            (this.currentYear === this.selectedYear)
411 | 
412 |           const disabled = this.dayDisabled(day)
413 | 
414 |           return { day, currentDay, selected, disabled }
415 |         })
416 | 
417 |         // Chunk all of the days into an array of arrays, by seven.
418 |         return chunk(dayObjects, 7)
419 |       },
420 | 
421 |       /**
422 |        * Computes a list of years.
423 |        *
424 |        * @return {Array}
425 |        */
426 |       years () {
427 |         // Set the first year of the array.
428 |         let firstYear
429 | 
430 |         if (this.min) {
431 |           firstYear = this.minDate.getFullYear()
432 |         } else if (this.value) {
433 |           firstYear = this.specifiedDate.getFullYear()
434 |         } else {
435 |           firstYear = (new Date).getFullYear()
436 |         }
437 | 
438 |         // Create a range of years to loop through which is either the maximum
439 |         // date minus the first year, or simply 100.
440 |         let through = this.max ? (this.maxDate.getFullYear() + 1) - firstYear : 101
441 | 
442 |         let years = []
443 | 
444 |         for (let i = firstYear, len = firstYear + through; i < len; i++) {
445 |           years.push(i)
446 |         }
447 | 
448 |         return years.map((year) => {
449 |           return { year, selected: year === this.selectedYear }
450 |         })
451 |       }
452 |     },
453 | 
454 |     created () {
455 |       this.hideBodyOverflow(true)
456 | 
457 |       this.setDate()
458 | 
459 |       this.setEscapeEvent()
460 |     },
461 | 
462 |     data: () => ({
463 |       selecting: 'date',
464 |       currentMonth: '',
465 |       currentYear: '',
466 |       selectedDayOfWeek: '',
467 |       selectedDay: '',
468 |       selectedMonth: '',
469 |       selectedYear: ''
470 |     }),
471 | 
472 |     methods: {
473 |       /**
474 |        * Changes the display to the calendar or years depending on the value.
475 |        */
476 |       setSelecting (value) {
477 |         this.selecting = value
478 | 
479 |         // If the user is selecting a year, we want to go to the selected year
480 |         // minus two (as does the material design date picker).
481 |         if (value === 'year') {
482 |           this.$nextTick(() => {
483 |             const container = document.querySelector('.calendar-year-select')
484 | 
485 |             const el = document.getElementById(`${this.selectedYear}-calendar-year`)
486 | 
487 |             container.scrollTop = (el.offsetTop - 100) - 76
488 |           })
489 |         }
490 |       },
491 | 
492 |       /**
493 |        * Set the date by the given day.
494 |        *
495 |        * @param {Object}
496 |        */
497 |       setByDay (day) {
498 |         if (day.disabled) return
499 | 
500 |         this.selectedYear = this.currentYear
501 | 
502 |         this.selectedDay = day.day
503 | 
504 |         this.selectedMonth = this.currentMonth
505 | 
506 |         this.selectedDayOfWeek = new Date(this.selectedYear, this.selectedMonth, day.day).getDay()
507 | 
508 |         if (this.footer) {
509 |           this.onInput();
510 |         }
511 |       },
512 | 
513 |       /**
514 |        * Set the date by the given month.
515 |        *
516 |        * @param {[String, Number]}
517 |        */
518 |       setByMonth (month) {
519 |         if (month === 12) {
520 |           this.currentYear = this.currentYear + 1
521 | 
522 |           this.currentMonth = 0
523 | 
524 |           return
525 |         }
526 | 
527 |         if (month === -1) {
528 |           this.currentYear = this.currentYear - 1
529 | 
530 |           this.currentMonth = 11
531 | 
532 |           return
533 |         }
534 | 
535 |         this.currentMonth = month
536 |       },
537 | 
538 |       /**
539 |        * Set the date by the given year.
540 |        *
541 |        * @param {[String, Number]}
542 |        */
543 |       setByYear (year) {
544 |         this.selectedYear = year
545 | 
546 |         this.currentYear = year
547 | 
548 |         this.selecting = 'date'
549 |       },
550 | 
551 |       /**
552 |        * Set the initial date for the calendar.
553 |        */
554 |       setDate () {
555 |         // If a date property has been passed to the component, that will be
556 |         // used instead of the current day.
557 |         let date
558 | 
559 |         if (this.min && this.min && ! this.value) {
560 |           date = new Date(this.min)
561 |         } else if (this.value && this.value) {
562 |           date = new Date(this.value)
563 |         } else {
564 |           date = new Date()
565 |         }
566 | 
567 |         if (this.initialDate) {
568 |           this.selectedDay = date.getDate() + 1
569 |         } else {
570 |           this.selectedDay = date.getDate()
571 |         }
572 | 
573 |         this.selectedDayOfWeek = date.getDay()
574 | 
575 |         this.selectedMonth = date.getMonth()
576 | 
577 |         this.currentMonth = date.getMonth()
578 | 
579 |         this.selectedYear = date.getFullYear()
580 | 
581 |         this.currentYear = date.getFullYear()
582 |       },
583 | 
584 |       dayDisabled (day) {
585 |         // A day is disabled when the minimum month and minimum year are equal
586 |         // to the current month and year and the day is less than the min date's day
587 |         if (this.min &&
588 |             (this.minDate.getMonth() - 1 === this.currentMonth &&
589 |             this.minDate.getFullYear() === this.currentYear) &&
590 |             day < this.minDate.getDate()) {
591 |           return true
592 |         }
593 | 
594 |         //  Or when the maximum month and maximum year are equal to the current
595 |         //  month and year and the day is greater than the max date's day
596 |         if (this.max &&
597 |             (this.maxDate.getMonth() - 1 === this.currentMonth &&
598 |             this.maxDate.getFullYear() === this.currentYear) &&
599 |             day > this.maxDate.getDate()) {
600 |           return true
601 |         }
602 | 
603 |         return false
604 |       },
605 | 
606 |       // Misc methods that have nothing to do with calendar stuff.
607 | 
608 |       /**
609 |        * Hides the overflow of the body when the date picker is active.
610 |        *
611 |        * @param  {Boolean}
612 |        */
613 |       hideBodyOverflow (show) {
614 |         const bodyEl = document.querySelector('body')
615 | 
616 |         if (show === true) {
617 |           bodyEl.style.overflow = 'hidden'
618 | 
619 |           return
620 |         }
621 | 
622 |         bodyEl.style.overflow = ''
623 |       },
624 | 
625 |       /**
626 |        * Close the date picker if the escape key is pressed.
627 |        */
628 |       setEscapeEvent () {
629 |         document.addEventListener('keydown', (event) => {
630 |           if (event.keyCode == 27 || event.key == 'Escape') {
631 |             this.onClose()
632 |           }
633 |         })
634 |       },
635 | 
636 |       /**
637 |        * When the "Ok" button is pressed, or enter is pressed, emit the input
638 |        * event and close the date picker.
639 |        */
640 |       onInput () {
641 |         const date = this.format ? this.format(this.calculatedDate) : this.calculatedDate
642 | 
643 |         this.$emit('input', date)
644 | 
645 |         this.onClose()
646 |       },
647 | 
648 |       /**
649 |        * Emit a close event so the developer can close the date picker as they
650 |        * see fit.
651 |        */
652 |       onClose () {
653 |         this.hideBodyOverflow(false)
654 | 
655 |         this.$emit('close')
656 |       }
657 |     }
658 |   }
659 | </script>
660 | 
661 | <style scoped>
662 |   *, *::before, *::after {
663 |       box-sizing: inherit;
664 |   }
665 | 
666 |   div, h2, h3, h4, table, tbody, thead, tr, td, button {
667 |     margin: 0;
668 |     padding: 0;
669 |     border: 0;
670 |     font-size: 100%;
671 |     font: inherit;
672 |     vertical-align: baseline;
673 |   }
674 | 
675 |   button {
676 |     border-radius: 2px;
677 |     cursor: pointer;
678 |     display: inline-block;
679 |     font-size: 16px;
680 |     padding: 0 16px;
681 |     outline: none;
682 |     user-select: none;
683 |   }
684 | 
685 |   .flex {
686 |     display: flex;
687 |   }
688 | 
689 |   .flex-center {
690 |     display: flex;
691 |     align-items: center;
692 |     justify-content: center;
693 |   }
694 | 
695 |   .date-picker-container, .date-picker-background {
696 |     overflow-y: auto;
697 |     position: fixed;
698 |     top: 0;
699 |     left: 0;
700 |     width: 100%;
701 |     height: 100%;
702 |   }
703 | 
704 |   .date-picker-container {
705 |     line-height: 1.5;
706 |     z-index: 9998;
707 |   }
708 | 
709 |   .date-picker-background {
710 |     background-color: rgba(0, 0, 0, 0.5);
711 |     z-index: 9999;
712 |   }
713 | 
714 |   .calendar-faint {
715 |     opacity: 0.75;
716 |   }
717 | 
718 |   .calendar-container {
719 |     background-color: #fff;
720 |     border-radius: 2px;
721 |     box-shadow: 0 12px 52px rgba(0, 0, 0, 0.25);
722 |     cursor: initial;
723 |     position: relative;
724 |     user-select: text;
725 |     width: 350px;
726 |     z-index: 10001;
727 |     user-select: none;
728 |   }
729 | 
730 |   .calendar {
731 |     height: 500px;
732 |     position: relative;
733 |   }
734 | 
735 |   .hidden-footer .calendar {
736 |     height: 470px;
737 |   }
738 | 
739 |   .calendar-header {
740 |     border-top-left-radius: 2px;
741 |     border-top-right-radius: 2px;
742 |     color: #fff;
743 |     display: flex;
744 |     align-items: center;
745 |     justify-content: space-between;
746 |     padding: 16px 28px;
747 |   }
748 | 
749 |   .calendar-header h2, .calendar-header h3 {
750 |     cursor: default;
751 |   }
752 | 
753 |   .calendar-header h2.calendar-faint, .calendar-header h3.calendar-faint {
754 |     cursor: pointer;
755 |   }
756 | 
757 |   .calendar-header h2 {
758 |     font-size: 28px;
759 |     line-height: 30px;
760 |     margin-top: 3px;
761 |   }
762 | 
763 |   .calendar-header h3 {
764 |     font-size: 1.125rem;
765 |     font-weight: 300;
766 |   }
767 | 
768 |   .calendar-body {
769 |     padding: 16px;
770 |   }
771 | 
772 |   .calendar-date {
773 |     display: flex;
774 |   }
775 | 
776 |   .calendar-date .calendar-arrows.left {
777 |     display: flex;
778 |     align-items: center;
779 |     justify-content: flex-start;
780 |   }
781 | 
782 |   .calendar-current-date {
783 |     cursor: default;
784 |     text-align: center;
785 |   }
786 | 
787 |   .calendar-date .calendar-arrows.right {
788 |     display: flex;
789 |     align-items: center;
790 |     justify-content: flex-end;
791 |   }
792 | 
793 |   .calendar-date > div {
794 |     width: 33.333%;
795 |   }
796 | 
797 |   .calendar-date h4 {
798 |     font-size: 14px;
799 |     font-weight: 500;
800 |   }
801 | 
802 |   .calendar-arrows {
803 |     cursor: pointer;
804 |     padding: 0 8px;
805 |   }
806 | 
807 |   .calendar-body table {
808 |     border-spacing: 2px;
809 |     border-collapse: separate;
810 |     cursor: default;
811 |     font-size: 12px;
812 |     margin-top: 8px;
813 |     table-layout: fixed;
814 |     text-align: center;
815 |     width: 100%;
816 |   }
817 | 
818 |   .calendar-body table thead {
819 |     color: #757575;
820 |   }
821 | 
822 |   .calendar-body table thead td, .calendar-body table thead td {
823 |     cursor: default!important;
824 |   }
825 | 
826 |   .calendar-body tr {
827 |     height: 43px;
828 |     vertical-align: middle;
829 |   }
830 | 
831 |   .calendar-body td {
832 |     border-radius: 50%;
833 |     cursor: pointer;
834 |     vertical-align: middle;
835 |     transition: background-color .15s;
836 |     width: 43px;
837 |   }
838 | 
839 |   .calendar-body td:focus {
840 |     outline: none;
841 |   }
842 | 
843 |   .calendar-body tbody td:hover {
844 |     background-color: rgba(0, 0, 0, 0.1);
845 |   }
846 | 
847 |   .calendar-body td:empty {
848 |     background-color: transparent!important;
849 |     cursor: default;
850 |   }
851 | 
852 |   .calendar-body td.current-day {
853 |     font-weight: bold;
854 |   }
855 | 
856 |   .calendar-body td.disabled {
857 |     color: #c5c5c5;
858 |     cursor: default;
859 |     pointer-events: none;
860 |   }
861 | 
862 |   .calendar-body td.selected {
863 |     border-radius: 50%;
864 |     color: #fff;
865 |     cursor: pointer;
866 |   }
867 | 
868 |   .calendar-year-select {
869 |     box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.075);
870 |     height: 353px;
871 |     overflow-y: scroll;
872 |     text-align: center;
873 |   }
874 | 
875 |   .hidden-footer .calendar-year-select {
876 |     height: 378px;
877 |   }
878 | 
879 |   .calendar-year-select div {
880 |     cursor: pointer;
881 |     padding: 8px 0;
882 |     transition: background-color .15s;
883 |   }
884 | 
885 |   .calendar-year-select div:hover {
886 |     background-color: rgba(0, 0, 0, 0.1);
887 |   }
888 | 
889 |   .calendar-year-select .selected {
890 |     font-size: 24px;
891 |   }
892 | 
893 |   .calendar-footer {
894 |     position: absolute;
895 |     bottom: 16px;
896 |     right: 16px;
897 |   }
898 | 
899 |   .calendar-footer button {
900 |     background-color: transparent;
901 |     border: 1px solid transparent;
902 |     box-shadow: none;
903 |   }
904 | 
905 |   .calendar-fade-enter-active, .calendar-fade-leave-active {
906 |     transition: opacity .15s;
907 |   }
908 | 
909 |   .calendar-fade-enter, .calendar-fade-leave-to {
910 |     opacity: 0;
911 |   }
912 | </style>
913 | 


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
1 | import DatePicker from './DatePicker.vue'
2 | 
3 | module.exports = {
4 |   install: function (Vue, options) {
5 |     Vue.component('date-picker', DatePicker)
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const merge = require('webpack-merge');
 3 | const path = require('path');
 4 | 
 5 | var commonConfig = {
 6 |   output: {
 7 |     path: path.resolve(__dirname + '/dist/'),
 8 |   },
 9 | 
10 |   module: {
11 |     loaders: [
12 |       {
13 |         test: /\.js$/,
14 |         loader: 'babel',
15 |         include: __dirname,
16 |         exclude: /node_modules/
17 |       },
18 | 
19 |       {
20 |         test: /\.vue$/,
21 |         loader: 'vue'
22 |       },
23 | 
24 |       {
25 |         test: /\.css$/,
26 |         loader: 'style!less!css'
27 |       }
28 |     ]
29 |   },
30 | 
31 |   plugins: [
32 |     new webpack.optimize.UglifyJsPlugin( {
33 |       minimize : true,
34 |       sourceMap : false,
35 |       mangle: true,
36 |       compress: {
37 |         warnings: false
38 |       }
39 |     })
40 |   ]
41 | };
42 | 
43 | module.exports = [
44 |   merge(commonConfig, {
45 |     entry: path.resolve(__dirname + '/src/plugin.js'),
46 |     output: {
47 |       filename: 'vue-date-picker.min.js',
48 |       libraryTarget: 'window',
49 |       library: 'DatePicker',
50 |     }
51 |   }),
52 | 
53 |   merge(commonConfig, {
54 |     entry: path.resolve(__dirname + '/src/DatePicker.vue'),
55 |     output: {
56 |       filename: 'vue-date-picker.js',
57 |       libraryTarget: 'umd',
58 |       library: 'vue-date-picker',
59 |       umdNamedDefine: true
60 |     }
61 |   })
62 | ];
63 | 


--------------------------------------------------------------------------------