date-picker

├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets ├── css │ └── reset.min.css ├── img │ ├── left.png │ └── right.png └── js │ └── utils.js ├── components ├── canlendar-head.vue └── date-picker.vue └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # date-picker 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "date-picker", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "less": "^3.9.0", 13 | "less-loader": "^5.0.0", 14 | "vue": "^2.6.10" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^3.7.0", 18 | "@vue/cli-plugin-eslint": "^3.7.0", 19 | "@vue/cli-service": "^3.7.0", 20 | "babel-eslint": "^10.0.1", 21 | "eslint": "^5.16.0", 22 | "eslint-plugin-vue": "^5.0.0", 23 | "vue-template-compiler": "^2.5.21" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "rules": {}, 35 | "parserOptions": { 36 | "parser": "babel-eslint" 37 | } 38 | }, 39 | "postcss": { 40 | "plugins": { 41 | "autoprefixer": {} 42 | } 43 | }, 44 | "browserslist": [ 45 | "> 1%", 46 | "last 2 versions" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiangnideye/vue-date-picker/7cdd3ed725df249876501ee38b5d819fa54b0875/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | date-picker 9 | 10 | 11 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 48 | 49 | 52 | -------------------------------------------------------------------------------- /src/assets/css/reset.min.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, button, input, textarea, th, td, span { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | html,body{ 8 | height: 100%; 9 | } 10 | body { 11 | font-size: 12px; 12 | font-style: normal; 13 | font-family: 微软雅黑, Helvetica, sans-serif; 14 | } 15 | 16 | small { 17 | font-size: 12px 18 | } 19 | 20 | h1 { 21 | font-size: 18px 22 | } 23 | 24 | h2 { 25 | font-size: 16px 26 | } 27 | 28 | h3 { 29 | font-size: 14px 30 | } 31 | 32 | h4, h5, h6 { 33 | font-size: 100% 34 | } 35 | 36 | ul, ol { 37 | list-style: none 38 | } 39 | 40 | a { 41 | text-decoration: none; 42 | background-color: transparent 43 | } 44 | 45 | a:hover, a:active { 46 | outline-width: 0; 47 | text-decoration: none 48 | } 49 | 50 | table { 51 | border-collapse: collapse; 52 | border-spacing: 0 53 | } 54 | 55 | hr { 56 | border: 0; 57 | height: 1px 58 | } 59 | 60 | img { 61 | border-style: none 62 | } 63 | 64 | img:not([src]) { 65 | display: none 66 | } 67 | 68 | svg:not(:root) { 69 | overflow: hidden 70 | } 71 | 72 | html { 73 | -webkit-touch-callout: none; 74 | -webkit-text-size-adjust: 100% 75 | } 76 | 77 | input, textarea, button, a { 78 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 79 | } 80 | 81 | article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { 82 | display: block 83 | } 84 | 85 | audio, canvas, progress, video { 86 | display: inline-block 87 | } 88 | 89 | /*audio:not([controls]), video:not([controls]) { 90 | display: none; 91 | height: 0 92 | }*/ 93 | 94 | progress { 95 | vertical-align: baseline 96 | } 97 | 98 | mark { 99 | background-color: #ff0; 100 | color: #000 101 | } 102 | 103 | sub, sup { 104 | position: relative; 105 | font-size: 75%; 106 | line-height: 0; 107 | vertical-align: baseline 108 | } 109 | 110 | sub { 111 | bottom: -0.25em 112 | } 113 | 114 | sup { 115 | top: -0.5em 116 | } 117 | 118 | input, select, textarea { 119 | font-size: 100%; 120 | outline: 0; 121 | } 122 | 123 | button, input { 124 | overflow: visible 125 | } 126 | 127 | button, select { 128 | text-transform: none 129 | } 130 | 131 | textarea { 132 | overflow: auto 133 | } 134 | 135 | button, html [type="button"], [type="reset"], [type="submit"] { 136 | -webkit-appearance: button 137 | } 138 | 139 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 140 | border-style: none; 141 | padding: 0 142 | } 143 | 144 | button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { 145 | outline: 1px dotted ButtonText 146 | } 147 | 148 | [type="checkbox"], [type="radio"] { 149 | box-sizing: border-box; 150 | padding: 0 151 | } 152 | 153 | [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { 154 | height: auto 155 | } 156 | 157 | [type="search"] { 158 | -webkit-appearance: textfield; 159 | outline-offset: -2px 160 | } 161 | 162 | [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { 163 | -webkit-appearance: none 164 | } 165 | 166 | ::-webkit-input-placeholder { 167 | color: inherit; 168 | opacity: .54 169 | } 170 | 171 | ::-webkit-file-upload-button { 172 | -webkit-appearance: button; 173 | font: inherit 174 | } 175 | 176 | .clear:after { 177 | display: block; 178 | height: 0; 179 | content: ""; 180 | clear: both 181 | } 182 | @media (min-width: 1200px) { 183 | body{ 184 | min-width: 1200px; 185 | } 186 | } 187 | @media (max-width: 991px){ 188 | body, html{ 189 | overflow-x: initial!important; 190 | } 191 | } 192 | button { 193 | outline:none 194 | } 195 | -------------------------------------------------------------------------------- /src/assets/img/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiangnideye/vue-date-picker/7cdd3ed725df249876501ee38b5d819fa54b0875/src/assets/img/left.png -------------------------------------------------------------------------------- /src/assets/img/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiangnideye/vue-date-picker/7cdd3ed725df249876501ee38b5d819fa54b0875/src/assets/img/right.png -------------------------------------------------------------------------------- /src/assets/js/utils.js: -------------------------------------------------------------------------------- 1 | const englishMonthList = [ 2 | 'Jan', 3 | 'Feb', 4 | 'Mar', 5 | 'Apr', 6 | 'May', 7 | 'Jun', 8 | 'Jul', 9 | 'Aug', 10 | 'Sept', 11 | 'Oct', 12 | 'Nov', 13 | 'Dec' 14 | ]; 15 | 16 | const getNewDate = (date) => { 17 | let year = date.getFullYear(); 18 | let month = date.getMonth(); 19 | let day = date.getDate(); 20 | return {year, month, day}; 21 | } 22 | 23 | const getDate = (year, month, day) => { 24 | return new Date(year, month, day); 25 | } 26 | 27 | const englishMonth = (month) => { 28 | let engMonth; 29 | 30 | englishMonthList.map(() => { 31 | engMonth = englishMonthList[month] 32 | }); 33 | 34 | return engMonth 35 | } 36 | 37 | const formatDate = (date) => { 38 | date = Number(date); 39 | return date < 10? `0${date}`:date; 40 | } 41 | export { 42 | getNewDate, 43 | getDate, 44 | englishMonth, 45 | formatDate 46 | } -------------------------------------------------------------------------------- /src/components/canlendar-head.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 53 | 54 | -------------------------------------------------------------------------------- /src/components/date-picker.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 160 | 161 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | --------------------------------------------------------------------------------