├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── dist ├── vue-datepicker-local.css └── vue-datepicker-local.js ├── example ├── App.vue └── app.js ├── index.html ├── package.json ├── src ├── VueDatepickerLocal.vue ├── VueDatepickerLocalCalendar.vue └── index.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["last 2 versions"] 7 | } 8 | }] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parserOptions": { 4 | "ecmaVersion": 6, 5 | "sourceType": "module", 6 | "ecmaFeatures": { 7 | "jsx": true 8 | } 9 | }, 10 | "extends": "standard", 11 | "plugins": ["html"], 12 | "env": { 13 | "browser": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | config 4 | static 5 | example 6 | docs 7 | src-docs 8 | .DS_Store 9 | .* 10 | index.html 11 | gulpfile.js 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 韦飞越 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-datepicker-local 2 | 3 | ### A Beautiful Datepicker Component For Vue2 4 | * Lightweight (less than 5kb minified and gzipped) 5 | * Only dependencies Vue 6 | * Beautiful! 7 | 8 | ![image](https://raw.githubusercontent.com/weifeiyue/vue-datepicker-local/gh-pages/preview.png) 9 | 10 | ## Demo 11 | [https://weifeiyue.github.io/vue-datepicker-local/](https://weifeiyue.github.io/vue-datepicker-local/) 12 | 13 | ## Usage 14 | 15 | ### Install 16 | 17 | ```bash 18 | $ npm install vue-datepicker-local 19 | ``` 20 | 21 | ### ES6 22 | ```html 23 | 26 | 27 | 41 | ``` 42 | 43 | ### Browser globals 44 | The `dist` folder contains `vue-datepicker-local.js` and `vue-datepicker-local.css`. 45 | ```html 46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 | 54 |
55 | 56 | 57 | 65 | 66 | 67 | 68 | ``` 69 | ### Props 70 | 71 | | Prop | Description | Type | Default | 72 | |:---------------|:-------------------------------------------------|:-----------|:-------------------| 73 | | v-model | dates to be manipulated | Date/Array | -- | 74 | | name | name for input | String | -- | 75 | | type | type for input (inline/normal) | String | normal | 76 | | inputClass | custom class name for input | String | -- | 77 | | popupClass | custom class name for popup | String | -- | 78 | | disabled | determine whether the DatePicker is disabled | Boolean | false | 79 | | clearable | clear the date | Boolean | false | 80 | | rangeSeparator | range separator | String | "~" | 81 | | format | to set the date format | String | "YYYY-MM-DD" | 82 | | local | the local of the DatePicker | Object | {
dow: 1, // Monday is the first day of the week
hourTip: '选择小时', // tip of select hour
minuteTip: '选择分钟', // tip of select minute
secondTip: '选择秒数', // tip of select second
yearSuffix: '年', // format of head
monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), // months of head
months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), // months of panel
weeks: '一_二_三_四_五_六_日'.split('_'), // weeks
cancelTip: '取消', // default text for cancel button
, submitTip: '提交' // default text for submit button
} | 83 | | disabledDate | specify the date that cannot be selected | Function | (time, format)=>{return false} | 84 | | showButtons | show Cancel/Submit buttons | Boolean | false | 85 | | placeholder | placeholder of Input | String | -- | 86 | 87 | ### Events 88 | 89 | | Event Name | Description | Parameters | 90 | |:---------------|:-------------------------------------------------|:-------------------------------------| 91 | | confirm |triggers when user confirms | the value component's binding value | 92 | | cancel |triggers when user click the cancel button | -- | 93 | | clear |triggers when user click the clear button | -- | 94 | ## License 95 | vue-datepicker-local is licensed under [The MIT License](LICENSE). 96 | -------------------------------------------------------------------------------- /dist/vue-datepicker-local.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue-datetime-local.js v1.0.19 3 | * (c) 2017-2018 weifeiyue 4 | * Released under the MIT License. 5 | */ 6 | .datepicker{display:inline-block;position:relative}.datepicker:before{content:"";display:block;background:url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPjxwYXRoIGQ9Ik01NjQgMTgwLjJINDQ4Yy04LjMgMC0xNS02LjctMTUtMTVzNi43LTE1IDE1LTE1aDExNmM4LjIgMCAxNSA2LjcgMTUgMTVzLTYuOCAxNS0xNSAxNXoiIGZpbGw9IiM5ODk4OTgiLz48cGF0aCBkPSJNOTQ1IDk1Mi4ySDgxLjJjLTguMiAwLTE1LTYuNy0xNS0xNVYxNjIuOGMwLTguMyA2LjgtMTUgMTUtMTVIMjk0YzguMiAwIDE1IDYuNyAxNSAxNXMtNi44IDE1LTE1IDE1SDk2LjJ2NzQ0LjRIOTMwVjE3Ny44SDcxMy42Yy04LjMgMC0xNS02LjctMTUtMTVzNi43LTE1IDE1LTE1SDk0NWM4LjIgMCAxNSA2LjcgMTUgMTV2Nzc0LjRjMCA4LjMtNi44IDE1LTE1IDE1eiIgZmlsbD0iIzk4OTg5OCIvPjxwYXRoIGQ9Ik0zMzMuMyA1NTFIMjE2Yy04LjIgMC0xNS02LjgtMTUtMTVzNi44LTE1IDE1LTE1aDExNy4zYzguMyAwIDE1IDYuNiAxNSAxNXMtNi43IDE1LTE1IDE1em0yMzAuMyAwSDQ0Ni4zYy04LjMgMC0xNS02LjgtMTUtMTVzNi43LTE1IDE1LTE1aDExNy4zYzguMiAwIDE1IDYuNiAxNSAxNXMtNi44IDE1LTE1IDE1em0yMzAuMiAwSDY3Ni42Yy04LjMgMC0xNS02LjgtMTUtMTVzNi43LTE1IDE1LTE1aDExNy4yYzguMyAwIDE1IDYuNiAxNSAxNXMtNi43IDE1LTE1IDE1ek0zMzMuMyA3NDBIMjE2Yy04LjIgMC0xNS02LjgtMTUtMTVzNi44LTE1IDE1LTE1aDExNy4zYzguMyAwIDE1IDYuNiAxNSAxNXMtNi43IDE1LTE1IDE1em0yMzAuMyAwSDQ0Ni4zYy04LjMgMC0xNS02LjgtMTUtMTVzNi43LTE1IDE1LTE1aDExNy4zYzguMiAwIDE1IDYuNiAxNSAxNXMtNi44IDE1LTE1IDE1em0yMzAuMiAwSDY3Ni42Yy04LjMgMC0xNS02LjgtMTUtMTVzNi43LTE1IDE1LTE1aDExNy4yYzguMyAwIDE1IDYuNiAxNSAxNXMtNi43IDE1LTE1IDE1ek0zNzAuOCAyNTguNmMtOC4zIDAtMTUtNi43LTE1LTE1Vjg2LjhjMC04LjIgNi43LTE1IDE1LTE1czE1IDYuOCAxNSAxNXYxNTYuOGMwIDguMy02LjcgMTUtMTUgMTV6bTI3MC4yIDBjLTguMyAwLTE1LTYuNy0xNS0xNVY4Ni44YzAtOC4yIDYuNy0xNSAxNS0xNXMxNSA2LjggMTUgMTV2MTU2LjhjMCA4LjMtNi43IDE1LTE1IDE1ek05NDUgMzcyLjJIODEuMmMtOC4yIDAtMTUtNi43LTE1LTE1czYuOC0xNSAxNS0xNUg5NDVjOC4yIDAgMTUgNi43IDE1IDE1cy02LjggMTUtMTUgMTV6IiBmaWxsPSIjOTg5ODk4Ii8+PC9zdmc+") no-repeat 50% 50%}.datepicker-close,.datepicker:before{position:absolute;width:34px;height:100%;top:0;right:0}.datepicker-close{display:none;cursor:pointer}.datepicker-close:before{display:block;content:"";position:absolute;width:16px;height:16px;left:50%;top:50%;margin-left:-8px;margin-top:-8px;text-align:center;background:#ccc;color:#fff;border-radius:50%;background:#ccc url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==") no-repeat 50% 50%}.datepicker__clearable:hover:before{display:none}.datepicker__clearable:hover .datepicker-close{display:block}.datepicker-close:hover:before{background-color:#afafaf}.datepicker>input{color:#666;transition:all .2s ease;border:1px solid #e5e5e5;height:34px;box-sizing:border-box;outline:none;padding:0 34px 0 12px;font-size:14px;width:100%;user-select:none;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none}.datepicker>input.focus{border-color:#3bb4f2;-webkit-box-shadow:0 0 5px rgba(59,180,242,.3);box-shadow:0 0 5px rgba(59,180,242,.3)}.datepicker>input:disabled{cursor:not-allowed;background-color:#ebebe4;border-color:#e5e5e5;-webkit-box-shadow:none;box-shadow:none}.datepicker-popup{position:absolute;transition:all .2s ease;opacity:1;transform:scaleY(1);transform-origin:center top;font-size:12px;background:#fff;border:1px solid #d9d9d9;box-shadow:0 1px 6px rgba(99,99,99,.2);margin-top:2px;outline:0;padding:5px;overflow:hidden;z-index:999}.datepicker-inline{position:relative;margin-top:0}.datepicker-range{min-width:325px}.datepicker-range .datepicker-popup{width:403px}.datepicker-bottom{float:left;width:100%;text-align:right}.datepicker-btn{padding:5px 10px;background:#1284e7;color:#fff;border-radius:2px;display:inline-block;cursor:pointer}.datepicker-anim-enter-active{transform-origin:0 0;animation:datepicker-anim-in .2s cubic-bezier(.23,1,.32,1)}.datepicker-anim-leave-active{transform-origin:0 0;animation:datepicker-anim-out .2s cubic-bezier(.755,.05,.855,.06)}.datepicker__buttons{display:block;text-align:right}.datepicker__buttons button{display:inline-block;font-size:13px;border:none;cursor:pointer;margin:10px 0 0 5px;padding:5px 15px;color:#fff}.datepicker__buttons .datepicker__button-select{background:#1284e7}.datepicker__buttons .datepicker__button-cancel{background:#666}@keyframes datepicker-anim-in{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}@keyframes datepicker-anim-out{0%{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(.8)}}.calendar{float:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.calendar+.calendar{border-left:1px solid #eaeaea;margin-left:5px;padding-left:5px}.calendar-head{line-height:34px;height:34px;text-align:center;position:relative}.calendar-head a{color:#666;font-weight:700;cursor:pointer;display:inline-block;text-align:center;position:absolute;padding:0 5px;font-size:16px}.calendar-head a:hover{color:#1284e7}.calendar-head .calendar-month-select,.calendar-head .calendar-year-select{font-size:12px;padding:0 2px;position:relative}.calendar-prev-decade-btn,.calendar-prev-year-btn{left:6px}.calendar-prev-month-btn{left:24px}.calendar-next-decade-btn,.calendar-next-year-btn{right:6px}.calendar-next-month-btn{right:24px}.calendar-body{position:relative;width:196px;height:196px}.calendar-days{width:100%;height:100%}.calendar-date,.calendar-week{font-weight:400;width:14.28%;height:14.28%;text-align:center;box-sizing:border-box;overflow:hidden;float:left}.calendar-date:before,.calendar-week:before{content:"";display:inline-block;height:100%;vertical-align:middle}.calendar-date{cursor:pointer}.calendar-date-out{color:#ccc}.calendar-date-on,.calendar-date:hover{background:#eaf8fe}.calendar-date-selected,.calendar-date-selected:hover{color:#fff;font-weight:700;background:#1284e7}.calendar-date-disabled{cursor:not-allowed!important;color:#bcbcbc!important;background:#f3f3f3!important}.calendar-foot{margin-top:5px}.calendar-hour{display:inline-block;border:1px solid #e6e5e5;color:#9e9e9e}.calendar-hour a{display:inline-block;padding:2px 4px;cursor:pointer}.calendar-hour a.on,.calendar-hour a:hover{color:#1284e7}.calendar-hours,.calendar-minutes,.calendar-months,.calendar-seconds,.calendar-years{width:100%;height:100%;position:absolute;background:#fff;left:0;top:0}.calendar-months a,.calendar-years a{width:33.33%;height:25%}.calendar-hours a{width:20%;height:20%}.calendar-minutes a,.calendar-seconds a{width:16.66%;height:10%}.calendar-title{margin-top:-30px;height:30px;line-height:30px;background:#fff;text-align:center;font-weight:700} -------------------------------------------------------------------------------- /dist/vue-datepicker-local.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue-datetime-local.js v1.0.19 3 | * (c) 2017-2018 weifeiyue 4 | * Released under the MIT License. 5 | */ 6 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-datepicker-local"]=t():e["vue-datepicker-local"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(n){if(s[n])return s[n].exports;var o=s[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var s={};return t.m=e,t.c=s,t.d=function(e,s,n){t.o(e,s)||Object.defineProperty(e,s,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var s=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(s,"a",s),s},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,s){"use strict";function n(e,t,s,n,o,a,r,i){e=e||{};var c=typeof e.default;"object"!==c&&"function"!==c||(e=e.default);var u="function"==typeof e?e.options:e;t&&(u.render=t,u.staticRenderFns=s,u._compiled=!0),n&&(u.functional=!0),a&&(u._scopeId=a);var l;if(r?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(r)},u._ssrRegister=l):o&&(l=i?function(){o.call(this,this.$root.$options.shadowRoot)}:o),l)if(u.functional){u._injectStyles=l;var h=u.render;u.render=function(e,t){return l.call(t),h(e,t)}}else{var d=u.beforeCreate;u.beforeCreate=d?[].concat(d,l):[l]}return{exports:e,options:u}}function o(e){s(2)}function a(e){s(1)}function r(e){e.component(_.name,_)}Object.defineProperty(t,"__esModule",{value:!0});var i={name:"VueDatepickerLocalCalendar",props:{value:null,left:!1,right:!1},data:function(){var e=this.get(this.value);return{pre:"calendar",m:"D",showYears:!1,showMonths:!1,showHours:!1,showMinutes:!1,showSeconds:!1,year:e.year,month:e.month,day:e.day,hour:e.hour,minute:e.minute,second:e.second}},watch:{value:function(e){var t=this,s=t.get(e);t.year=s.year,t.month=s.month,t.day=s.day,t.hour=s.hour,t.minute=s.minute,t.second=s.second}},computed:{local:function(){return this.$parent.local},format:function(){return this.$parent.format},start:function(){return this.parse(this.$parent.dates[0])},end:function(){return this.parse(this.$parent.dates[1])},ys:function(){return 10*parseInt(this.year/10)},ye:function(){return this.ys+10},years:function(){for(var e=[],t=this.ys-1;e.length<12;)e.push(t++);return e},days:function(){var e=[],t=this,s=t.year,n=t.month,o=new Date(s,n,1),a=t.local.dow||7;o.setDate(0);for(var r=o.getDate(),i=o.getDay()||7,c=a<=i?i-a+1:i+(7-a+1);c>0;)e.push({i:r-c+1,y:n>0?s:s-1,m:n>0?n-1:11,p:!0}),c--;o.setMonth(o.getMonth()+2,0),r=o.getDate();var u=1;for(u=1;u<=r;u++)e.push({i:u,y:s,m:n});for(u=1;e.length<42;u++)e.push({i:u,y:n<11?s:s+1,m:n<11?n+1:0,n:!0});return e}},filters:{dd:function(e){return("0"+e).slice(-2)}},methods:{get:function(e){return{year:e.getFullYear(),month:e.getMonth(),day:e.getDate(),hour:e.getHours(),minute:e.getMinutes(),second:e.getSeconds()}},parse:function(e){return parseInt(e/1e3)},status:function(e,t,s,n,o,a,r){var i=this,c=new Date(e,t+1,0).getDate(),u=new Date(e,t,s>c?c:s,n,o,a),l=i.parse(u),h=i.$parent.tf,d={},p=!1;return p="YYYY"===r?e===i.year:"YYYYMM"===r?t===i.month:h(i.value,r)===h(u,r),d[i.pre+"-date"]=!0,d[i.pre+"-date-disabled"]=i.right&&li.start||i.right&&l0?this.month--:(this.month=11,this.year--)},is:function(e){return-1===e.target.className.indexOf(this.pre+"-date-disabled")},ok:function(e){var t=this,s="",n="",o="";if(e&&e.n&&t.nm(),e&&e.p&&t.pm(),"h"===e){var a=t.get(this.value);s=a.year,n=a.month}else"m"!==e&&"y"!==e||(o=1);var r=new Date(s||t.year,n||t.month,o||t.day,t.hour,t.minute,t.second);t.left&&parseInt(r.getTime()/1e3)>t.end&&(this.$parent.dates[1]=r),t.$emit("input",r),t.$parent.ok("h"===e)}},mounted:function(){var e=this,t=function(t){return-1!==e.format.indexOf(t)};t("s")&&t("m")&&(t("h")||t("H"))?e.m="H":t("D")?e.m="D":t("M")?(e.m="M",e.showMonths=!0):t("Y")&&(e.m="Y",e.showYears=!0)}},c=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{class:""+e.pre},[s("div",{class:e.pre+"-head"},[s("a",{directives:[{name:"show",rawName:"v-show",value:e.showYears,expression:"showYears"}],class:e.pre+"-prev-decade-btn",on:{click:function(t){e.year-=10}}},[e._v("«")]),s("a",{directives:[{name:"show",rawName:"v-show",value:!e.showYears,expression:"!showYears"}],class:e.pre+"-prev-year-btn",on:{click:function(t){e.year--}}},[e._v("«")]),s("a",{directives:[{name:"show",rawName:"v-show",value:!e.showYears&&!e.showMonths,expression:"!showYears&&!showMonths"}],class:e.pre+"-prev-month-btn",on:{click:e.pm}},[e._v("‹")]),s("a",{directives:[{name:"show",rawName:"v-show",value:e.showYears,expression:"showYears"}],class:e.pre+"-year-select"},[e._v(e._s(e.ys+"-"+e.ye))]),e.local.yearSuffix?[s("a",{directives:[{name:"show",rawName:"v-show",value:!e.showYears,expression:"!showYears"}],class:e.pre+"-year-select",on:{click:function(t){e.showYears=!e.showYears}}},[e._v(e._s(e.year)+e._s(e.local.yearSuffix))]),s("a",{directives:[{name:"show",rawName:"v-show",value:!e.showYears&&!e.showMonths,expression:"!showYears&&!showMonths"}],class:e.pre+"-month-select",on:{click:function(t){e.showMonths=!e.showMonths}}},[e._v(e._s(e.local.monthsHead[e.month]))])]:[s("a",{directives:[{name:"show",rawName:"v-show",value:!e.showYears&&!e.showMonths,expression:"!showYears&&!showMonths"}],class:e.pre+"-month-select",on:{click:function(t){e.showMonths=!e.showMonths}}},[e._v(e._s(e.local.monthsHead[e.month]))]),s("a",{directives:[{name:"show",rawName:"v-show",value:!e.showYears,expression:"!showYears"}],class:e.pre+"-year-select",on:{click:function(t){e.showYears=!e.showYears}}},[e._v(e._s(e.year))])],s("a",{directives:[{name:"show",rawName:"v-show",value:!e.showYears&&!e.showMonths,expression:"!showYears&&!showMonths"}],class:e.pre+"-next-month-btn",on:{click:e.nm}},[e._v("›")]),s("a",{directives:[{name:"show",rawName:"v-show",value:!e.showYears,expression:"!showYears"}],class:e.pre+"-next-year-btn",on:{click:function(t){e.year++}}},[e._v("»")]),s("a",{directives:[{name:"show",rawName:"v-show",value:e.showYears,expression:"showYears"}],class:e.pre+"-next-decade-btn",on:{click:function(t){e.year+=10}}},[e._v("»")])],2),s("div",{class:e.pre+"-body"},[s("div",{class:e.pre+"-days"},[e._l(e.local.weeks,function(t){return s("a",{key:t,class:e.pre+"-week"},[e._v(e._s(t))])}),e._l(e.days,function(t,n){return s("a",{key:n,class:[t.p||t.n?e.pre+"-date-out":"",e.status(t.y,t.m,t.i,e.hour,e.minute,e.second,"YYYYMMDD")],on:{click:function(s){e.is(s)&&(e.day=t.i,e.ok(t))}}},[e._v(e._s(t.i))])})],2),s("div",{directives:[{name:"show",rawName:"v-show",value:e.showMonths,expression:"showMonths"}],class:e.pre+"-months"},e._l(e.local.months,function(t,n){return s("a",{key:n,class:[e.status(e.year,n,e.day,e.hour,e.minute,e.second,"YYYYMM")],on:{click:function(t){e.is(t)&&(e.showMonths="M"===e.m,e.month=n,"M"===e.m&&e.ok("m"))}}},[e._v(e._s(t))])})),s("div",{directives:[{name:"show",rawName:"v-show",value:e.showYears,expression:"showYears"}],class:e.pre+"-years"},e._l(e.years,function(t,n){return s("a",{key:n,class:[0===n||11===n?e.pre+"-date-out":"",e.status(t,e.month,e.day,e.hour,e.minute,e.second,"YYYY")],on:{click:function(s){e.is(s)&&(e.showYears="Y"===e.m,e.year=t,"Y"===e.m&&e.ok("y"))}}},[e._v(e._s(t))])})),s("div",{directives:[{name:"show",rawName:"v-show",value:e.showHours,expression:"showHours"}],class:e.pre+"-hours"},[s("div",{class:e.pre+"-title"},[e._v(e._s(e.local.hourTip))]),e._l(24,function(t,n){return s("a",{key:n,class:[e.status(e.year,e.month,e.day,n,e.minute,e.second,"YYYYMMDDHH")],on:{click:function(t){e.is(t)&&(e.showHours=!1,e.hour=n,e.ok("h"))}}},[e._v(e._s(n))])})],2),s("div",{directives:[{name:"show",rawName:"v-show",value:e.showMinutes,expression:"showMinutes"}],class:e.pre+"-minutes"},[s("div",{class:e.pre+"-title"},[e._v(e._s(e.local.minuteTip))]),e._l(60,function(t,n){return s("a",{key:n,class:[e.status(e.year,e.month,e.day,e.hour,n,e.second,"YYYYMMDDHHmm")],on:{click:function(t){e.is(t)&&(e.showMinutes=!1,e.minute=n,e.ok("h"))}}},[e._v(e._s(n))])})],2),s("div",{directives:[{name:"show",rawName:"v-show",value:e.showSeconds,expression:"showSeconds"}],class:e.pre+"-seconds"},[s("div",{class:e.pre+"-title"},[e._v(e._s(e.local.secondTip))]),e._l(60,function(t,n){return s("a",{key:n,class:[e.status(e.year,e.month,e.day,e.hour,e.minute,n,"YYYYMMDDHHmmss")],on:{click:function(t){e.is(t)&&(e.showSeconds=!1,e.second=n,e.ok("h"))}}},[e._v(e._s(n))])})],2)]),"H"===e.m?s("div",{class:e.pre+"-foot"},[s("div",{class:e.pre+"-hour"},[s("a",{class:{on:e.showHours},attrs:{title:e.local.hourTip},on:{click:function(t){e.showHours=!e.showHours,e.showMinutes=e.showSeconds=!1}}},[e._v(e._s(e._f("dd")(e.hour)))]),s("span",[e._v(":")]),s("a",{class:{on:e.showMinutes},attrs:{title:e.local.minuteTip},on:{click:function(t){e.showMinutes=!e.showMinutes,e.showHours=e.showSeconds=!1}}},[e._v(e._s(e._f("dd")(e.minute)))]),s("span",[e._v(":")]),s("a",{class:{on:e.showSeconds},attrs:{title:e.local.secondTip},on:{click:function(t){e.showSeconds=!e.showSeconds,e.showHours=e.showMinutes=!1}}},[e._v(e._s(e._f("dd")(e.second)))])])]):e._e()])},u=[],l=o,h=n(i,c,u,!1,l,null,null),d=h.exports,p={name:"VueDatepickerLocal",components:{VueDatepickerLocalCalendar:d},props:{name:[String],inputClass:[String],popupClass:[String],value:[Date,Array,String],disabled:[Boolean],type:{type:String,default:"normal"},rangeSeparator:{type:String,default:"~"},clearable:{type:Boolean,default:!1},placeholder:[String],disabledDate:{type:Function,default:function(){return!1}},format:{type:String,default:"YYYY-MM-DD"},local:{type:Object,default:function(){return{dow:1,hourTip:"选择小时",minuteTip:"选择分钟",secondTip:"选择秒数",yearSuffix:"年",monthsHead:"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),months:"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),weeks:"一_二_三_四_五_六_日".split("_"),cancelTip:"取消",submitTip:"确定"}}},showButtons:{type:Boolean,default:!1},dateRangeSelect:[Function]},data:function(){return{show:!1,dates:this.vi(this.value)}},computed:{range:function(){return 2===this.dates.length},text:function(){var e=this,t=this.value,s=this.dates.map(function(t){return e.tf(t)}).join(" "+this.rangeSeparator+" ");return Array.isArray(t)?t.length>1?s:"":t?s:""}},watch:{value:function(e){this.dates=this.vi(this.value)}},methods:{get:function(){return Array.isArray(this.value)?this.dates:this.dates[0]},cls:function(){this.$emit("clear"),this.$emit("input",this.range?[]:"")},vi:function(e){return Array.isArray(e)?e.length>1?e.map(function(e){return new Date(e)}):[new Date,new Date]:e?new Array(new Date(e)):[new Date]},ok:function(e){var t=this;t.$emit("input",t.get()),!e&&!t.showButtons&&setTimeout(function(){t.show=t.range})},tf:function(e,t){var s=e.getFullYear(),n=e.getMonth(),o=e.getDate(),a=e.getHours(),r=a%12==0?12:a%12,i=e.getMinutes(),c=e.getSeconds(),u=e.getMilliseconds(),l=function(e){return("0"+e).slice(-2)},h={YYYY:s,MM:l(n+1),MMM:this.local.months[n],MMMM:this.local.monthsHead[n],M:n+1,DD:l(o),D:o,HH:l(a),H:a,hh:l(r),h:r,mm:l(i),m:i,ss:l(c),s:c,S:u};return(t||this.format).replace(/Y+|M+|D+|H+|h+|m+|s+|S+/g,function(e){return h[e]})},dc:function(e){this.show=this.$el.contains(e.target)&&!this.disabled},submit:function(){this.$emit("confirm",this.get()),this.show=!1},cancel:function(){this.$emit("cancel"),this.show=!1}},mounted:function(){document.addEventListener("click",this.dc,!0)},beforeDestroy:function(){document.removeEventListener("click",this.dc,!0)}},f=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"datepicker",class:{"datepicker-range":e.range,datepicker__clearable:e.clearable&&e.text&&!e.disabled}},["inline"!==e.type?s("input",{class:[e.show?"focus":"",e.inputClass],attrs:{readonly:"",disabled:e.disabled,placeholder:e.placeholder,name:e.name},domProps:{value:e.text}}):e._e(),s("a",{staticClass:"datepicker-close",on:{click:function(t){return t.stopPropagation(),e.cls(t)}}}),s("transition",{attrs:{name:"datepicker-anim"}},[e.show||"inline"===e.type?s("div",{staticClass:"datepicker-popup",class:[e.popupClass,{"datepicker-inline":"inline"===e.type}],attrs:{tabindex:"-1"}},[e.range?[s("vue-datepicker-local-calendar",{attrs:{left:!0},model:{value:e.dates[0],callback:function(t){e.$set(e.dates,0,t)},expression:"dates[0]"}}),s("vue-datepicker-local-calendar",{attrs:{right:!0},model:{value:e.dates[1],callback:function(t){e.$set(e.dates,1,t)},expression:"dates[1]"}})]:[s("vue-datepicker-local-calendar",{model:{value:e.dates[0],callback:function(t){e.$set(e.dates,0,t)},expression:"dates[0]"}})],e.showButtons?s("div",{staticClass:"datepicker__buttons"},[s("button",{staticClass:"datepicker__button-cancel",on:{click:function(t){return t.preventDefault(),t.stopPropagation(),e.cancel(t)}}},[e._v(e._s(this.local.cancelTip))]),s("button",{staticClass:"datepicker__button-select",on:{click:function(t){return t.preventDefault(),t.stopPropagation(),e.submit(t)}}},[e._v(e._s(this.local.submitTip))])]):e._e()],2):e._e()])],1)},m=[],w=a,v=n(p,f,m,!1,w,null,null),_=v.exports;_.install=r,"undefined"!=typeof window&&window.Vue&&r(window.Vue);t.default=_},function(e,t){},function(e,t){}])}); -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 63 | -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import DatePicker from '../src' 4 | Vue.use(DatePicker) 5 | new Vue({ 6 | render: h => h(App) 7 | }).$mount('#app') 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | mui 11 | 12 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-datepicker-local", 3 | "version": "1.0.19", 4 | "description": "A datepicker for Vue.js", 5 | "main": "src/index.js", 6 | "files": [ 7 | "dist/**", 8 | "src/**", 9 | "LICENSE", 10 | "README.md" 11 | ], 12 | "browserify": { 13 | "transform": [ 14 | [ 15 | "babelify" 16 | ], 17 | [ 18 | "vueify" 19 | ] 20 | ] 21 | }, 22 | "scripts": { 23 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 24 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/weifeiyue/vue-datepicker-local.git" 29 | }, 30 | "keywords": [ 31 | "vue", 32 | "datepicker", 33 | "components" 34 | ], 35 | "author": "weifeiyue ", 36 | "license": "MIT", 37 | "bugs": { 38 | "url": "https://github.com/weifeiyue/vue-datepicker-local/issues" 39 | }, 40 | "homepage": "https://github.com/weifeiyue/vue-datepicker-local#readme", 41 | "dependencies": { 42 | "vue": "^2.5.15" 43 | }, 44 | "devDependencies": { 45 | "babel-core": "^6.26.0", 46 | "babel-loader": "^7.1.4", 47 | "babel-preset-env": "^1.6.1", 48 | "cross-env": "^5.1.4", 49 | "css-loader": "^0.28.10", 50 | "eslint": "^4.18.2", 51 | "eslint-config-standard": "^11.0.0", 52 | "eslint-plugin-html": "^4.0.2", 53 | "eslint-plugin-import": "^2.9.0", 54 | "eslint-plugin-node": "^6.0.1", 55 | "eslint-plugin-promise": "^3.7.0", 56 | "eslint-plugin-standard": "^3.0.1", 57 | "extract-text-webpack-plugin": "^3.0.2", 58 | "file-loader": "^1.1.11", 59 | "vue-loader": "^14.2.1", 60 | "vue-template-compiler": "^2.5.15", 61 | "webpack": "^3.11.0", 62 | "webpack-dev-server": "2.11.2" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/VueDatepickerLocal.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 177 | 178 | 362 | -------------------------------------------------------------------------------- /src/VueDatepickerLocalCalendar.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 258 | 259 | 439 |  440 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import component from './VueDatepickerLocal.vue' 2 | function install (Vue) { 3 | Vue.component(component.name, component) 4 | } 5 | component.install = install 6 | if (typeof window !== 'undefined' && window.Vue) { 7 | install(window.Vue) 8 | } 9 | export default component 10 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | const banner = 5 | 'vue-datetime-local.js v1.0.19\n' + 6 | '(c) 2017-' + new Date().getFullYear() + ' weifeiyue\n' + 7 | 'Released under the MIT License.' 8 | module.exports = { 9 | entry: { 10 | app: './example/app.js' 11 | }, 12 | output: { 13 | filename: '[name].js' 14 | }, 15 | module: { 16 | rules: [{ 17 | test: /\.vue$/, 18 | loader: 'vue-loader', 19 | options: { 20 | extractCSS: true, 21 | esModule: false, 22 | preserveWhitespace: false 23 | } 24 | }, { 25 | test: /\.js$/, 26 | loader: 'babel-loader', 27 | exclude: /node_modules/ 28 | }, { 29 | test: /\.(png|jpg|gif|svg)$/, 30 | loader: 'file-loader', 31 | options: { 32 | name: '[name].[ext]?[hash]' 33 | } 34 | }] 35 | }, 36 | devServer: { 37 | historyApiFallback: true, 38 | noInfo: true 39 | }, 40 | performance: { 41 | hints: false 42 | }, 43 | plugins: [ 44 | new webpack.optimize.ModuleConcatenationPlugin(), 45 | new ExtractTextPlugin('[name].css') 46 | ], 47 | devtool: '#cheap-module-eval-source-map' 48 | } 49 | 50 | if (process.env.NODE_ENV === 'production') { 51 | module.exports.devtool = false 52 | module.exports.entry = { 53 | 'vue-datepicker-local': './src/index.js' 54 | } 55 | module.exports.output = { 56 | path: path.resolve(__dirname, './dist'), 57 | filename: '[name].js', 58 | libraryTarget: 'umd', 59 | library: '[name]' 60 | } 61 | module.exports.plugins = (module.exports.plugins || []).concat([ 62 | new webpack.BannerPlugin(banner), 63 | new webpack.DefinePlugin({ 64 | 'process.env': { 65 | NODE_ENV: '"production"' 66 | } 67 | }), 68 | new webpack.optimize.UglifyJsPlugin({ 69 | sourceMap: true, 70 | compress: { 71 | warnings: false 72 | } 73 | }), 74 | new webpack.LoaderOptionsPlugin({ 75 | minimize: true 76 | }) 77 | ]) 78 | } 79 | --------------------------------------------------------------------------------