├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── dist ├── vueDatePick.css └── vueDatePick.js ├── docs ├── 404.html ├── assets │ ├── css │ │ └── 0.styles.336d58ff.css │ ├── img │ │ └── search.83621669.svg │ └── js │ │ ├── 1.7359bec1.js │ │ ├── 10.4c05a6d1.js │ │ ├── 11.98a3f58e.js │ │ ├── 12.6cf16e81.js │ │ ├── 13.34315c9f.js │ │ ├── 14.852a75ec.js │ │ ├── 15.3d5a865d.js │ │ ├── 16.85ceb829.js │ │ ├── 3.4cc114d8.js │ │ ├── 4.96b3ea0b.js │ │ ├── 5.7c44335d.js │ │ ├── 6.d2c3b63d.js │ │ ├── 7.388ee87b.js │ │ ├── 8.30d4423c.js │ │ ├── 9.597148a3.js │ │ └── app.c8a82460.js ├── calendar.svg ├── calendarWhite.svg ├── customizing-appearance.html ├── examples.html ├── getting-started.html ├── index.html ├── localization.html └── props-reference.html ├── documentation ├── .vuepress │ ├── components │ │ ├── Teaser.vue │ │ ├── calendar-widget.vue │ │ ├── custom-engine.vue │ │ ├── custom-input.vue │ │ ├── disabled-dates.vue │ │ └── picker-wrapper.vue │ ├── config.js │ ├── override.styl │ └── public │ │ ├── calendar.svg │ │ └── calendarWhite.svg ├── README.md ├── customizing-appearance.md ├── examples.md ├── getting-started.md ├── localization.md └── props-reference.md ├── karma.conf.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── spec └── index.spec.js ├── src ├── vueDatePick.scss └── vueDatePick.vue └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", {"modules": false}], 4 | ], 5 | "env": { 6 | "test": { 7 | "plugins": ["istanbul"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | mocha: true 11 | }, 12 | extends: [ 13 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 14 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 15 | 'plugin:vue/essential', 16 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 17 | 'standard' 18 | ], 19 | // required to lint *.vue files 20 | plugins: [ 21 | 'vue' 22 | ], 23 | // add your custom rules here 24 | rules: { 25 | // allow async-await 26 | 'generator-star-spacing': 'off', 27 | // allow debugger during development 28 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 29 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 30 | 'padded-blocks': 'off', 31 | 'no-mixed-operators': 'off', 32 | 'indent': ['error', 4, {"SwitchCase": 1}], 33 | 'linebreak-style': ['error', 'unix'], 34 | 'quotes': ['error', 'single'], 35 | 'semi': ['error', 'always'], 36 | 'no-unused-vars': ['error', { 'args': 'none' }], 37 | 'array-bracket-spacing': 'error', 38 | 'block-spacing': 'error', 39 | 'brace-style': ['error', '1tbs', { 'allowSingleLine': true }], 40 | 'camelcase': 'error', 41 | 'comma-spacing': 'error', 42 | 'computed-property-spacing': 'error', 43 | 'curly': 'error', 44 | 'eol-last': 'error', 45 | 'eqeqeq': 'error', 46 | 'func-call-spacing': 'error', 47 | 'key-spacing': 'error', 48 | 'keyword-spacing': 'error', 49 | 'max-depth': ['error', 5], 50 | 'max-nested-callbacks': ['error', 4], 51 | 'new-cap': ['error', {'capIsNew': false, 'newIsCapExceptions': ['default']}], 52 | 'no-multiple-empty-lines': ['error', {'max': 1}], 53 | 'no-extra-bind': 'error', 54 | 'no-implicit-coercion': 'error', 55 | 'no-implicit-globals': 'error', 56 | 'no-useless-concat': 'error', 57 | 'no-useless-return': 'error', 58 | 'no-trailing-spaces': 'error', 59 | 'no-multi-spaces': 'error', 60 | 'no-whitespace-before-property': 'error', 61 | 'object-curly-spacing': ['error', 'never'], 62 | 'space-before-blocks': 'error', 63 | "space-before-function-paren": ["error", { 64 | "anonymous": "never", 65 | "named": "never", 66 | "asyncArrow": "always" 67 | }], 68 | 'space-in-parens': ['error'], 69 | 'wrap-iife': 'error' 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | coverage/ 4 | npm-debug.log* 5 | 6 | # Editor directories and files 7 | .idea 8 | .vscode 9 | *.orig 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "12" 4 | dist: trusty # needs Ubuntu Trusty 5 | sudo: required # no need for virtualization. 6 | addons: 7 | chrome: stable # have Travis install chrome stable. 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Damir Brekalo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue date pick 2 | [![Build Status](https://travis-ci.org/dbrekalo/vue-date-pick.svg?branch=master)](https://travis-ci.org/dbrekalo/vue-date-pick) 3 | [![NPM Status](https://img.shields.io/npm/v/vue-date-pick.svg)](https://www.npmjs.com/package/vue-date-pick) 4 | 5 | Lightweight and mobile friendly date time picker based on Vue. 6 | Vue date pick emphasizes performance, elegant and usable UI on all screen sizes and 7 | simplicity of configuration. Has no dependencies on css frameworks or date libraries. Weighs less then 5KB. 8 | 9 | ## Documentation and demo 10 | [Browse documentation and demo pages](https://dbrekalo.github.io/vue-date-pick/). 11 | -------------------------------------------------------------------------------- /dist/vueDatePick.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes a{0%{opacity:0;-webkit-transform:translate3d(-.5em,0,0);transform:translate3d(-.5em,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes a{0%{opacity:0;-webkit-transform:translate3d(-.5em,0,0);transform:translate3d(-.5em,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes b{0%{opacity:0;-webkit-transform:translate3d(.5em,0,0);transform:translate3d(.5em,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes b{0%{opacity:0;-webkit-transform:translate3d(.5em,0,0);transform:translate3d(.5em,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes c{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes c{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes d{0%{opacity:0}to{opacity:1}}@keyframes d{0%{opacity:0}to{opacity:1}}.vdp-toggle-calendar-enter-active.vdpPositionReady{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation:c .2s;animation:c .2s}.vdp-toggle-calendar-leave-active{animation:c .15s reverse}.vdp-toggle-calendar-enter-active.vdpPositionFixed{-webkit-animation:d .3s;animation:d .3s}.vdp-toggle-calendar-leave-active.vdpPositionFixed{animation:d .3s reverse}.vdpComponent{position:relative;display:inline-block;font-size:10px;color:#303030}.vdpComponent.vdpWithInput>input{padding-right:30px}.vdpClearInput{font-size:1em;position:absolute;top:0;bottom:0;right:0;width:3em}.vdpClearInput:before{content:"\D7";width:1.4em;height:1.4em;line-height:1.1em;box-sizing:border-box;position:absolute;left:50%;top:50%;margin:-.7em 0 0 -.7em;color:rgba(0,0,0,.3);border:1px solid rgba(0,0,0,.15);border-radius:50%;background-color:#fff}.vdpClearInput:hover:before{box-shadow:0 .2em .5em rgba(0,0,0,.15)}.vdpOuterWrap.vdpFloating{position:absolute;padding:.5em 0;z-index:2}.vdpOuterWrap.vdpPositionFixed{position:fixed;left:0;top:0;bottom:0;right:0;padding:2em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:rgba(0,0,0,.3)}.vdpFloating .vdpInnerWrap{max-width:30em}.vdpPositionFixed .vdpInnerWrap{max-width:30em;margin:0 auto;border:0;-webkit-animation:c .3s;animation:c .3s}.vdpFloating.vdpPositionTop{top:100%}.vdpFloating.vdpPositionBottom{bottom:100%}.vdpFloating.vdpPositionLeft{left:0}.vdpFloating.vdpPositionRight{right:0}.vdpPositionTop.vdpPositionLeft{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left}.vdpPositionTop.vdpPositionRight{-webkit-transform-origin:top right;-ms-transform-origin:top right;transform-origin:top right}.vdpPositionBottom.vdpPositionLeft{-webkit-transform-origin:bottom left;-ms-transform-origin:bottom left;transform-origin:bottom left}.vdpPositionBottom.vdpPositionRight{-webkit-transform-origin:bottom right;-ms-transform-origin:bottom right;transform-origin:bottom right}.vdpInnerWrap{overflow:hidden;min-width:28em;box-sizing:border-box;padding:1em;background:#fff;box-shadow:0 .2em 1.5em rgba(0,0,0,.06);border-radius:.5em;border:1px solid rgba(0,0,0,.15)}.vdpHeader{position:relative;padding:0 1em 2.5em;margin:-1em -1em -2.5em;text-align:center;background:#f5f5f5}.vdp12HourToggleBtn,.vdpArrow,.vdpClearInput,.vdpPeriodControl>button{margin:0;padding:0;border:0;cursor:pointer;background:none}.vdp12HourToggleBtn::-moz-focus-inner,.vdpArrow::-moz-focus-inner,.vdpClearInput::-moz-focus-inner,.vdpPeriodControl::-moz-focus-inner{padding:0;border:0}.vdpArrow{font-size:1em;width:5em;text-indent:-999em;overflow:hidden;position:absolute;top:0;bottom:2.5em;text-align:left}.vdpArrow:before{content:"";width:2.2em;height:2.2em;position:absolute;left:50%;top:50%;margin:-1.1em 0 0 -1.1em;border-radius:100%;transition:background-color .2s}.vdpArrow:active,.vdpArrow:focus,.vdpArrow:hover{outline:0}.vdpArrow:focus:before,.vdpArrow:hover:before{background-color:rgba(0,0,0,.03)}.vdpArrow:active:before{background-color:rgba(0,0,0,.07)}.vdpArrowNext:before{margin-left:-1.4em}.vdpArrow:after{content:"";position:absolute;left:50%;top:50%;margin-top:-.5em;width:0;height:0;border:.5em solid transparent}.vdpArrowPrev{left:-.3em}.vdpArrowPrev:after{margin-left:-.8em;border-right-color:#7485c2}.vdpArrowNext{right:-.6em}.vdpArrowNext:after{margin-left:-.5em;border-left-color:#7485c2}.vdpPeriodControl{display:inline-block;position:relative}.vdpPeriodControl>button{font-size:1.5em;padding:1em .4em;display:inline-block}.vdpPeriodControl>select{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;opacity:0;font-size:1.6em;-webkit-appearance:none}.vdpTable{width:100%;table-layout:fixed;position:relative;z-index:1}.vdpNextDirection{-webkit-animation:b .5s;animation:b .5s}.vdpPrevDirection{-webkit-animation:a .5s;animation:a .5s}.vdpCell,.vdpHeadCell{text-align:center;box-sizing:border-box}.vdpCell{padding:.5em 0}.vdpHeadCell{padding:.3em .5em 1.8em}.vdpHeadCellContent{font-size:1.3em;font-weight:400;color:#848484}.vdpCellContent{font-size:1.4em;display:block;margin:0 auto;width:1.857em;line-height:1.857em;text-align:center;border-radius:100%;transition:background .1s,color .1s}.vdpCell.outOfRange{color:#c7c7c7}.vdpCell.today{color:#7485c2}.vdpCell.selected .vdpCellContent{color:#fff;background:#7485c2}@media(hover:hover){.vdpCell.selectable:hover .vdpCellContent{color:#fff;background:#7485c2}}.vdpCell.selectable{cursor:pointer}.vdpCell.disabled{opacity:.5}.vdpTimeControls{padding:1.2em 2em;position:relative;margin:1em -1em -1em;text-align:center;background:#f5f5f5}.vdpTimeUnit{display:inline-block;position:relative;vertical-align:middle}.vdpTimeUnit>input,.vdpTimeUnit>pre{font-size:1.7em;line-height:1.3;padding:.1em;word-wrap:break-word;white-space:pre-wrap;resize:none;margin:0;box-sizing:border-box;color:#000;border:0;border-bottom:1px solid transparent;text-align:center}.vdpTimeUnit>pre{visibility:hidden;font-family:inherit}.vdpTimeUnit>input{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;outline:none;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background:transparent;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.vdpTimeUnit>input::-moz-selection{background-color:rgba(116,133,194,.15)}.vdpTimeUnit>input::selection{background-color:rgba(116,133,194,.15)}.vdpTimeUnit>input:focus,.vdpTimeUnit>input:hover{border-bottom-color:#7485c2}.vdpTimeUnit>input:disabled{border-bottom-color:transparent}.vdpTimeUnit>input::-webkit-inner-spin-button,.vdpTimeUnit>input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.vdpTimeCaption,.vdpTimeSeparator{display:inline-block;vertical-align:middle;font-size:1.3em;color:#848484}.vdpTimeCaption{margin-right:.5em}.vdp12HourToggleBtn{display:inline-block;vertical-align:middle;font-size:1.3em;padding:0 .4em;color:#303030}.vdp12HourToggleBtn:focus,.vdp12HourToggleBtn:hover{color:#7485c2;outline:0}.vdp12HourToggleBtn:disabled{color:#303030} -------------------------------------------------------------------------------- /dist/vueDatePick.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueDatePick=e():t.VueDatePick=e()}("undefined"!=typeof self?self:this,function(){return n=[function(t,e,n){},function(t,e,n){"use strict";n(0)},function(t,e,n){"use strict";n.r(e);function h(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,r,o=[],s=!0,a=!1;try{for(n=n.call(t);!(s=(i=n.next()).done)&&(o.push(i.value),!e||o.length!==e);s=!0);}catch(t){a=!0,r=t}finally{try{s||null==n.return||n.return()}finally{if(a)throw r}}return o}}(t,e)||function(t,e){var n;if(t)return"string"==typeof t?i(t,e):"Map"===(n="Object"===(n=Object.prototype.toString.call(t).slice(8,-1))&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);ne?t:new Array(e-t.toString().length+1).join("0")+t:void 0}function D(t,e){return t.getDate()===e.getDate()&&t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear()}function s(t,e){for(var n=[],i=t;i<=e;i++)n.push(i);return n}function a(t){t%=12;return 0==t?12:t}function u(t,e,n){return Math.min(Math.max(t,e),n)}var l={props:{value:{type:String,default:""},format:{type:String,default:"YYYY-MM-DD"},displayFormat:{type:String},editable:{type:Boolean,default:!0},hasInputElement:{type:Boolean,default:!0},inputAttributes:{type:Object},selectableYearRange:{type:[Number,Object,Function],default:40},startPeriod:{type:Object},parseDate:{type:Function},formatDate:{type:Function},pickTime:{type:Boolean,default:!1},pickMinutes:{type:Boolean,default:!0},pickSeconds:{type:Boolean,default:!1},use12HourClock:{type:Boolean,default:!1},isDateDisabled:{type:Function,default:function(){return!1}},nextMonthCaption:{type:String,default:"Next month"},prevMonthCaption:{type:String,default:"Previous month"},setTimeCaption:{type:String,default:"Set time:"},mobileBreakpointWidth:{type:Number,default:500},weekdays:{type:Array,default:function(){return["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}},months:{type:Array,default:function(){return["January","February","March","April","May","June","July","August","September","October","November","December"]}},startWeekOnSunday:{type:Boolean,default:!1}},data:function(){return{inputValue:this.valueToInputFormat(this.value),direction:void 0,positionClass:void 0,opened:!this.hasInputElement,currentPeriod:this.startPeriod||this.getPeriodFromValue(this.value,this.format)}},computed:{valueDate:function(){var t=this.value,e=this.format;return t?this.parseDateString(t,e):void 0},isReadOnly:function(){return!this.editable||this.inputAttributes&&this.inputAttributes.readonly},isValidValue:function(){var t=this.valueDate;return!this.value||Boolean(t)},currentPeriodDates:function(){var e=this,t=this.currentPeriod,n=t.year,i=t.month,r=[],o=new Date(n,i,1),s=new Date,t=o.getDay(),n=this.startWeekOnSunday?t:0===t?6:t-1;if(n)for(var a=n;0n.mobileBreakpointWidth?(i.top+i.height+t>window.innerHeight&&0window.innerWidth&&(o="vdpPositionRight"),n.positionClass=["vdpPositionReady",r,o].join(" ")):n.positionClass="vdpPositionFixed"}var n=this,i=this.$el.getBoundingClientRect(),r="vdpPositionTop",o="vdpPositionLeft";this.$refs.outerWrap?t():this.$nextTick(t)},teardownPosition:function(){this.positionEventListener&&(this.positionClass=void 0,window.removeEventListener("resize",this.positionEventListener),delete this.positionEventListener)},clear:function(){this.$emit("input","")},selectDateItem:function(t){t.disabled||(t=new Date(t.date),this.currentTime&&(t.setHours(this.currentTime.hours),t.setMinutes(this.currentTime.minutes),t.setSeconds(this.currentTime.seconds)),this.$emit("input",this.formatDateToString(t,this.format)),this.hasInputElement&&!this.pickTime&&this.close())},set12HourClock:function(t){var e=new Date(this.valueDate),n=e.getHours();e.setHours("PM"===t?n+12:n-12),this.$emit("input",this.formatDateToString(e,this.format))},inputHours:function(t){var e,n=new Date(this.valueDate),i=n.getHours(),r=u(parseInt(t.target.value,10)||0,this.use12HourClock?1:0,this.use12HourClock?12:23);n.setHours(this.use12HourClock?(e=r,12<=i?12===e?e:e+12:12===e?0:e):r),t.target.value=C(r,1),this.$emit("input",this.formatDateToString(n,this.format))},inputTime:function(t,e){var n=new Date(this.valueDate),i=u(parseInt(e.target.value)||0,0,59);e.target.value=C(i,2),n[t](i),this.$emit("input",this.formatDateToString(n,this.format))},onTimeInputFocus:function(t){t.target.select&&t.target.select()}}};n(1);n=function(){var n=this,i=n._self._c;return i("div",{staticClass:"vdpComponent",class:{vdpWithInput:n.hasInputElement}},[n._t("default",function(){return[n.hasInputElement?i("input",n._b({attrs:{type:"text",readonly:n.isReadOnly},domProps:{value:n.inputValue},on:{input:function(t){n.editable&&n.processUserInput(t.target.value)},focus:function(t){n.editable&&n.open()},click:function(t){n.editable&&n.open()}}},"input",n.inputAttributes,!1)):n._e(),n._v(" "),n.editable&&n.hasInputElement&&n.inputValue?i("button",{staticClass:"vdpClearInput",attrs:{type:"button"},on:{click:n.clear}}):n._e()]},{open:n.open,close:n.close,toggle:n.toggle,inputValue:n.inputValue,processUserInput:n.processUserInput,valueToInputFormat:n.valueToInputFormat}),n._v(" "),i("transition",{attrs:{name:"vdp-toggle-calendar"}},[n.opened?i("div",{ref:"outerWrap",staticClass:"vdpOuterWrap",class:[n.positionClass,{vdpFloating:n.hasInputElement}],on:{click:n.closeViaOverlay}},[i("div",{staticClass:"vdpInnerWrap"},[i("header",{staticClass:"vdpHeader"},[i("button",{staticClass:"vdpArrow vdpArrowPrev",attrs:{title:n.prevMonthCaption,type:"button"},on:{click:function(t){return n.incrementMonth(-1)}}},[n._v(n._s(n.prevMonthCaption))]),n._v(" "),i("button",{staticClass:"vdpArrow vdpArrowNext",attrs:{type:"button",title:n.nextMonthCaption},on:{click:function(t){return n.incrementMonth(1)}}},[n._v(n._s(n.nextMonthCaption))]),n._v(" "),i("div",{staticClass:"vdpPeriodControls"},[i("div",{staticClass:"vdpPeriodControl"},[i("button",{key:n.currentPeriod.month,class:n.directionClass,attrs:{type:"button"}},[n._v("\n "+n._s(n.months[n.currentPeriod.month])+"\n ")]),n._v(" "),i("select",{directives:[{name:"model",rawName:"v-model",value:n.currentPeriod.month,expression:"currentPeriod.month"}],on:{change:function(t){var e=Array.prototype.filter.call(t.target.options,function(t){return t.selected}).map(function(t){return"_value"in t?t._value:t.value});n.$set(n.currentPeriod,"month",t.target.multiple?e:e[0])}}},n._l(n.months,function(t,e){return i("option",{key:t,domProps:{value:e}},[n._v("\n "+n._s(t)+"\n ")])}),0)]),n._v(" "),i("div",{staticClass:"vdpPeriodControl"},[i("button",{key:n.currentPeriod.year,class:n.directionClass,attrs:{type:"button"}},[n._v("\n "+n._s(n.currentPeriod.year)+"\n ")]),n._v(" "),i("select",{directives:[{name:"model",rawName:"v-model",value:n.currentPeriod.year,expression:"currentPeriod.year"}],on:{change:function(t){var e=Array.prototype.filter.call(t.target.options,function(t){return t.selected}).map(function(t){return"_value"in t?t._value:t.value});n.$set(n.currentPeriod,"year",t.target.multiple?e:e[0])}}},n._l(n.yearRange,function(t){return i("option",{key:t,domProps:{value:t}},[n._v("\n "+n._s(t)+"\n ")])}),0)])])]),n._v(" "),i("table",{staticClass:"vdpTable"},[i("thead",[i("tr",n._l(n.weekdaysSorted,function(t,e){return i("th",{key:e,staticClass:"vdpHeadCell"},[i("span",{staticClass:"vdpHeadCellContent"},[n._v(n._s(t))])])}),0)]),n._v(" "),i("tbody",{key:n.currentPeriod.year+"-"+n.currentPeriod.month,class:n.directionClass},n._l(n.currentPeriodDates,function(t,e){return i("tr",{key:e,staticClass:"vdpRow"},n._l(t,function(e){return i("td",{key:e.dateKey,staticClass:"vdpCell",class:{selectable:n.editable&&!e.disabled,selected:e.selected,disabled:e.disabled,today:e.today,outOfRange:e.outOfRange},attrs:{"data-id":e.dateKey},on:{click:function(t){n.editable&&n.selectDateItem(e)}}},[n._t("cellContent",function(){return[i("div",{staticClass:"vdpCellContent"},[n._v(n._s(e.date.getDate()))])]},{item:e})],2)}),0)}),0)]),n._v(" "),n.pickTime&&n.currentTime?i("div",{staticClass:"vdpTimeControls"},[i("span",{staticClass:"vdpTimeCaption"},[n._v(n._s(n.setTimeCaption))]),n._v(" "),i("div",{staticClass:"vdpTimeUnit"},[i("pre",[i("span",[n._v(n._s(n.currentTime.hoursFormatted))]),i("br")]),n._v(" "),i("input",{staticClass:"vdpHoursInput",attrs:{type:"number",pattern:"\\d*",disabled:!n.editable},domProps:{value:n.currentTime.hoursFormatted},on:{input:function(t){return t.preventDefault(),n.inputHours.apply(null,arguments)},focusin:n.onTimeInputFocus}})]),n._v(" "),n.pickMinutes?i("span",{staticClass:"vdpTimeSeparator"},[n._v(":")]):n._e(),n._v(" "),n.pickMinutes?i("div",{staticClass:"vdpTimeUnit"},[i("pre",[i("span",[n._v(n._s(n.currentTime.minutesFormatted))]),i("br")]),n._v(" "),n.pickMinutes?i("input",{staticClass:"vdpMinutesInput",attrs:{type:"number",pattern:"\\d*",disabled:!n.editable},domProps:{value:n.currentTime.minutesFormatted},on:{input:function(t){return n.inputTime("setMinutes",t)},focusin:n.onTimeInputFocus}}):n._e()]):n._e(),n._v(" "),n.pickSeconds?i("span",{staticClass:"vdpTimeSeparator"},[n._v(":")]):n._e(),n._v(" "),n.pickSeconds?i("div",{staticClass:"vdpTimeUnit"},[i("pre",[i("span",[n._v(n._s(n.currentTime.secondsFormatted))]),i("br")]),n._v(" "),n.pickSeconds?i("input",{staticClass:"vdpSecondsInput",attrs:{type:"number",pattern:"\\d*",disabled:!n.editable},domProps:{value:n.currentTime.secondsFormatted},on:{input:function(t){return n.inputTime("setSeconds",t)},focusin:n.onTimeInputFocus}}):n._e()]):n._e(),n._v(" "),n.use12HourClock?i("button",{staticClass:"vdp12HourToggleBtn",attrs:{type:"button",disabled:!n.editable},on:{click:function(t){return n.set12HourClock(n.currentTime.isPM?"AM":"PM")}}},[n._v("\n "+n._s(n.currentTime.isPM?"PM":"AM")+"\n ")]):n._e()]):n._e()])]):n._e()])],2)},c=!(M=[]),S=p=d=null,w="function"==typeof(l=l)?l.options:l,n&&(w.render=n,w.staticRenderFns=M,w._compiled=!0),c&&(w.functional=!0),p&&(w._scopeId="data-v-"+p),S?(T=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),d&&d.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(S)},w._ssrRegister=T):d&&(T=P?function(){d.call(this,(w.functional?this.parent:this).$root.$options.shadowRoot)}:d),T&&(w.functional?(w._injectStyles=T,k=w.render,w.render=function(t,e){return T.call(e),k(t,e)}):(n=w.beforeCreate,w.beforeCreate=n?[].concat(n,T):[T]));var c,d,p,S,P,T,k,w,M={exports:l,options:w};e.default=M.exports}],i={},r.m=n,r.c=i,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=2).default;function r(t){var e;return(i[t]||(e=i[t]={i:t,l:!1,exports:{}},n[t].call(e.exports,e,e.exports,r),e.l=!0,e)).exports}var n,i}); -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue date pick 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

404

There's nothing here.
Take me home.
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/assets/img/search.83621669.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/assets/js/1.7359bec1.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[1],{171:function(t,e,n){"use strict";n(25),n(27),n(28);function i(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,r=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(i=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);i=!0);}catch(t){r=!0,o=t}finally{try{i||null==s.return||s.return()}finally{if(r)throw o}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}n(14),n(60),n(95),n(179),n(181),n(182),n(26);var r=n(88),o=(n(24),n(183),/,|\.|-| |:|\/|\\/),a=/D+/,s=/M+/,u=/Y+/,l=/h+/i,c=/m+/,p=/s+/,d=/A/;function h(t,e){return void 0!==t?t.toString().length>e?t:new Array(e-t.toString().length+1).join("0")+t:void 0}function v(t,e){return t.getDate()===e.getDate()&&t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear()}function f(t,e){for(var n=[],i=t;i<=e;i++)n.push(i);return n}function m(t){var e=t%12;return 0===e?12:e}function g(t){return t>=12}function y(t,e,n){return Math.min(Math.max(t,e),n)}var b={props:{value:{type:String,default:""},format:{type:String,default:"YYYY-MM-DD"},displayFormat:{type:String},editable:{type:Boolean,default:!0},hasInputElement:{type:Boolean,default:!0},inputAttributes:{type:Object},selectableYearRange:{type:[Number,Object,Function],default:40},startPeriod:{type:Object},parseDate:{type:Function},formatDate:{type:Function},pickTime:{type:Boolean,default:!1},pickMinutes:{type:Boolean,default:!0},pickSeconds:{type:Boolean,default:!1},use12HourClock:{type:Boolean,default:!1},isDateDisabled:{type:Function,default:function(){return!1}},nextMonthCaption:{type:String,default:"Next month"},prevMonthCaption:{type:String,default:"Previous month"},setTimeCaption:{type:String,default:"Set time:"},mobileBreakpointWidth:{type:Number,default:500},weekdays:{type:Array,default:function(){return["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}},months:{type:Array,default:function(){return["January","February","March","April","May","June","July","August","September","October","November","December"]}},startWeekOnSunday:{type:Boolean,default:!1}},data:function(){return{inputValue:this.valueToInputFormat(this.value),direction:void 0,positionClass:void 0,opened:!this.hasInputElement,currentPeriod:this.startPeriod||this.getPeriodFromValue(this.value,this.format)}},computed:{valueDate:function(){var t=this.value,e=this.format;return t?this.parseDateString(t,e):void 0},isReadOnly:function(){return!this.editable||this.inputAttributes&&this.inputAttributes.readonly},isValidValue:function(){var t=this.valueDate;return!this.value||Boolean(t)},currentPeriodDates:function(){var t=this,e=this.currentPeriod,n=e.year,i=e.month,r=[],o=new Date(n,i,1),a=new Date,s=o.getDay(),u=this.startWeekOnSunday?s:0===s?6:s-1;if(u)for(var l=u;l>0;l--){var c=new Date(o);c.setDate(-(l-1)),r.push({outOfRange:!0,date:c})}for(;o.getMonth()===i;)r.push({date:new Date(o)}),o.setDate(o.getDate()+1);var p=r.length%7;if(p>0)for(var d=7-p,h=1;h<=d;h++){var f=new Date(o);f.setDate(h),r.push({outOfRange:!0,date:f})}return r.forEach((function(e){e.disabled=t.isDateDisabled(e.date),e.today=v(e.date,a),e.dateKey=[e.date.getFullYear(),e.date.getMonth()+1,e.date.getDate()].join("-"),e.selected=!!t.valueDate&&v(e.date,t.valueDate)})),function(t,e){var n=[];for(;t.length;)n.push(t.splice(0,e));return n}(r,7)},yearRange:function(){var t=this.currentPeriod.year,e=this.selectableYearRange,n=Object(r.a)(e),i=[];return"number"===n?i=f(t-e,t+e):"object"===n?i=f(e.from,e.to):"function"===n&&(i=e(this)),i.indexOf(t)<0&&(i.push(t),i=i.sort()),i},currentTime:function(){var t=this.valueDate;if(t){var e=t.getHours(),n=t.getMinutes(),i=t.getSeconds();return{hours:e,minutes:n,seconds:i,isPM:g(e),hoursFormatted:(this.use12HourClock?m(e):e).toString(),minutesFormatted:h(n,2),secondsFormatted:h(i,2)}}},directionClass:function(){return this.direction?"vdp".concat(this.direction,"Direction"):void 0},weekdaysSorted:function(){if(this.startWeekOnSunday){var t=this.weekdays.slice();return t.unshift(t.pop()),t}return this.weekdays}},watch:{value:function(t){this.isValidValue&&(this.inputValue=this.valueToInputFormat(t),this.currentPeriod=this.getPeriodFromValue(t,this.format))},currentPeriod:function(t,e){var n=new Date(t.year,t.month).getTime(),i=new Date(e.year,e.month).getTime();this.direction=n!==i?n>i?"Next":"Prev":void 0,n!==i&&this.$emit("periodChange",{year:t.year,month:t.month})}},beforeDestroy:function(){this.removeCloseEvents(),this.teardownPosition()},methods:{valueToInputFormat:function(t){return this.displayFormat&&this.formatDateToString(this.parseDateString(t,this.format),this.displayFormat)||t},getPeriodFromValue:function(t,e){var n=this.parseDateString(t,e)||new Date;return{month:n.getMonth(),year:n.getFullYear()}},parseDateString:function(t,e){return t?this.parseDate?this.parseDate(t,e):this.parseSimpleDateString(t,e):void 0},formatDateToString:function(t,e){return t?this.formatDate?this.formatDate(t,e):this.formatSimpleDateToString(t,e):""},parseSimpleDateString:function(t,e){for(var n,r,d,v,f,m,g=t.split(o),y=e.split(o),b=y.length,C=0;C0&&void 0!==arguments[0]?arguments[0]:1,e=new Date(this.currentPeriod.year,this.currentPeriod.month),n=new Date(e.getFullYear(),e.getMonth()+t);this.currentPeriod={month:n.getMonth(),year:n.getFullYear()}},processUserInput:function(t){var e=this.parseDateString(t,this.displayFormat||this.format);this.inputValue=t,this.$emit("input",e?this.formatDateToString(e,this.format):t)},toggle:function(){return this.opened?this.close():this.open()},open:function(){this.opened||(this.opened=!0,this.currentPeriod=this.startPeriod||this.getPeriodFromValue(this.value,this.format),this.addCloseEvents(),this.setupPosition()),this.direction=void 0},close:function(){this.opened&&(this.opened=!1,this.direction=void 0,this.removeCloseEvents(),this.teardownPosition())},closeViaOverlay:function(t){this.hasInputElement&&t.target===this.$refs.outerWrap&&this.close()},addCloseEvents:function(){var t=this;this.closeEventListener||(this.closeEventListener=function(e){return t.inspectCloseEvent(e)},["click","keyup","focusin"].forEach((function(e){return document.addEventListener(e,t.closeEventListener)})))},inspectCloseEvent:function(t){t.keyCode?27===t.keyCode&&this.close():t.target===this.$el||this.$el.contains(t.target)||this.close()},removeCloseEvents:function(){var t=this;this.closeEventListener&&(["click","keyup","focusin"].forEach((function(e){return document.removeEventListener(e,t.closeEventListener)})),delete this.closeEventListener)},setupPosition:function(){var t=this;this.positionEventListener||(this.positionEventListener=function(){return t.positionFloater()},window.addEventListener("resize",this.positionEventListener)),this.positionFloater()},positionFloater:function(){var t=this,e=this.$el.getBoundingClientRect(),n="vdpPositionTop",i="vdpPositionLeft",r=function(){var r=t.$refs.outerWrap.getBoundingClientRect(),o=r.height,a=r.width;window.innerWidth>t.mobileBreakpointWidth?(e.top+e.height+o>window.innerHeight&&e.top-o>0&&(n="vdpPositionBottom"),e.left+a>window.innerWidth&&(i="vdpPositionRight"),t.positionClass=["vdpPositionReady",n,i].join(" ")):t.positionClass="vdpPositionFixed"};this.$refs.outerWrap?r():this.$nextTick(r)},teardownPosition:function(){this.positionEventListener&&(this.positionClass=void 0,window.removeEventListener("resize",this.positionEventListener),delete this.positionEventListener)},clear:function(){this.$emit("input","")},selectDateItem:function(t){if(!t.disabled){var e=new Date(t.date);this.currentTime&&(e.setHours(this.currentTime.hours),e.setMinutes(this.currentTime.minutes),e.setSeconds(this.currentTime.seconds)),this.$emit("input",this.formatDateToString(e,this.format)),this.hasInputElement&&!this.pickTime&&this.close()}},set12HourClock:function(t){var e=new Date(this.valueDate),n=e.getHours();e.setHours("PM"===t?n+12:n-12),this.$emit("input",this.formatDateToString(e,this.format))},inputHours:function(t){var e,n=new Date(this.valueDate),i=n.getHours(),r=y(parseInt(t.target.value,10)||0,this.use12HourClock?1:0,this.use12HourClock?12:23);n.setHours(this.use12HourClock?(e=r,g(i)?12===e?e:e+12:12===e?0:e):r),t.target.value=h(r,1),this.$emit("input",this.formatDateToString(n,this.format))},inputTime:function(t,e){var n=new Date(this.valueDate),i=y(parseInt(e.target.value)||0,0,59);e.target.value=h(i,2),n[t](i),this.$emit("input",this.formatDateToString(n,this.format))},onTimeInputFocus:function(t){t.target.select&&t.target.select()}}},C=(n(184),n(0)),_=Object(C.a)(b,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"vdpComponent",class:{vdpWithInput:t.hasInputElement}},[t._t("default",(function(){return[t.hasInputElement?e("input",t._b({attrs:{type:"text",readonly:t.isReadOnly},domProps:{value:t.inputValue},on:{input:function(e){t.editable&&t.processUserInput(e.target.value)},focus:function(e){t.editable&&t.open()},click:function(e){t.editable&&t.open()}}},"input",t.inputAttributes,!1)):t._e(),t._v(" "),t.editable&&t.hasInputElement&&t.inputValue?e("button",{staticClass:"vdpClearInput",attrs:{type:"button"},on:{click:t.clear}}):t._e()]}),{open:t.open,close:t.close,toggle:t.toggle,inputValue:t.inputValue,processUserInput:t.processUserInput,valueToInputFormat:t.valueToInputFormat}),t._v(" "),e("transition",{attrs:{name:"vdp-toggle-calendar"}},[t.opened?e("div",{ref:"outerWrap",staticClass:"vdpOuterWrap",class:[t.positionClass,{vdpFloating:t.hasInputElement}],on:{click:t.closeViaOverlay}},[e("div",{staticClass:"vdpInnerWrap"},[e("header",{staticClass:"vdpHeader"},[e("button",{staticClass:"vdpArrow vdpArrowPrev",attrs:{title:t.prevMonthCaption,type:"button"},on:{click:function(e){return t.incrementMonth(-1)}}},[t._v(t._s(t.prevMonthCaption))]),t._v(" "),e("button",{staticClass:"vdpArrow vdpArrowNext",attrs:{type:"button",title:t.nextMonthCaption},on:{click:function(e){return t.incrementMonth(1)}}},[t._v(t._s(t.nextMonthCaption))]),t._v(" "),e("div",{staticClass:"vdpPeriodControls"},[e("div",{staticClass:"vdpPeriodControl"},[e("button",{key:t.currentPeriod.month,class:t.directionClass,attrs:{type:"button"}},[t._v("\n "+t._s(t.months[t.currentPeriod.month])+"\n ")]),t._v(" "),e("select",{directives:[{name:"model",rawName:"v-model",value:t.currentPeriod.month,expression:"currentPeriod.month"}],on:{change:function(e){var n=Array.prototype.filter.call(e.target.options,(function(t){return t.selected})).map((function(t){return"_value"in t?t._value:t.value}));t.$set(t.currentPeriod,"month",e.target.multiple?n:n[0])}}},t._l(t.months,(function(n,i){return e("option",{key:n,domProps:{value:i}},[t._v("\n "+t._s(n)+"\n ")])})),0)]),t._v(" "),e("div",{staticClass:"vdpPeriodControl"},[e("button",{key:t.currentPeriod.year,class:t.directionClass,attrs:{type:"button"}},[t._v("\n "+t._s(t.currentPeriod.year)+"\n ")]),t._v(" "),e("select",{directives:[{name:"model",rawName:"v-model",value:t.currentPeriod.year,expression:"currentPeriod.year"}],on:{change:function(e){var n=Array.prototype.filter.call(e.target.options,(function(t){return t.selected})).map((function(t){return"_value"in t?t._value:t.value}));t.$set(t.currentPeriod,"year",e.target.multiple?n:n[0])}}},t._l(t.yearRange,(function(n){return e("option",{key:n,domProps:{value:n}},[t._v("\n "+t._s(n)+"\n ")])})),0)])])]),t._v(" "),e("table",{staticClass:"vdpTable"},[e("thead",[e("tr",t._l(t.weekdaysSorted,(function(n,i){return e("th",{key:i,staticClass:"vdpHeadCell"},[e("span",{staticClass:"vdpHeadCellContent"},[t._v(t._s(n))])])})),0)]),t._v(" "),e("tbody",{key:t.currentPeriod.year+"-"+t.currentPeriod.month,class:t.directionClass},t._l(t.currentPeriodDates,(function(n,i){return e("tr",{key:i,staticClass:"vdpRow"},t._l(n,(function(n){return e("td",{key:n.dateKey,staticClass:"vdpCell",class:{selectable:t.editable&&!n.disabled,selected:n.selected,disabled:n.disabled,today:n.today,outOfRange:n.outOfRange},attrs:{"data-id":n.dateKey},on:{click:function(e){t.editable&&t.selectDateItem(n)}}},[t._t("cellContent",(function(){return[e("div",{staticClass:"vdpCellContent"},[t._v(t._s(n.date.getDate()))])]}),{item:n})],2)})),0)})),0)]),t._v(" "),t.pickTime&&t.currentTime?e("div",{staticClass:"vdpTimeControls"},[e("span",{staticClass:"vdpTimeCaption"},[t._v(t._s(t.setTimeCaption))]),t._v(" "),e("div",{staticClass:"vdpTimeUnit"},[e("pre",[e("span",[t._v(t._s(t.currentTime.hoursFormatted))]),e("br")]),t._v(" "),e("input",{staticClass:"vdpHoursInput",attrs:{type:"number",pattern:"\\d*",disabled:!t.editable},domProps:{value:t.currentTime.hoursFormatted},on:{input:function(e){return e.preventDefault(),t.inputHours.apply(null,arguments)},focusin:t.onTimeInputFocus}})]),t._v(" "),t.pickMinutes?e("span",{staticClass:"vdpTimeSeparator"},[t._v(":")]):t._e(),t._v(" "),t.pickMinutes?e("div",{staticClass:"vdpTimeUnit"},[e("pre",[e("span",[t._v(t._s(t.currentTime.minutesFormatted))]),e("br")]),t._v(" "),t.pickMinutes?e("input",{staticClass:"vdpMinutesInput",attrs:{type:"number",pattern:"\\d*",disabled:!t.editable},domProps:{value:t.currentTime.minutesFormatted},on:{input:function(e){return t.inputTime("setMinutes",e)},focusin:t.onTimeInputFocus}}):t._e()]):t._e(),t._v(" "),t.pickSeconds?e("span",{staticClass:"vdpTimeSeparator"},[t._v(":")]):t._e(),t._v(" "),t.pickSeconds?e("div",{staticClass:"vdpTimeUnit"},[e("pre",[e("span",[t._v(t._s(t.currentTime.secondsFormatted))]),e("br")]),t._v(" "),t.pickSeconds?e("input",{staticClass:"vdpSecondsInput",attrs:{type:"number",pattern:"\\d*",disabled:!t.editable},domProps:{value:t.currentTime.secondsFormatted},on:{input:function(e){return t.inputTime("setSeconds",e)},focusin:t.onTimeInputFocus}}):t._e()]):t._e(),t._v(" "),t.use12HourClock?e("button",{staticClass:"vdp12HourToggleBtn",attrs:{type:"button",disabled:!t.editable},on:{click:function(e){return t.set12HourClock(t.currentTime.isPM?"AM":"PM")}}},[t._v("\n "+t._s(t.currentTime.isPM?"PM":"AM")+"\n ")]):t._e()]):t._e()])]):t._e()])],2)}),[],!1,null,null,null);e.a=_.exports},174:function(t,e,n){},179:function(t,e,n){"use strict";n(180);var i=n(4),r=n(57),o=n(7),a=/./.toString,s=function(t){n(9)(RegExp.prototype,"toString",t,!0)};n(6)((function(){return"/a/b"!=a.call({source:"a",flags:"b"})}))?s((function(){var t=i(this);return"/".concat(t.source,"/","flags"in t?t.flags:!o&&t instanceof RegExp?r.call(t):void 0)})):"toString"!=a.name&&s((function(){return a.call(this)}))},180:function(t,e,n){n(7)&&"g"!=/./g.flags&&n(8).f(RegExp.prototype,"flags",{configurable:!0,get:n(57)})},181:function(t,e,n){var i=Date.prototype,r=i.toString,o=i.getTime;new Date(NaN)+""!="Invalid Date"&&n(9)(i,"toString",(function(){var t=o.call(this);return t==t?r.call(this):"Invalid Date"}))},182:function(t,e,n){"use strict";var i=n(2),r=n(23),o=n(18),a=n(6),s=[].sort,u=[1,2,3];i(i.P+i.F*(a((function(){u.sort(void 0)}))||!a((function(){u.sort(null)}))||!n(19)(s)),"Array",{sort:function(t){return void 0===t?s.call(o(this)):s.call(o(this),r(t))}})},183:function(t,e,n){"use strict";var i=n(3),r=n(13),o=n(12),a=n(61),s=n(58),u=n(6),l=n(98).f,c=n(97).f,p=n(8).f,d=n(96).trim,h=i.Number,v=h,f=h.prototype,m="Number"==o(n(59)(f)),g="trim"in String.prototype,y=function(t){var e=s(t,!1);if("string"==typeof e&&e.length>2){var n,i,r,o=(e=g?e.trim():d(e,3)).charCodeAt(0);if(43===o||45===o){if(88===(n=e.charCodeAt(2))||120===n)return NaN}else if(48===o){switch(e.charCodeAt(1)){case 66:case 98:i=2,r=49;break;case 79:case 111:i=8,r=55;break;default:return+e}for(var a,u=e.slice(2),l=0,c=u.length;lr)return NaN;return parseInt(u,i)}}return+e};if(!h(" 0o1")||!h("0b1")||h("+0x1")){h=function(t){var e=arguments.length<1?0:t,n=this;return n instanceof h&&(m?u((function(){f.valueOf.call(n)})):"Number"!=o(n))?a(new v(y(e)),n,h):y(e)};for(var b,C=n(7)?l(v):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),_=0;C.length>_;_++)r(v,b=C[_])&&!r(h,b)&&p(h,b,c(v,b));h.prototype=f,f.constructor=h,n(9)(i,"Number",h)}},184:function(t,e,n){"use strict";n(174)}}]); -------------------------------------------------------------------------------- /docs/assets/js/10.4c05a6d1.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[10],{196:function(n,t,s){"use strict";s.r(t);var c=s(0),e=Object(c.a)({},(function(){return(0,this._self._c)("div",{staticClass:"content"})}),[],!1,null,null,null);t.default=e.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/11.98a3f58e.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[11],{197:function(s,t,a){"use strict";a.r(t);var n=a(0),e=Object(n.a)({},(function(){this._self._c;return this._m(0)}),[function(){var s=this,t=s._self._c;return t("div",{staticClass:"content"},[t("h1",{attrs:{id:"customizing-appearance"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizing-appearance"}},[s._v("#")]),s._v(" Customizing appearance")]),s._v(" "),t("h2",{attrs:{id:"css"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#css"}},[s._v("#")]),s._v(" CSS")]),s._v(" "),t("p",[s._v("Vue Date pick colors can be adjusted with following selectors if you are using library css file directly (vue-date-pick/dist/vueDatePick.css)")]),s._v(" "),t("div",{staticClass:"language-css extra-class"},[t("pre",{pre:!0,attrs:{class:"language-css"}},[t("code",[t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".vdpArrowPrev:after")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("border-right-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #cc99cd"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".vdpArrowNext:after")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("border-left-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #cc99cd"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".vdpCell.selectable:hover .vdpCellContent,\n.vdpCell.selected .vdpCellContent")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #cc99cd"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".vdpCell.today")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #cc99cd"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".vdpTimeUnit > input:hover,\n.vdpTimeUnit > input:focus")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("border-bottom-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #cc99cd"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("h2",{attrs:{id:"scss"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scss"}},[s._v("#")]),s._v(" SCSS")]),s._v(" "),t("p",[s._v("If you are compiling your css files with sass - library source scss file can be imported.\nAdd $vdpColor to your scss variables to override default styling.")]),s._v(" "),t("div",{staticClass:"language-scss extra-class"},[t("pre",{pre:!0,attrs:{class:"language-scss"}},[t("code",[t("span",{pre:!0,attrs:{class:"token property"}},[t("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$vdpColor")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #cc99cd"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("@import")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v("'vue-date-pick/src/vueDatePick.scss'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])])])}],!1,null,null,null);t.default=e.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/13.34315c9f.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[13],{199:function(t,a,s){"use strict";s.r(a);var n=s(0),e=Object(n.a)({},(function(){this._self._c;return this._m(0)}),[function(){var t=this,a=t._self._c;return a("div",{staticClass:"content"},[a("h1",{attrs:{id:"getting-started"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[t._v("#")]),t._v(" Getting started")]),t._v(" "),a("p",[t._v("Install via node package manager:")]),t._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" vue-date-pick\n")])])]),a("p",[t._v("Integrate into your application via standard Vue api for registering and using components.\nVue date pick is designed for usage with v-model directive.")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("date-pick")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("date"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" DatePick "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-date-pick'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-date-pick/dist/vueDatePick.css'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("components")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("DatePick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("date")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2019-01-01'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}],!1,null,null,null);a.default=e.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/14.852a75ec.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[14],{200:function(t,s,a){"use strict";a.r(s);var n=a(0),r=Object(n.a)({},(function(){this._self._c;return this._m(0)}),[function(){var t=this,s=t._self._c;return s("div",{staticClass:"content"},[s("h1",{attrs:{id:"localization"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#localization"}},[t._v("#")]),t._v(" Localization")]),t._v(" "),s("p",[t._v("Following props to are used to localize your date pick instance:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nextMonthCaption")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Next month'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("prevMonthCaption")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Previous month'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("setTimeCaption")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Set time:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("weekdays")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mon'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tue'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Wed'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Thu'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Fri'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Sat'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Sun'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("months")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'January'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'February'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'March'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'April'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'May'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'June'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'July'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'August'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'September'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'October'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'November'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'December'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("hr")])}],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/15.3d5a865d.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[15],{201:function(t,s,a){"use strict";a.r(s);var r=a(0),n=Object(r.a)({},(function(){this._self._c;return this._m(0)}),[function(){var t=this,s=t._self._c;return s("div",{staticClass:"content"},[s("h1",{attrs:{id:"props-reference"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#props-reference"}},[t._v("#")]),t._v(" Props reference")]),t._v(" "),s("p",[t._v("List of all props available on vue date pick component:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'YYYY-MM-DD'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("displayFormat")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("editable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hasInputElement")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("inputAttributes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("selectableYearRange")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" Function"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("40")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("parseDate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Function\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("formatDate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Function\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pickTime")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pickMinutes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pickSeconds")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use12HourClock")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("isDateDisabled")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Function"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nextMonthCaption")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Next month'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("prevMonthCaption")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Previous month'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("setTimeCaption")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Set time:'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mobileBreakpointWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("weekdays")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mon'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tue'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Wed'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Thu'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Fri'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Sat'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Sun'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("months")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'January'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'February'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'March'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'April'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'May'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'June'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'July'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'August'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'September'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'October'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'November'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'December'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("startWeekOnSunday")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}],!1,null,null,null);s.default=n.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/16.85ceb829.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[16],{188:function(n,w,o){}}]); -------------------------------------------------------------------------------- /docs/assets/js/3.4cc114d8.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{172:function(t,n,e){"use strict";var r=/d{1,4}|M{1,4}|YY(?:YY)?|S{1,3}|Do|ZZ|Z|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,o="[^\\s]+",u=/\[([^]*?)\]/gm;function a(t,n){for(var e=[],r=0,o=t.length;r-1?r:null}};function d(t){for(var n=[],e=1;e3?0:(t-t%10!=10?1:0)*t%10]}},l=d({},m),h=function(t){return t.replace(/[|\\{()[^$+*?.-]/g,"\\$&")},g=function(t,n){for(void 0===n&&(n=2),t=String(t);t.length0?"-":"+")+g(100*Math.floor(Math.abs(n)/60)+Math.abs(n)%60,4)},Z:function(t){var n=t.getTimezoneOffset();return(n>0?"-":"+")+g(Math.floor(Math.abs(n)/60),2)+":"+g(Math.abs(n)%60,2)}},D=function(t){return+t-1},Y=[null,"\\d\\d?"],p=[null,o],v=["isPm",o,function(t,n){var e=t.toLowerCase();return e===n.amPm[0]?0:e===n.amPm[1]?1:null}],S=["timezoneOffset","[^\\s]*?[\\+\\-]\\d\\d:?\\d\\d|[^\\s]*?Z?",function(t){var n=(t+"").match(/([+-]|\d\d)/gi);if(n){var e=60*+n[1]+parseInt(n[2],10);return"+"===n[0]?e:-e}return 0}],y={D:["day","\\d\\d?"],DD:["day","\\d\\d"],Do:["day","\\d\\d?"+o,function(t){return parseInt(t,10)}],M:["month","\\d\\d?",D],MM:["month","\\d\\d",D],YY:["year","\\d\\d",function(t){var n=+(""+(new Date).getFullYear()).substr(0,2);return+(""+(+t>68?n-1:n)+t)}],h:["hour","\\d\\d?",void 0,"isPm"],hh:["hour","\\d\\d",void 0,"isPm"],H:["hour","\\d\\d?"],HH:["hour","\\d\\d"],m:["minute","\\d\\d?"],mm:["minute","\\d\\d"],s:["second","\\d\\d?"],ss:["second","\\d\\d"],YYYY:["year","\\d{4}"],S:["millisecond","\\d",function(t){return 100*+t}],SS:["millisecond","\\d\\d",function(t){return 10*+t}],SSS:["millisecond","\\d{3}"],d:Y,dd:Y,ddd:p,dddd:p,MMM:["month",o,i("monthNamesShort")],MMMM:["month",o,i("monthNames")],a:v,A:v,ZZ:S,Z:S},w={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",isoDate:"YYYY-MM-DD",isoDateTime:"YYYY-MM-DDTHH:mm:ssZ",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"};var H={format:function(t,n,e){if(void 0===n&&(n=w.default),void 0===e&&(e={}),"number"==typeof t&&(t=new Date(t)),"[object Date]"!==Object.prototype.toString.call(t)||isNaN(t.getTime()))throw new Error("Invalid Date pass to format");var o=[];n=(n=w[n]||n).replace(u,(function(t,n){return o.push(n),"@@@"}));var a=d(d({},l),e);return(n=n.replace(r,(function(n){return M[n](t,a)}))).replace(/@@@/g,(function(){return o.shift()}))},parse:function(t,n,e){if(void 0===e&&(e={}),"string"!=typeof n)throw new Error("Invalid format in fecha parse");if(n=w[n]||n,t.length>1e3)return null;var o={year:(new Date).getFullYear(),month:0,day:1,hour:0,minute:0,second:0,millisecond:0,isPm:null,timezoneOffset:null},a=[],i=[],s=n.replace(u,(function(t,n){return i.push(h(n)),"@@@"})),c={},f={};s=h(s).replace(r,(function(t){var n=y[t],e=n[0],r=n[1],o=n[3];if(c[e])throw new Error("Invalid format. "+e+" specified twice in format");return c[e]=!0,o&&(f[o]=!0),a.push(n),"("+r+")"})),Object.keys(f).forEach((function(t){if(!c[t])throw new Error("Invalid format. "+t+" is required in specified format")})),s=s.replace(/@@@/g,(function(){return i.shift()}));var m=t.match(new RegExp(s,"i"));if(!m)return null;for(var g,M=d(d({},l),e),D=1;D11||o.month<0||o.day>31||o.day<1||o.hour>23||o.hour<0||o.minute>59||o.minute<0||o.second>59||o.second<0)return null;return g},defaultI18n:m,setGlobalDateI18n:function(t){return l=d(l,t)},setGlobalDateMasks:function(t){return d(w,t)}};n.a=H},176:function(t,n,e){},186:function(t,n,e){"use strict";e(176)},190:function(t,n,e){"use strict";e.r(n);var r=e(171),o=(e(172),{components:{DatePick:r.a},data:function(){return{date:"2019-02-12"}}}),u=(e(186),e(0)),a=Object(u.a)(o,(function(){var t=this,n=t._self._c;return n("div",{staticClass:"calendarWidget"},[n("date-pick",{staticClass:"datePickExample",attrs:{hasInputElement:!1},model:{value:t.date,callback:function(n){t.date=n},expression:"date"}})],1)}),[],!1,null,"4d116567",null);n.default=a.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/4.96b3ea0b.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{175:function(t,e,a){},185:function(t,e,a){"use strict";a(175)},189:function(t,e,a){"use strict";a.r(e);var s=a(171),n={components:{DateTimePicker:s.a},data:function(){return{date:s.a.methods.formatDateToString(new Date,"YYYY-MM-DD")}}},i=(a(185),a(0)),c=Object(i.a)(n,(function(){var t=this,e=t._self._c;return e("div",[e("div",{staticClass:"teaser"},[e("div",{staticClass:"topBlock"},[e("div",{staticClass:"textTeaser"},[e("h2",{staticClass:"title"},[t._v("Lightweight and mobile friendly date time picker")]),t._v(" "),e("p",{staticClass:"text"},[t._v("\n Vue date pick emphasizes performance, elegant and usable UI\n on all screen sizes and simplicity of configuration.\n Has no dependencies on css frameworks or date libraries.\n Weighs less then 5KB.\n ")]),t._v(" "),e("router-link",{staticClass:"ctaBtn",attrs:{to:"/getting-started.html"}},[t._v("Get started")])],1),t._v(" "),e("date-time-picker",{attrs:{hasInputElement:!1},model:{value:t.date,callback:function(e){t.date=e},expression:"date"}})],1)])])}),[],!1,null,"dbbcd036",null);e.default=c.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/5.7c44335d.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{177:function(t,n,e){},187:function(t,n,e){"use strict";e(177)},192:function(t,n,e){"use strict";e.r(n);var a={components:{DatePick:e(171).a},data:function(){return{date:""}}},c=(e(187),e(0)),s=Object(c.a)(a,(function(){var t=this,n=t._self._c;return n("date-pick",{staticClass:"datePickExample",scopedSlots:t._u([{key:"default",fn:function(e){var a=e.toggle,c=e.inputValue;return[n("button",{staticClass:"customInputBtn",on:{click:a}},[t._v("\n "+t._s(c||"Toggle calendar")+"\n ")])]}},{key:"cellContent",fn:function(e){var a=e.item;return[n("div",{staticClass:"vdpCellContent"},[n("strong",[t._v(t._s(a.date.getDate()))])])]}}]),model:{value:t.date,callback:function(n){t.date=n},expression:"date"}})}),[],!1,null,"43e3ba56",null);n.default=s.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/6.d2c3b63d.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{173:function(t,e,n){},178:function(t,e,n){"use strict";n(173)},195:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type,n.vertical]},n.text||i().default)}},p=(n(178),n(0)),r=Object(p.a)(i,void 0,void 0,!1,null,"099ab69c",null);e.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/7.388ee87b.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{172:function(t,n,e){"use strict";var r=/d{1,4}|M{1,4}|YY(?:YY)?|S{1,3}|Do|ZZ|Z|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,o="[^\\s]+",u=/\[([^]*?)\]/gm;function a(t,n){for(var e=[],r=0,o=t.length;r-1?r:null}};function d(t){for(var n=[],e=1;e3?0:(t-t%10!=10?1:0)*t%10]}},l=d({},c),h=function(t){return t.replace(/[|\\{()[^$+*?.-]/g,"\\$&")},M=function(t,n){for(void 0===n&&(n=2),t=String(t);t.length0?"-":"+")+M(100*Math.floor(Math.abs(n)/60)+Math.abs(n)%60,4)},Z:function(t){var n=t.getTimezoneOffset();return(n>0?"-":"+")+M(Math.floor(Math.abs(n)/60),2)+":"+M(Math.abs(n)%60,2)}},D=function(t){return+t-1},Y=[null,"\\d\\d?"],p=[null,o],v=["isPm",o,function(t,n){var e=t.toLowerCase();return e===n.amPm[0]?0:e===n.amPm[1]?1:null}],S=["timezoneOffset","[^\\s]*?[\\+\\-]\\d\\d:?\\d\\d|[^\\s]*?Z?",function(t){var n=(t+"").match(/([+-]|\d\d)/gi);if(n){var e=60*+n[1]+parseInt(n[2],10);return"+"===n[0]?e:-e}return 0}],y={D:["day","\\d\\d?"],DD:["day","\\d\\d"],Do:["day","\\d\\d?"+o,function(t){return parseInt(t,10)}],M:["month","\\d\\d?",D],MM:["month","\\d\\d",D],YY:["year","\\d\\d",function(t){var n=+(""+(new Date).getFullYear()).substr(0,2);return+(""+(+t>68?n-1:n)+t)}],h:["hour","\\d\\d?",void 0,"isPm"],hh:["hour","\\d\\d",void 0,"isPm"],H:["hour","\\d\\d?"],HH:["hour","\\d\\d"],m:["minute","\\d\\d?"],mm:["minute","\\d\\d"],s:["second","\\d\\d?"],ss:["second","\\d\\d"],YYYY:["year","\\d{4}"],S:["millisecond","\\d",function(t){return 100*+t}],SS:["millisecond","\\d\\d",function(t){return 10*+t}],SSS:["millisecond","\\d{3}"],d:Y,dd:Y,ddd:p,dddd:p,MMM:["month",o,i("monthNamesShort")],MMMM:["month",o,i("monthNames")],a:v,A:v,ZZ:S,Z:S},w={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",isoDate:"YYYY-MM-DD",isoDateTime:"YYYY-MM-DDTHH:mm:ssZ",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"};var H={format:function(t,n,e){if(void 0===n&&(n=w.default),void 0===e&&(e={}),"number"==typeof t&&(t=new Date(t)),"[object Date]"!==Object.prototype.toString.call(t)||isNaN(t.getTime()))throw new Error("Invalid Date pass to format");var o=[];n=(n=w[n]||n).replace(u,(function(t,n){return o.push(n),"@@@"}));var a=d(d({},l),e);return(n=n.replace(r,(function(n){return g[n](t,a)}))).replace(/@@@/g,(function(){return o.shift()}))},parse:function(t,n,e){if(void 0===e&&(e={}),"string"!=typeof n)throw new Error("Invalid format in fecha parse");if(n=w[n]||n,t.length>1e3)return null;var o={year:(new Date).getFullYear(),month:0,day:1,hour:0,minute:0,second:0,millisecond:0,isPm:null,timezoneOffset:null},a=[],i=[],s=n.replace(u,(function(t,n){return i.push(h(n)),"@@@"})),f={},m={};s=h(s).replace(r,(function(t){var n=y[t],e=n[0],r=n[1],o=n[3];if(f[e])throw new Error("Invalid format. "+e+" specified twice in format");return f[e]=!0,o&&(m[o]=!0),a.push(n),"("+r+")"})),Object.keys(m).forEach((function(t){if(!f[t])throw new Error("Invalid format. "+t+" is required in specified format")})),s=s.replace(/@@@/g,(function(){return i.shift()}));var c=t.match(new RegExp(s,"i"));if(!c)return null;for(var M,g=d(d({},l),e),D=1;D11||o.month<0||o.day>31||o.day<1||o.hour>23||o.hour<0||o.minute>59||o.minute<0||o.second>59||o.second<0)return null;return M},defaultI18n:c,setGlobalDateI18n:function(t){return l=d(l,t)},setGlobalDateMasks:function(t){return d(w,t)}};n.a=H},191:function(t,n,e){"use strict";e.r(n);var r=e(171),o=e(172),u={components:{DatePick:r.a},data:function(){return{format:"dddd MMMM Do, YYYY",date:o.a.format(new Date,"dddd MMMM Do, YYYY")}},methods:{parseDate:function(t,n){return o.a.parse(t,n)},formatDate:function(t,n){return o.a.format(t,n)}}},a=e(0),i=Object(a.a)(u,(function(){var t=this;return(0,t._self._c)("date-pick",{staticClass:"datePickExample",attrs:{format:t.format,parseDate:t.parseDate,formatDate:t.formatDate,inputAttributes:{size:32}},model:{value:t.date,callback:function(n){t.date=n},expression:"date"}})}),[],!1,null,null,null);n.default=i.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/8.30d4423c.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{193:function(t,e,a){"use strict";a.r(e);var n={components:{DatePick:a(171).a},data:function(){return{date:""}},methods:{isFutureDate:function(t){return t>new Date}}},s=a(0),u=Object(s.a)(n,(function(){var t=this;return(0,t._self._c)("date-pick",{staticClass:"datePickExample",attrs:{isDateDisabled:t.isFutureDate},model:{value:t.date,callback:function(e){t.date=e},expression:"date"}})}),[],!1,null,null,null);e.default=u.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/9.597148a3.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{194:function(e,t,a){"use strict";a.r(t);var n=a(171),c={components:{DatePick:n.a},props:{value:String,pickerProps:Object},data:function(){return{date:this.value||n.a.methods.formatDateToString(new Date,"YYYY-MM-DD")}}},i=a(0),o=Object(i.a)(c,(function(){var e=this;return(0,e._self._c)("date-pick",e._b({staticClass:"datePickExample",model:{value:e.date,callback:function(t){e.date=t},expression:"date"}},"date-pick",e.pickerProps,!1))}),[],!1,null,null,null);t.default=o.exports}}]); -------------------------------------------------------------------------------- /docs/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/calendarWhite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/customizing-appearance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Customizing appearance | Vue date pick 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
Vue date pick

# Customizing appearance

# CSS

Vue Date pick colors can be adjusted with following selectors if you are using library css file directly (vue-date-pick/dist/vueDatePick.css)

.vdpArrowPrev:after {
19 |     border-right-color: #cc99cd;
20 | }
21 | 
22 | .vdpArrowNext:after {
23 |     border-left-color: #cc99cd;
24 | }
25 | 
26 | .vdpCell.selectable:hover .vdpCellContent,
27 | .vdpCell.selected .vdpCellContent {
28 |     background: #cc99cd;
29 | }
30 | 
31 | .vdpCell.today {
32 |     color: #cc99cd;
33 | }
34 | 
35 | .vdpTimeUnit > input:hover,
36 | .vdpTimeUnit > input:focus {
37 |     border-bottom-color: #cc99cd;
38 | }
39 |

# SCSS

If you are compiling your css files with sass - library source scss file can be imported. 40 | Add $vdpColor to your scss variables to override default styling.

$vdpColor: #cc99cd;
41 | @import 'vue-date-pick/src/vueDatePick.scss';
42 |

43 | ← 44 | 47 | Props reference 48 | 49 | → 50 |

51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /docs/getting-started.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Getting started | Vue date pick 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
Vue date pick

# Getting started

Install via node package manager:

npm install vue-date-pick
19 |

Integrate into your application via standard Vue api for registering and using components. 20 | Vue date pick is designed for usage with v-model directive.

<template>
21 |     <date-pick v-model="date"></date-pick>
22 | </template>
23 | 
24 | <script>
25 | import DatePick from 'vue-date-pick';
26 | import 'vue-date-pick/dist/vueDatePick.css';
27 | 
28 | export default {
29 |     components: {DatePick},
30 |     data: () => ({
31 |         date: '2019-01-01'
32 |     })
33 | };
34 | </script>
35 |

36 | ← 37 | 40 | Examples 41 | 42 | → 43 |

44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue date pick 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
Vue date pick

Lightweight and mobile friendly date time picker

19 | Vue date pick emphasizes performance, elegant and usable UI 20 | on all screen sizes and simplicity of configuration. 21 | Has no dependencies on css frameworks or date libraries. 22 | Weighs less then 5KB. 23 |

Get started
MonTueWedThuFriSatSun
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
214 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /docs/localization.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Localization | Vue date pick 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
Vue date pick

# Localization

Following props to are used to localize your date pick instance:

nextMonthCaption: {type: String, default: 'Next month'},
19 | prevMonthCaption: {type: String, default: 'Previous month'},
20 | setTimeCaption: {type: String, default: 'Set time:'},
21 | weekdays: {
22 |     type: Array,
23 |     default: () => ([
24 |         'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
25 |     ])
26 | },
27 | months: {
28 |     type: Array,
29 |     default: () => ([
30 |         'January', 'February', 'March', 'April',
31 |         'May', 'June', 'July', 'August',
32 |         'September', 'October', 'November', 'December'
33 |     ])
34 | }
35 |

36 | ← 37 | 40 | Customizing appearance 41 | 42 | → 43 |

44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/props-reference.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Props reference | Vue date pick 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
Vue date pick

# Props reference

List of all props available on vue date pick component:

value: {
 19 |     type: String,
 20 |     default: ''
 21 | },
 22 | format: {
 23 |     type: String,
 24 |     default: 'YYYY-MM-DD'
 25 | },
 26 | displayFormat: {
 27 |     type: String
 28 | },
 29 | editable: {
 30 |     type: Boolean,
 31 |     default: true
 32 | },
 33 | hasInputElement: {
 34 |     type: Boolean,
 35 |     default: true
 36 | },
 37 | inputAttributes: {
 38 |     type: Object
 39 | },
 40 | selectableYearRange: {
 41 |     type: [Number, Object, Function],
 42 |     default: 40
 43 | },
 44 | parseDate: {
 45 |     type: Function
 46 | },
 47 | formatDate: {
 48 |     type: Function
 49 | },
 50 | pickTime: {
 51 |     type: Boolean,
 52 |     default: false
 53 | },
 54 | pickMinutes: {
 55 |     type: Boolean,
 56 |     default: true
 57 | },
 58 | pickSeconds: {
 59 |     type: Boolean,
 60 |     default: false
 61 | },
 62 | use12HourClock: {
 63 |     type: Boolean,
 64 |     default: false
 65 | },
 66 | isDateDisabled: {
 67 |     type: Function,
 68 |     default: () => false
 69 | },
 70 | nextMonthCaption: {
 71 |     type: String,
 72 |     default: 'Next month'
 73 | },
 74 | prevMonthCaption: {
 75 |     type: String,
 76 |     default: 'Previous month'
 77 | },
 78 | setTimeCaption: {
 79 |     type: String,
 80 |     default: 'Set time:'
 81 | },
 82 | mobileBreakpointWidth: {
 83 |     type: Number,
 84 |     default: 500
 85 | },
 86 | weekdays: {
 87 |     type: Array,
 88 |     default: () => ([
 89 |         'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
 90 |     ])
 91 | },
 92 | months: {
 93 |     type: Array,
 94 |     default: () => ([
 95 |         'January', 'February', 'March', 'April',
 96 |         'May', 'June', 'July', 'August',
 97 |         'September', 'October', 'November', 'December'
 98 |     ])
 99 | },
100 | startWeekOnSunday: {
101 |     type: Boolean,
102 |     default: false
103 | }
104 |

105 | ← 106 |

109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /documentation/.vuepress/components/Teaser.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 39 | 40 | 130 | -------------------------------------------------------------------------------- /documentation/.vuepress/components/calendar-widget.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | 23 | -------------------------------------------------------------------------------- /documentation/.vuepress/components/custom-engine.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /documentation/.vuepress/components/custom-input.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 28 | 29 | 48 | -------------------------------------------------------------------------------- /documentation/.vuepress/components/disabled-dates.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /documentation/.vuepress/components/picker-wrapper.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /documentation/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dest: 'docs', 3 | title: 'Vue date pick', 4 | base: '/vue-date-pick/', 5 | themeConfig: { 6 | nav: [ 7 | {text: 'Documentation', link: '/getting-started'}, 8 | {text: 'Examples', link: '/examples'}, 9 | {text: 'Github', link: 'https://github.com/dbrekalo/vue-date-pick'} 10 | ], 11 | sidebar: [ 12 | ['/', 'Home'], 13 | ['/getting-started', 'Getting started'], 14 | ['/examples', 'Examples'], 15 | ['/localization', 'Localization'], 16 | ['/customizing-appearance', 'Customizing appearance'], 17 | ['/props-reference', 'Props reference'] 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /documentation/.vuepress/override.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #7485c2 2 | 3 | @media screen and (max-width: 719px) { 4 | 5 | .search-box input { 6 | 7 | font-size: 1rem; 8 | 9 | } 10 | 11 | } 12 | 13 | @media screen and (min-width: 720px) { 14 | 15 | .search-box { 16 | 17 | margin-right: 1.5rem; 18 | 19 | } 20 | 21 | .theme-container .navbar { 22 | 23 | background: #f5f5f5; transition: padding 0.2s; 24 | 25 | } 26 | 27 | .theme-container .content { 28 | 29 | padding-top: 3em !important; 30 | 31 | } 32 | 33 | .homeCustom .navbar { 34 | 35 | padding: 26px 24px 0 40px; 36 | 37 | } 38 | 39 | .homeCustom .custom-layout { 40 | 41 | padding-top: 0; 42 | /*background: #f5f5f5;*/ 43 | 44 | } 45 | 46 | .navbar > .links { 47 | 48 | transition: top 0.2s; background: transparent; 49 | 50 | } 51 | 52 | .homeCustom > .navbar > .links { 53 | 54 | top: 25px; 55 | background-color: transparent; 56 | 57 | } 58 | 59 | .homeCustom > .navbar { 60 | 61 | position: absolute; 62 | border-bottom-color: transparent; 63 | 64 | } 65 | 66 | .navbar > a { 67 | 68 | position: relative; 69 | transition: left 0.2s, top 0.2s; 70 | 71 | } 72 | 73 | .navbar .site-name { 74 | 75 | display: block; position: relative; 76 | padding-left: 45px; margin-left: -15px; 77 | /*font-weight: normal;*/ 78 | 79 | } 80 | 81 | .navbar .site-name:before { 82 | 83 | position: absolute; content: ''; left: 0; top: -2px; width: 40px; height: 40px; 84 | background: transparent url('/vue-date-pick/calendar.svg') no-repeat center; 85 | background-size: 28px; 86 | 87 | } 88 | 89 | } 90 | 91 | .vdpComponent table { 92 | margin: 0; display: table; overflow: static; 93 | } 94 | 95 | .vdpComponent tr { 96 | border: 0; background: transparent !important; 97 | } 98 | 99 | .vdpComponent .vdpCell, 100 | .vdpComponent .vdpHeadCell { 101 | border: 0; 102 | } 103 | .vdpComponent pre { 104 | line-height: 1.3 !important; padding: 0.1em 0.1em !important; 105 | overflow: visible !important; margin: 0 !important; 106 | } 107 | 108 | .datePickExample { 109 | /*display: block !important;*/ 110 | margin: 0 0 20px; 111 | } 112 | 113 | .datePickExample > input { 114 | 115 | font-size: 16px; display: block; width: 100%; box-sizing: border-box; 116 | padding: 15px; padding-right: 40px; appearance: none; 117 | border-radius: 4px; background: transparent; border: 1px solid #e0e0e0; 118 | box-shadow: 0 0.1em 0.3em rgba(#000, 0.05); outline: 0; 119 | 120 | } 121 | 122 | .datePickExample .vdpClearInput { 123 | 124 | width: 4em; 125 | 126 | } 127 | 128 | details { margin-bottom: 30px; } 129 | summary { outline: 0; cursor: pointer; } 130 | -------------------------------------------------------------------------------- /documentation/.vuepress/public/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/.vuepress/public/calendarWhite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: Teaser 3 | pageClass: homeCustom 4 | --- 5 | -------------------------------------------------------------------------------- /documentation/customizing-appearance.md: -------------------------------------------------------------------------------- 1 | # Customizing appearance 2 | 3 | ## CSS 4 | Vue Date pick colors can be adjusted with following selectors if you are using library css file directly (vue-date-pick/dist/vueDatePick.css) 5 | ```css 6 | .vdpArrowPrev:after { 7 | border-right-color: #cc99cd; 8 | } 9 | 10 | .vdpArrowNext:after { 11 | border-left-color: #cc99cd; 12 | } 13 | 14 | .vdpCell.selectable:hover .vdpCellContent, 15 | .vdpCell.selected .vdpCellContent { 16 | background: #cc99cd; 17 | } 18 | 19 | .vdpCell.today { 20 | color: #cc99cd; 21 | } 22 | 23 | .vdpTimeUnit > input:hover, 24 | .vdpTimeUnit > input:focus { 25 | border-bottom-color: #cc99cd; 26 | } 27 | ``` 28 | 29 | ## SCSS 30 | If you are compiling your css files with sass - library source scss file can be imported. 31 | Add $vdpColor to your scss variables to override default styling. 32 | 33 | ```scss 34 | $vdpColor: #cc99cd; 35 | @import 'vue-date-pick/src/vueDatePick.scss'; 36 | ``` -------------------------------------------------------------------------------- /documentation/examples.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | ## Calendar widget 4 | Vue date pick can be used in calendar widget form. 5 | 6 | 7 | 8 |
9 | 10 | Show code 11 | 12 | 13 | ```vue 14 | 20 | 21 | 31 | ``` 32 |
33 | 34 | ## Date format 35 | Simple date picker with custom format (default is 'YYYY-MM-DD'): 36 | 37 | 41 | 42 |
43 | 44 | Show code 45 | 46 | 47 | ```vue 48 | 54 | 55 | 64 | ``` 65 |
66 | 67 | ## Display format 68 | Use display format prop when UI date format is different from raw data format. 69 | 70 | 74 | 75 |
76 | 77 | Show code 78 | 79 | 80 | ```vue 81 | 87 | 88 | 97 | ``` 98 |
99 | 100 | ## Custom date parser 101 | Vue date pick comes with simple date parser. 102 | If you need to work with complex date formats feel free to inject implementation of your choice. 103 | 104 | 105 | 106 |
107 | 108 | Show code 109 | 110 | 111 | ```vue 112 | 121 | 122 | 142 | ``` 143 |
144 | 145 | ## Date time picker 146 | Date picker with controls for hours and minutes: 147 | 148 | 152 | 153 |
154 | 155 | Show code 156 | 157 | 158 | ```vue 159 | 166 | 167 | 176 | ``` 177 |
178 | 179 | ## Date time picker (AM/PM) 180 | Date time picker with hours displayed using 12 hour clock: 181 | 182 | 186 | 187 |
188 | 189 | Show code 190 | 191 | 192 | ```vue 193 | 202 | 203 | 212 | ``` 213 |
214 | 215 | ## Custom start period 216 | Open calendar UI with custom start month / year period: 217 | 218 | 222 | 223 |
224 | 225 | Show code 226 | 227 | 228 | ```vue 229 | 234 | 235 | 241 | ``` 242 |
243 | 244 | ## Custom content with slot 245 | Replace default input controls with custom slot content: 246 | 247 | 248 | 249 |
250 | 251 | Show code 252 | 253 | 254 | ```vue 255 | 269 | 270 | 279 | ``` 280 |
281 | 282 | ## Disabling dates 283 | Set "isDateDisabled" function as component prop to disable dates: 284 | 285 | 286 | 287 |
288 | 289 | Show code 290 | 291 | 292 | ```vue 293 | 299 | 300 | 315 | ``` 316 |
317 | 318 | ## Disabling manual input 319 | Manual user input can be disabled by setting input readonly attribute via "inputAttributes" prop. 320 | 321 | 325 | 326 |
327 | 328 | Show code 329 | 330 | 331 | ```vue 332 | 338 | 339 | 349 | ``` 350 |
351 | 352 | ## Disable editing and picker UI 353 | Disable input editing and calendar UI by setting "editable" prop to false. 354 | 355 | 359 | 360 |
361 | 362 | Show code 363 | 364 | 365 | ```vue 366 | 372 | 373 | 383 | ``` 384 |
385 | 386 | ## Start week on Sunday 387 | Sunday can be set as the first day of the week via "startWeekOnSunday" prop. 388 | 389 | 393 | 394 |
395 | 396 | Show code 397 | 398 | 399 | ```vue 400 | 406 | 407 | 417 | ``` 418 |
419 | 420 | ## Change selectable years 421 | Dropdown for selecteble years can be customized via selectableYearRange prop 422 | (default value is 40 years from and after current year). 423 | 424 | 430 | 431 |
432 | 433 | Show code 434 | 435 | 436 | ```vue 437 | 443 | 444 | 454 | ``` 455 |
456 | -------------------------------------------------------------------------------- /documentation/getting-started.md: -------------------------------------------------------------------------------- 1 | # Getting started 2 | Install via node package manager: 3 | ```bash 4 | npm install vue-date-pick 5 | ``` 6 | Integrate into your application via standard Vue api for registering and using components. 7 | Vue date pick is designed for usage with v-model directive. 8 | ```vue 9 | 12 | 13 | 24 | ``` -------------------------------------------------------------------------------- /documentation/localization.md: -------------------------------------------------------------------------------- 1 | # Localization 2 | 3 | Following props to are used to localize your date pick instance: 4 | 5 | ```js 6 | nextMonthCaption: {type: String, default: 'Next month'}, 7 | prevMonthCaption: {type: String, default: 'Previous month'}, 8 | setTimeCaption: {type: String, default: 'Set time:'}, 9 | weekdays: { 10 | type: Array, 11 | default: () => ([ 12 | 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' 13 | ]) 14 | }, 15 | months: { 16 | type: Array, 17 | default: () => ([ 18 | 'January', 'February', 'March', 'April', 19 | 'May', 'June', 'July', 'August', 20 | 'September', 'October', 'November', 'December' 21 | ]) 22 | } 23 | ``` 24 | --- -------------------------------------------------------------------------------- /documentation/props-reference.md: -------------------------------------------------------------------------------- 1 | # Props reference 2 | 3 | List of all props available on vue date pick component: 4 | 5 | ```js 6 | value: { 7 | type: String, 8 | default: '' 9 | }, 10 | format: { 11 | type: String, 12 | default: 'YYYY-MM-DD' 13 | }, 14 | displayFormat: { 15 | type: String 16 | }, 17 | editable: { 18 | type: Boolean, 19 | default: true 20 | }, 21 | hasInputElement: { 22 | type: Boolean, 23 | default: true 24 | }, 25 | inputAttributes: { 26 | type: Object 27 | }, 28 | selectableYearRange: { 29 | type: [Number, Object, Function], 30 | default: 40 31 | }, 32 | parseDate: { 33 | type: Function 34 | }, 35 | formatDate: { 36 | type: Function 37 | }, 38 | pickTime: { 39 | type: Boolean, 40 | default: false 41 | }, 42 | pickMinutes: { 43 | type: Boolean, 44 | default: true 45 | }, 46 | pickSeconds: { 47 | type: Boolean, 48 | default: false 49 | }, 50 | use12HourClock: { 51 | type: Boolean, 52 | default: false 53 | }, 54 | isDateDisabled: { 55 | type: Function, 56 | default: () => false 57 | }, 58 | nextMonthCaption: { 59 | type: String, 60 | default: 'Next month' 61 | }, 62 | prevMonthCaption: { 63 | type: String, 64 | default: 'Previous month' 65 | }, 66 | setTimeCaption: { 67 | type: String, 68 | default: 'Set time:' 69 | }, 70 | mobileBreakpointWidth: { 71 | type: Number, 72 | default: 500 73 | }, 74 | weekdays: { 75 | type: Array, 76 | default: () => ([ 77 | 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' 78 | ]) 79 | }, 80 | months: { 81 | type: Array, 82 | default: () => ([ 83 | 'January', 'February', 'March', 'April', 84 | 'May', 'June', 'July', 'August', 85 | 'September', 'October', 'November', 'December' 86 | ]) 87 | }, 88 | startWeekOnSunday: { 89 | type: Boolean, 90 | default: false 91 | } 92 | ``` 93 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | const webpackConfig = require('./webpack.config.js'); 2 | 3 | ['entry', 'output', 'optimization'].forEach(key => { 4 | delete webpackConfig[key]; 5 | }); 6 | 7 | module.exports = function(config) { 8 | 9 | config.set({ 10 | 11 | frameworks: ['mocha'], 12 | 13 | files: [ 14 | 'spec/**/*spec.js' 15 | ], 16 | 17 | preprocessors: { 18 | 'spec/**/*spec.js': ['webpack', 'sourcemap'] 19 | }, 20 | 21 | webpack: webpackConfig, 22 | 23 | reporters: ['spec', 'coverage'], 24 | 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | {type: 'lcov', subdir: '.'}, 29 | {type: 'text-summary'} 30 | ] 31 | }, 32 | 33 | browsers: ['ChromeHeadless'] 34 | 35 | }); 36 | 37 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-date-pick", 3 | "version": "1.5.1", 4 | "description": "Date time picker based on Vue", 5 | "homepage": "https://dbrekalo.github.io/vue-date-pick/", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/dbrekalo/vue-date-pick" 9 | }, 10 | "main": "dist/vueDatePick.js", 11 | "license": "MIT", 12 | "files": [ 13 | "/dist", 14 | "/src" 15 | ], 16 | "keywords": [ 17 | "datepicker", 18 | "datetimepicker", 19 | "date", 20 | "time", 21 | "picker", 22 | "pick", 23 | "vue" 24 | ], 25 | "scripts": { 26 | "dev": "npm run dev:docs", 27 | "dev:docs": "vuepress dev documentation", 28 | "build": "npm run build:lib && npm run build:docs", 29 | "build:lib": "NODE_ENV=production webpack --progress", 30 | "build:docs": "vuepress build documentation", 31 | "lint": "eslint src/vueDatePick.vue -c .eslintrc.js --color", 32 | "test": "BABEL_ENV=test karma start --single-run --browsers ChromeHeadless", 33 | "watch:test": "BABEL_ENV=test karma start --browsers ChromeHeadless" 34 | }, 35 | "dependencies": { 36 | "vue": "^2.6.0" 37 | }, 38 | "devDependencies": { 39 | "@babel/core": "^7.0.0", 40 | "@babel/preset-env": "^7.0.0", 41 | "@vue/test-utils": "^1.0.0-beta.33", 42 | "autoprefixer": "^9.1.0", 43 | "babel-eslint": "^10.0.1", 44 | "babel-loader": "^8.0.0", 45 | "babel-plugin-istanbul": "^5.2.0", 46 | "chai": "^4.2.0", 47 | "eslint": "^6.8.0", 48 | "eslint-config-standard": "^14.1.1", 49 | "eslint-loader": "^4.0.2", 50 | "eslint-plugin-import": "^2.14.0", 51 | "eslint-plugin-node": "^11.1.0", 52 | "eslint-plugin-promise": "^4.0.1", 53 | "eslint-plugin-standard": "^4.0.0", 54 | "eslint-plugin-vue": "^6.2.2", 55 | "fecha": "^4.2.0", 56 | "karma": "^5.0.4", 57 | "karma-chrome-launcher": "^3.1.0", 58 | "karma-coverage": "^2.0.2", 59 | "karma-mocha": "^2.0.1", 60 | "karma-sourcemap-loader": "^0.3.7", 61 | "karma-spec-reporter": "0.0.32", 62 | "karma-webpack": "^4.0.2", 63 | "mini-css-extract-plugin": "^0.9.0", 64 | "mocha": "^7.1.2", 65 | "postcss-loader": "^3.0.0", 66 | "sass": "^1.54.9", 67 | "sass-loader": "^8.0.2", 68 | "uglifyjs-webpack-plugin": "^2.0.1", 69 | "vue-loader": "^15.4.2", 70 | "vuepress": "^0.14.4", 71 | "webpack": "^4.25.1", 72 | "webpack-cli": "^3.1.2" 73 | }, 74 | "engines": { 75 | "node": ">= 6.0.0", 76 | "npm": ">= 3.0.0" 77 | }, 78 | "browserslist": [ 79 | "last 4 versions", 80 | "Chrome >= 30", 81 | "Firefox >= 30", 82 | "Explorer >= 9" 83 | ] 84 | } 85 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'autoprefixer': {} 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /spec/index.spec.js: -------------------------------------------------------------------------------- 1 | import {assert} from 'chai'; 2 | import {mount} from '@vue/test-utils'; 3 | import VueDatePick from '../src/vueDatePick'; 4 | import Vue from 'vue'; 5 | import fecha from 'fecha'; 6 | 7 | describe('Vue date pick', () => { 8 | 9 | it('renders input element with correct value', async () => { 10 | 11 | const wrapper = mount(VueDatePick, { 12 | propsData: {value: '2017-12-29'} 13 | }); 14 | 15 | assert.equal(wrapper.find('input').element.value, '2017-12-29'); 16 | 17 | }); 18 | 19 | it('renders display format correctly', async () => { 20 | 21 | const wrapper = mount(VueDatePick, { 22 | propsData: {value: '2017-12-29', displayFormat: 'DD.MM.YYYY'} 23 | }); 24 | 25 | assert.equal(wrapper.find('input').element.value, '29.12.2017'); 26 | 27 | wrapper.setProps({value: '2017-12-30'}); 28 | await Vue.nextTick(); 29 | 30 | assert.equal(wrapper.find('input').element.value, '30.12.2017'); 31 | 32 | }); 33 | 34 | it('emits correct input on date select', async () => { 35 | 36 | const wrapper = mount(VueDatePick, { 37 | propsData: {value: '2017-12-29', displayFormat: 'DD.MM.YYYY'} 38 | }); 39 | 40 | wrapper.vm.open(); 41 | await Vue.nextTick(); 42 | 43 | wrapper.find('td[data-id="2017-12-30"]').trigger('click'); 44 | wrapper.find('input').setValue('31.12.2017'); 45 | wrapper.vm.close(); 46 | 47 | assert.deepEqual(wrapper.emitted().input, [ 48 | ['2017-12-30'], 49 | ['2017-12-31'] 50 | ]); 51 | 52 | }); 53 | 54 | it('can use alternate parsing engine', async () => { 55 | 56 | const wrapper = mount(VueDatePick, { 57 | propsData: { 58 | value: '2017-12-29 05:30', 59 | format: 'YYYY-MM-DD HH:mm', 60 | displayFormat: 'DD.MM.YYYY [at] HH:mm', 61 | parseDate(dateString, format) { 62 | return fecha.parse(dateString, format); 63 | }, 64 | formatDate(date, format) { 65 | return fecha.format(date, format); 66 | } 67 | } 68 | }); 69 | 70 | assert.equal(wrapper.find('input').element.value, '29.12.2017 at 05:30'); 71 | 72 | wrapper.vm.open(); 73 | await Vue.nextTick(); 74 | 75 | wrapper.find('td[data-id="2017-12-30"]').trigger('click'); 76 | 77 | assert.deepEqual(wrapper.emitted().input, [ 78 | ['2017-12-30 05:30'] 79 | ]); 80 | 81 | }); 82 | 83 | it('can function as time picker', async () => { 84 | 85 | const wrapper = mount(VueDatePick, { 86 | propsData: { 87 | value: '2017-12-29 5:30:00', 88 | format: 'YYYY-MM-DD HH:mm:ss', 89 | pickTime: true, 90 | pickMinutes: true, 91 | pickSeconds: true 92 | } 93 | }); 94 | 95 | wrapper.vm.open(); 96 | await Vue.nextTick(); 97 | 98 | wrapper.find('.vdpHoursInput').setValue('6'); 99 | wrapper.find('.vdpMinutesInput').setValue('15'); 100 | wrapper.find('.vdpHoursInput').setValue('24'); 101 | wrapper.find('.vdpHoursInput').setValue('-1'); 102 | 103 | assert.deepEqual(wrapper.emitted().input, [ 104 | ['2017-12-29 06:30:00'], 105 | ['2017-12-29 05:15:00'], 106 | ['2017-12-29 23:30:00'], 107 | ['2017-12-29 00:30:00'] 108 | ]); 109 | 110 | }); 111 | 112 | it('can function as time picker with 12 hour click', async () => { 113 | 114 | const wrapper = mount(VueDatePick, { 115 | propsData: { 116 | value: '2017-12-29 5:30:00', 117 | format: 'YYYY-MM-DD HH:mm:ss', 118 | displayFormat: 'YYYY.MM.DD H:mm A', 119 | pickTime: true, 120 | use12HourClock: true 121 | } 122 | }); 123 | 124 | wrapper.vm.open(); 125 | await Vue.nextTick(); 126 | 127 | assert.equal(wrapper.find('input').element.value, '2017.12.29 5:30 AM'); 128 | 129 | wrapper.find('.vdp12HourToggleBtn').trigger('click'); 130 | 131 | assert.deepEqual(wrapper.emitted().input, [ 132 | ['2017-12-29 17:30:00'] 133 | ]); 134 | 135 | }); 136 | 137 | it('disables dates correctly', async () => { 138 | 139 | const wrapper = mount(VueDatePick, { 140 | propsData: { 141 | value: '2017-12-29', 142 | isDateDisabled: function(date) { 143 | const refDate = new Date('2017-12-29'); 144 | return date > refDate; 145 | } 146 | } 147 | }); 148 | 149 | wrapper.vm.open(); 150 | await Vue.nextTick(); 151 | 152 | assert.isTrue(wrapper.find('td[data-id="2017-12-30"]').is('.disabled')); 153 | 154 | wrapper.find('td[data-id="2017-12-30"]').trigger('click'); 155 | 156 | assert.isUndefined(wrapper.emitted().input); 157 | 158 | }); 159 | 160 | it('starts week on monday', async () => { 161 | 162 | const wrapper = mount(VueDatePick, { 163 | propsData: { 164 | value: '2017-12-29' 165 | } 166 | }); 167 | 168 | wrapper.vm.open(); 169 | await Vue.nextTick(); 170 | 171 | assert.equal('Mon', wrapper.find('.vdpHeadCell:first-of-type span').text().trim()); 172 | assert.equal('Sun', wrapper.find('.vdpHeadCell:last-of-type span').text().trim()); 173 | }); 174 | 175 | it('can start week on sunday', async () => { 176 | 177 | const wrapper = mount(VueDatePick, { 178 | propsData: { 179 | value: '2017-12-29', 180 | startWeekOnSunday: true 181 | } 182 | }); 183 | 184 | wrapper.vm.open(); 185 | await Vue.nextTick(); 186 | 187 | assert.equal('Sun', wrapper.find('.vdpHeadCell:first-of-type span').text().trim()); 188 | assert.equal('Sat', wrapper.find('.vdpHeadCell:last-of-type span').text().trim()); 189 | 190 | // Change year and assert again 191 | wrapper.setProps({value: '2018-12-29'}); 192 | await Vue.nextTick(); 193 | 194 | assert.equal('Sun', wrapper.find('.vdpHeadCell:first-of-type span').text().trim()); 195 | assert.equal('Sat', wrapper.find('.vdpHeadCell:last-of-type span').text().trim()); 196 | }); 197 | 198 | it('sets selected cells', async () => { 199 | 200 | const wrapper = mount(VueDatePick); 201 | 202 | wrapper.vm.open(); 203 | await Vue.nextTick(); 204 | 205 | assert.isFalse(wrapper.find('td.selected').exists()); 206 | 207 | wrapper.setProps({value: '2017-12-29'}); 208 | await Vue.nextTick(); 209 | 210 | assert.isTrue(wrapper.find('td[data-id="2017-12-29"]').is('.selected')); 211 | 212 | }); 213 | 214 | it('switches periods correctly', async () => { 215 | 216 | const wrapper = mount(VueDatePick, { 217 | propsData: {value: '2017-12-29'} 218 | }); 219 | 220 | wrapper.vm.open(); 221 | await Vue.nextTick(); 222 | wrapper.find('.vdpArrowNext').trigger('click'); 223 | await Vue.nextTick(); 224 | 225 | assert.equal('January 2018', wrapper.findAll('.vdpPeriodControl > button').wrappers.map( 226 | buttonWrap => buttonWrap.element.textContent.trim() 227 | ).join(' ')); 228 | 229 | }); 230 | 231 | it('closes floater on outside click', async () => { 232 | 233 | const wrapper = mount(VueDatePick); 234 | 235 | wrapper.vm.open(); 236 | await Vue.nextTick(); 237 | 238 | assert.isTrue(wrapper.vm.opened); 239 | 240 | document.querySelector('body').click(); 241 | 242 | assert.isFalse(wrapper.vm.opened); 243 | 244 | }); 245 | 246 | it('closes floater on escape press', async () => { 247 | 248 | const wrapper = mount(VueDatePick); 249 | 250 | wrapper.vm.open(); 251 | await Vue.nextTick(); 252 | 253 | var event = new Event('keyup'); 254 | event.which = event.keyCode = 27; 255 | document.dispatchEvent(event); 256 | 257 | assert.isFalse(wrapper.vm.opened); 258 | 259 | }); 260 | 261 | it('tolerates invalid user input', async () => { 262 | 263 | const wrapper = mount(VueDatePick); 264 | 265 | wrapper.find('input').setValue('2017-12'); 266 | wrapper.find('input').setValue('2017-1229'); 267 | 268 | assert.deepEqual(wrapper.emitted().input, [ 269 | ['2017-12'], 270 | ['2017-1229'] 271 | ]); 272 | 273 | }); 274 | 275 | it('renders as calendar widget', async () => { 276 | 277 | const wrapper = mount(VueDatePick, { 278 | propsData: { 279 | hasInputElement: false 280 | } 281 | }); 282 | 283 | assert.isFalse(wrapper.contains('input')); 284 | assert.isTrue(wrapper.contains('.vdpTable')); 285 | 286 | }); 287 | 288 | }); 289 | -------------------------------------------------------------------------------- /src/vueDatePick.scss: -------------------------------------------------------------------------------- 1 | $vdpColor: #7485c2 !default; 2 | 3 | @keyframes vdpSlideFromLeft { 4 | from { opacity: 0; transform: translate3d(-0.5em,0,0); } 5 | to { opacity: 1; transform: translate3d(0,0,0); } 6 | } 7 | 8 | @keyframes vdpSlideFromRight { 9 | from { opacity: 0; transform: translate3d(0.5em,0,0); } 10 | to { opacity: 1; transform: translate3d(0,0,0); } 11 | } 12 | 13 | @keyframes vdpToggleCalendar { 14 | from { opacity: 0; transform: scale(0.5); } 15 | to { opacity: 1; transform: scale(1); } 16 | } 17 | 18 | @keyframes vdpFadeCalendar { 19 | from { opacity: 0; } 20 | to { opacity: 1; } 21 | } 22 | 23 | .vdp-toggle-calendar-enter-active.vdpPositionReady { 24 | 25 | transform-origin: top left; 26 | animation: vdpToggleCalendar .2s; 27 | 28 | } 29 | 30 | .vdp-toggle-calendar-leave-active { 31 | 32 | animation: vdpToggleCalendar .15s reverse; 33 | 34 | } 35 | 36 | .vdp-toggle-calendar-enter-active.vdpPositionFixed { 37 | 38 | animation: vdpFadeCalendar .3s; 39 | 40 | } 41 | 42 | .vdp-toggle-calendar-leave-active.vdpPositionFixed { 43 | 44 | animation: vdpFadeCalendar .3s reverse; 45 | 46 | } 47 | 48 | .vdpComponent { 49 | 50 | position: relative; display: inline-block; font-size: 10px; 51 | color: #303030; 52 | /*font-family: Helvetica, Arial, sans-serif;*/ 53 | 54 | } 55 | 56 | .vdpComponent.vdpWithInput > input { 57 | 58 | padding-right: 30px; 59 | 60 | } 61 | 62 | .vdpClearInput { 63 | 64 | font-size: 1em; position: absolute; top: 0; bottom: 0; right: 0; 65 | width: 3em; 66 | 67 | } 68 | 69 | .vdpClearInput:before { 70 | 71 | content: '×'; width: 1.4em; height: 1.4em; line-height: 1.1em; box-sizing: border-box; 72 | position: absolute; left: 50%; top: 50%; margin: -0.7em 0 0 -0.7em; 73 | color: rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.15); border-radius: 50%; 74 | background-color: #fff; 75 | 76 | } 77 | 78 | .vdpClearInput:hover:before { 79 | box-shadow: 0 0.2em 0.5em rgba(0,0,0,0.15); 80 | } 81 | 82 | .vdpOuterWrap.vdpFloating { 83 | 84 | position: absolute; padding: 0.5em 0; z-index: 220; 85 | 86 | } 87 | 88 | .vdpOuterWrap.vdpPositionFixed { 89 | 90 | position: fixed; left: 0; top: 0; bottom: 0; right: 0; 91 | padding: 2em; display: flex; justify-content: center; align-items: center; 92 | background-color: rgba(0,0,0,0.3); 93 | 94 | } 95 | 96 | .vdpFloating .vdpInnerWrap { 97 | 98 | max-width: 30em; 99 | 100 | } 101 | 102 | .vdpPositionFixed .vdpInnerWrap { 103 | 104 | max-width: 30em; margin: 0 auto; 105 | border: 0; animation: vdpToggleCalendar 0.3s; 106 | 107 | } 108 | 109 | .vdpFloating.vdpPositionTop { top: 100%; } 110 | .vdpFloating.vdpPositionBottom { bottom: 100%; } 111 | .vdpFloating.vdpPositionLeft { left: 0; } 112 | .vdpFloating.vdpPositionRight { right: 0; } 113 | 114 | .vdpPositionTop.vdpPositionLeft { transform-origin: top left; } 115 | .vdpPositionTop.vdpPositionRight { transform-origin: top right; } 116 | .vdpPositionBottom.vdpPositionLeft { transform-origin: bottom left; } 117 | .vdpPositionBottom.vdpPositionRight { transform-origin: bottom right; } 118 | 119 | .vdpInnerWrap { 120 | 121 | overflow: hidden; min-width: 28em; box-sizing: border-box; padding: 1em; 122 | background: #fff; box-shadow: 0 0.2em 1.5em rgba(0,0,0,0.06); 123 | border-radius: 0.5em; border: 1px solid rgba(0,0,0,0.15); 124 | 125 | } 126 | 127 | .vdpHeader { 128 | 129 | position: relative; padding: 0 1em 2.5em; margin: -1em -1em -2.5em; 130 | text-align: center; background: #f5f5f5; 131 | 132 | } 133 | 134 | .vdpClearInput, 135 | .vdpArrow, 136 | .vdpPeriodControl > button, 137 | .vdp12HourToggleBtn { 138 | 139 | margin:0; padding: 0; border: 0; cursor: pointer; background: none; 140 | 141 | } 142 | 143 | .vdpArrow::-moz-focus-inner, 144 | .vdpClearInput::-moz-focus-inner, 145 | .vdpPeriodControl::-moz-focus-inner, 146 | .vdp12HourToggleBtn::-moz-focus-inner { 147 | 148 | padding: 0; border: 0; 149 | 150 | } 151 | 152 | .vdpArrow { 153 | 154 | font-size: 1em; width: 5em; text-indent: -999em; overflow: hidden; 155 | position: absolute; top: 0; bottom: 2.5em; text-align: left; 156 | 157 | } 158 | 159 | .vdpArrow:before { 160 | 161 | content: ''; width: 2.2em; height: 2.2em; 162 | position: absolute; left: 50%; top: 50%; margin: -1.1em 0 0 -1.1em; 163 | border-radius: 100%; transition: background-color 0.2s; 164 | 165 | } 166 | 167 | .vdpArrow:hover, 168 | .vdpArrow:focus, 169 | .vdpArrow:active { 170 | outline: 0; 171 | } 172 | 173 | .vdpArrow:hover:before, 174 | .vdpArrow:focus:before { 175 | 176 | background-color: rgba(0,0,0,0.03); 177 | 178 | } 179 | 180 | .vdpArrow:active:before { 181 | 182 | background-color: rgba(0,0,0,0.07); 183 | 184 | } 185 | 186 | .vdpArrowNext:before { 187 | 188 | margin-left: -1.4em; 189 | 190 | } 191 | 192 | .vdpArrow:after { 193 | 194 | content: ''; position: absolute; left: 50%; top: 50%; 195 | margin-top: -0.5em; width: 0; height: 0; 196 | border: 0.5em solid transparent; 197 | 198 | } 199 | 200 | .vdpArrowPrev { 201 | 202 | left: -0.3em; 203 | 204 | } 205 | 206 | .vdpArrowPrev:after { 207 | 208 | margin-left: -0.8em; 209 | border-right-color: $vdpColor; 210 | 211 | } 212 | 213 | .vdpArrowNext { 214 | 215 | right: -0.6em; 216 | 217 | } 218 | 219 | .vdpArrowNext:after { 220 | 221 | margin-left: -0.5em; 222 | border-left-color: $vdpColor; 223 | 224 | } 225 | 226 | .vdpPeriodControl { 227 | 228 | display: inline-block; position: relative; 229 | 230 | } 231 | 232 | .vdpPeriodControl > button { 233 | 234 | font-size: 1.5em; padding: 1em 0.4em; display: inline-block; 235 | 236 | } 237 | 238 | .vdpPeriodControl > select { 239 | 240 | position: absolute; left: 0; top: 0; width: 100%; height: 100%; 241 | cursor: pointer; opacity: 0; font-size: 1.6em; 242 | -webkit-appearance: none; 243 | 244 | } 245 | 246 | .vdpTable { 247 | 248 | width: 100%; table-layout: fixed; position: relative; z-index: 5; 249 | 250 | } 251 | 252 | .vdpNextDirection { 253 | 254 | animation: vdpSlideFromRight 0.5s; 255 | 256 | } 257 | 258 | .vdpPrevDirection { 259 | 260 | animation: vdpSlideFromLeft 0.5s; 261 | 262 | } 263 | 264 | .vdpCell, .vdpHeadCell { 265 | 266 | text-align: center; box-sizing: border-box; 267 | 268 | } 269 | 270 | .vdpCell { 271 | 272 | padding: 0.5em 0; 273 | 274 | } 275 | 276 | .vdpHeadCell { 277 | 278 | padding: 0.3em 0.5em 1.8em; 279 | 280 | } 281 | 282 | .vdpHeadCellContent { 283 | 284 | font-size: 1.3em; font-weight: normal; 285 | color: #848484; 286 | 287 | } 288 | 289 | .vdpCellContent { 290 | 291 | font-size: 1.4em; display: block; margin: 0 auto; 292 | width: 1.857em; line-height: 1.857em; 293 | text-align: center; border-radius: 100%; 294 | transition: background 0.1s, color 0.1s; 295 | 296 | } 297 | 298 | .vdpCell.outOfRange { 299 | 300 | color: #c7c7c7; 301 | 302 | } 303 | 304 | .vdpCell.today { 305 | 306 | color: $vdpColor; 307 | 308 | } 309 | 310 | .vdpCell.selected .vdpCellContent { 311 | 312 | color: #fff; background: $vdpColor; 313 | 314 | } 315 | 316 | @media (hover: hover) { 317 | 318 | .vdpCell.selectable:hover .vdpCellContent { 319 | 320 | color: #fff; background: $vdpColor; 321 | 322 | } 323 | 324 | } 325 | 326 | .vdpCell.selectable { 327 | 328 | cursor: pointer; 329 | 330 | } 331 | 332 | .vdpCell.disabled { 333 | 334 | opacity: 0.5; 335 | 336 | } 337 | 338 | .vdpTimeControls { 339 | 340 | padding: 1.2em 2em; position: relative; margin: 1em -1em -1em; 341 | text-align: center; 342 | background: #f5f5f5; 343 | /*border-top: 1px solid rgba(0,0,0,0.15);*/ 344 | 345 | } 346 | 347 | .vdpTimeUnit { 348 | 349 | display: inline-block; position: relative; vertical-align: middle; 350 | 351 | } 352 | 353 | .vdpTimeUnit > pre, 354 | .vdpTimeUnit > input { 355 | 356 | font-size: 1.7em; line-height: 1.3; padding: 0.1em 0.1em; 357 | word-wrap: break-word; white-space: pre-wrap; 358 | resize: none; margin: 0; box-sizing: border-box; 359 | color: #000; border: 0; border-bottom: 1px solid transparent; 360 | text-align: center; 361 | 362 | } 363 | 364 | .vdpTimeUnit > pre { 365 | 366 | visibility: hidden; font-family: inherit; 367 | 368 | } 369 | 370 | .vdpTimeUnit > input { 371 | 372 | position: absolute; top: 0; left: 0; overflow: hidden; 373 | height: 100%; width: 100%; outline: none; padding: 0; 374 | appearance: none; border-radius: 0; background: transparent; 375 | 376 | -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; 377 | 378 | &::selection { 379 | background-color: rgba($vdpColor, 0.15); 380 | } 381 | 382 | } 383 | 384 | .vdpTimeUnit > input:hover, 385 | .vdpTimeUnit > input:focus { 386 | 387 | border-bottom-color: $vdpColor; 388 | 389 | } 390 | 391 | .vdpTimeUnit > input:disabled { 392 | 393 | border-bottom-color: transparent; 394 | 395 | } 396 | 397 | .vdpTimeUnit > input::-webkit-inner-spin-button, 398 | .vdpTimeUnit > input::-webkit-outer-spin-button { 399 | margin: 0; 400 | -webkit-appearance: none; 401 | } 402 | 403 | .vdpTimeSeparator, .vdpTimeCaption { 404 | 405 | display: inline-block; vertical-align: middle; font-size: 1.3em; 406 | color: #848484; 407 | 408 | } 409 | 410 | .vdpTimeCaption { 411 | 412 | margin-right: 0.5em; 413 | 414 | } 415 | 416 | .vdp12HourToggleBtn { 417 | 418 | display: inline-block; vertical-align: middle; 419 | font-size: 1.3em; padding: 0 0.4em; 420 | color: #303030; 421 | 422 | } 423 | 424 | .vdp12HourToggleBtn:hover, 425 | .vdp12HourToggleBtn:focus { 426 | 427 | color: $vdpColor; outline: 0; 428 | 429 | } 430 | 431 | .vdp12HourToggleBtn:disabled { 432 | 433 | color: #303030; 434 | 435 | } 436 | 437 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin'); 4 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 5 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 6 | const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); 7 | 8 | const isProduction = process.env.NODE_ENV === 'production'; 9 | 10 | module.exports = { 11 | 12 | mode: isProduction ? 'production' : 'development', 13 | 14 | entry: './src/vueDatePick.vue', 15 | 16 | output: { 17 | path: path.resolve(__dirname, 'dist'), 18 | filename: 'vueDatePick.js', 19 | library: 'VueDatePick', 20 | libraryExport: 'default', 21 | libraryTarget: 'umd', 22 | globalObject: 'typeof self !== \'undefined\' ? self : this' 23 | }, 24 | 25 | module: { 26 | rules: [ 27 | { 28 | test: /\.scss$/, 29 | use: [ 30 | isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', 31 | 'css-loader', 32 | 'postcss-loader', 33 | 'sass-loader' 34 | ], 35 | }, 36 | { 37 | test: /\.vue$/, 38 | loader: 'vue-loader' 39 | }, 40 | { 41 | test: /\.(js|vue)$/, 42 | loader: 'eslint-loader', 43 | enforce: 'pre', 44 | include: [ 45 | path.join(__dirname, 'src'), 46 | path.join(__dirname, 'spec') 47 | ], 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel-loader', 52 | include: [ 53 | path.join(__dirname, 'src') 54 | ] 55 | } 56 | ] 57 | }, 58 | 59 | optimization: { 60 | minimizer: [ 61 | new UglifyJsPlugin({ 62 | cache: true, 63 | parallel: true, 64 | sourceMap: false 65 | }), 66 | new OptimizeCSSAssetsPlugin({}) 67 | ] 68 | }, 69 | 70 | resolve: { 71 | extensions: ['*', '.js', '.vue', '.json'] 72 | }, 73 | 74 | plugins: [ 75 | new VueLoaderPlugin(), 76 | isProduction && new MiniCssExtractPlugin({filename: 'vueDatePick.css'}) 77 | ].filter(i => i) 78 | }; 79 | --------------------------------------------------------------------------------