Vue Date Picker

├── .gitignore ├── examples ├── app.js ├── static │ └── logo.png ├── index.html └── app.vue ├── README.md ├── src ├── styles │ ├── _variables.scss │ └── _normalize.scss ├── components │ ├── footer.vue │ ├── pickYear.vue │ ├── pickMonth.vue │ ├── header.vue │ └── pickDate.vue └── datePicker.vue ├── webpack.config.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log -------------------------------------------------------------------------------- /examples/app.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import App from './app.vue' 4 | 5 | new Vue(App) 6 | -------------------------------------------------------------------------------- /examples/static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-date-picker/HEAD/examples/static/logo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##Vue Material Date Picker 2 | 3 | #### online demo [DEMO](http://www.aruoyi.cn) 4 | 5 | 6 | ### How to use 7 | 8 | ``` 9 | npm install 10 | npm run dev / npm run build 11 | ``` 12 | 13 | 14 | ####备注： 15 | ``` 16 | 此日历组件只是基于vue && Material Design开发的一套组件中的一个，所以一些设计的地方，其实是要配合其他组件使用的。 17 | 比如 Dialog Panel，所以很多地方需要完善。 18 | 19 | 希望大家可以给我多多建议。 20 | ``` 21 | -------------------------------------------------------------------------------- /src/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | // Material Design 2 | 3 | $defaultColorPrimary : rgba(0, 0, 0, 0.87); 4 | $defaultColorSecondary : rgba(0, 0, 0, 0.54); 5 | $defaultColorDisabled : rgba(0, 0, 0, 0.38); 6 | 7 | 8 | $headerBaseColor : rgba(255, 255, 255, 0.54); 9 | $activeColor : rgba(0, 150, 136, 1); 10 | 11 | $shadows : 0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22) 12 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Date Picker 6 | 7 | 8 | 9 | 10 |

{{ header }}
{{ day.day }}

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/app.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 31 | 32 | 37 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | 3 | module.exports = { 4 | entry: './examples/app.js', 5 | output: { 6 | path: './examples/static', 7 | publicPath: '/examples/static/', 8 | filename: 'build.js' 9 | }, 10 | module: { 11 | loaders: [ 12 | { 13 | test: /\.vue$/, 14 | loader: 'vue' 15 | }, 16 | { 17 | test: /\.js$/, 18 | // excluding some local linked packages. 19 | // for normal use cases only node_modules is needed. 20 | exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//, 21 | loader: 'babel' 22 | }, 23 | { 24 | test : /\.(png|jpg|gif)$/, 25 | loader : 'url-loader?limit=8192' 26 | }, 27 | { 28 | test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 29 | loader : 'file-loader?name=/[name]_[hash:6].[ext]' 30 | } 31 | ] 32 | }, 33 | vue: { 34 | autoprefixer: { 35 | browsers: ['last 2 versions'] 36 | }, 37 | loaders: { 38 | scss: 'style!css!sass' 39 | } 40 | }, 41 | babel: { 42 | presets: ['es2015'], 43 | plugins: ['transform-runtime'] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/components/footer.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | 23 | 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-datePicker", 3 | "version": "1.0.0", 4 | "description": "vue datePicker", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot --quiet", 8 | "build": "webpack --progress --hide-modules" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "" 13 | }, 14 | "author": "taoche", 15 | "license": "MIT", 16 | "homepage": "", 17 | "devDependencies": { 18 | "autoprefixer-core": "^5.2.1", 19 | "autoprefixer-loader": "^3.1.0", 20 | "babel-core": "^6.1.21", 21 | "babel-loader": "^6.1.0", 22 | "babel-plugin-transform-runtime": "^6.1.18", 23 | "babel-preset-es2015": "^6.1.18", 24 | "babel-runtime": "^6.1.18", 25 | "css-loader": "^0.21.0", 26 | "exports-loader": "^0.6.2", 27 | "extract-text-webpack-plugin": "^0.9.1", 28 | "html-webpack-plugin": "^1.6.2", 29 | "imports-loader": "^0.6.5", 30 | "node-sass": "^3.4.1", 31 | "sass-loader": "^3.0.0", 32 | "style-loader": "^0.13.0", 33 | "vue-hot-reload-api": "^1.2.0", 34 | "vue-html-loader": "^1.0.0", 35 | "vue-loader": "^7.2.0", 36 | "webpack": "^1.12.2", 37 | "webpack-dev-server": "^1.12.0" 38 | }, 39 | "dependencies": { 40 | "vue": "^1.0.8" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/pickYear.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 47 | 48 | 81 | -------------------------------------------------------------------------------- /src/components/pickMonth.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 56 | 57 | 90 | -------------------------------------------------------------------------------- /src/components/header.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 73 | 74 | 136 | -------------------------------------------------------------------------------- /src/datePicker.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 167 | 168 | 210 | -------------------------------------------------------------------------------- /src/components/pickDate.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 117 | 118 | 238 | -------------------------------------------------------------------------------- /src/styles/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | // 4 | // 1. Set default font family to sans-serif. 5 | // 2. Prevent iOS and IE text size adjust after device orientation change, 6 | // without disabling user zoom. 7 | // 8 | 9 | html { 10 | font-family: sans-serif; // 1 11 | -ms-text-size-adjust: 100%; // 2 12 | -webkit-text-size-adjust: 100%; // 2 13 | } 14 | 15 | // 16 | // Remove default margin. 17 | // 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | // HTML5 display definitions 24 | // ========================================================================== 25 | 26 | // 27 | // Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | // Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | // and Firefox. 30 | // Correct `block` display not defined for `main` in IE 11. 31 | // 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | // 50 | // 1. Correct `inline-block` display not defined in IE 8/9. 51 | // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | // 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; // 1 59 | vertical-align: baseline; // 2 60 | } 61 | 62 | // 63 | // Prevent modern browsers from displaying `audio` without controls. 64 | // Remove excess height in iOS 5 devices. 65 | // 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | // 73 | // Address `[hidden]` styling not present in IE 8/9/10. 74 | // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | // 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | // Links 83 | // ========================================================================== 84 | 85 | // 86 | // Remove the gray background color from active links in IE 10. 87 | // 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | // 94 | // Improve readability of focused elements when they are also in an 95 | // active/hover state. 96 | // 97 | 98 | a { 99 | &:active { 100 | outline: 0; 101 | } 102 | &:hover { 103 | outline: 0; 104 | } 105 | } 106 | 107 | // Text-level semantics 108 | // ========================================================================== 109 | 110 | // 111 | // Address styling not present in IE 8/9/10/11, Safari, and Chrome. 112 | // 113 | 114 | abbr[title] { 115 | border-bottom: 1px dotted; 116 | } 117 | 118 | // 119 | // Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 120 | // 121 | 122 | b, 123 | strong { 124 | font-weight: bold; 125 | } 126 | 127 | // 128 | // Address styling not present in Safari and Chrome. 129 | // 130 | 131 | dfn { 132 | font-style: italic; 133 | } 134 | 135 | // 136 | // Address variable `h1` font-size and margin within `section` and `article` 137 | // contexts in Firefox 4+, Safari, and Chrome. 138 | // 139 | 140 | h1 { 141 | font-size: 2em; 142 | margin: 0.67em 0; 143 | } 144 | 145 | // 146 | // Address styling not present in IE 8/9. 147 | // 148 | 149 | mark { 150 | background: #ff0; 151 | color: #000; 152 | } 153 | 154 | // 155 | // Address inconsistent and variable font size in all browsers. 156 | // 157 | 158 | small { 159 | font-size: 80%; 160 | } 161 | 162 | // 163 | // Prevent `sub` and `sup` affecting `line-height` in all browsers. 164 | // 165 | 166 | sub, 167 | sup { 168 | font-size: 75%; 169 | line-height: 0; 170 | position: relative; 171 | vertical-align: baseline; 172 | } 173 | 174 | sup { 175 | top: -0.5em; 176 | } 177 | 178 | sub { 179 | bottom: -0.25em; 180 | } 181 | 182 | // Embedded content 183 | // ========================================================================== 184 | 185 | // 186 | // Remove border when inside `a` element in IE 8/9/10. 187 | // 188 | 189 | img { 190 | border: 0; 191 | } 192 | 193 | // 194 | // Correct overflow not hidden in IE 9/10/11. 195 | // 196 | 197 | svg:not(:root) { 198 | overflow: hidden; 199 | } 200 | 201 | // Grouping content 202 | // ========================================================================== 203 | 204 | // 205 | // Address margin not present in IE 8/9 and Safari. 206 | // 207 | 208 | figure { 209 | margin: 1em 40px; 210 | } 211 | 212 | // 213 | // Address differences between Firefox and other browsers. 214 | // 215 | 216 | hr { 217 | box-sizing: content-box; 218 | height: 0; 219 | } 220 | 221 | // 222 | // Contain overflow in all browsers. 223 | // 224 | 225 | pre { 226 | overflow: auto; 227 | } 228 | 229 | // 230 | // Address odd `em`-unit font size rendering in all browsers. 231 | // 232 | 233 | code, 234 | kbd, 235 | pre, 236 | samp { 237 | font-family: monospace, monospace; 238 | font-size: 1em; 239 | } 240 | 241 | // Forms 242 | // ========================================================================== 243 | 244 | // 245 | // Known limitation: by default, Chrome and Safari on OS X allow very limited 246 | // styling of `select`, unless a `border` property is set. 247 | // 248 | 249 | // 250 | // 1. Correct color not being inherited. 251 | // Known issue: affects color of disabled elements. 252 | // 2. Correct font properties not being inherited. 253 | // 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 254 | // 255 | 256 | button, 257 | input, 258 | optgroup, 259 | select, 260 | textarea { 261 | color: inherit; // 1 262 | font: inherit; // 2 263 | margin: 0; // 3 264 | } 265 | 266 | // 267 | // Address `overflow` set to `hidden` in IE 8/9/10/11. 268 | // 269 | 270 | button { 271 | overflow: visible; 272 | } 273 | 274 | // 275 | // Address inconsistent `text-transform` inheritance for `button` and `select`. 276 | // All other form control elements do not inherit `text-transform` values. 277 | // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 278 | // Correct `select` style inheritance in Firefox. 279 | // 280 | 281 | button, 282 | select { 283 | text-transform: none; 284 | } 285 | 286 | // 287 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 288 | // and `video` controls. 289 | // 2. Correct inability to style clickable `input` types in iOS. 290 | // 3. Improve usability and consistency of cursor style between image-type 291 | // `input` and others. 292 | // 293 | 294 | button, 295 | html input[type="button"], // 1 296 | input[type="reset"], 297 | input[type="submit"] { 298 | -webkit-appearance: button; // 2 299 | cursor: pointer; // 3 300 | } 301 | 302 | // 303 | // Re-set default cursor for disabled elements. 304 | // 305 | 306 | button[disabled], 307 | html input[disabled] { 308 | cursor: default; 309 | } 310 | 311 | // 312 | // Remove inner padding and border in Firefox 4+. 313 | // 314 | 315 | button::-moz-focus-inner, 316 | input::-moz-focus-inner { 317 | border: 0; 318 | padding: 0; 319 | } 320 | 321 | // 322 | // Address Firefox 4+ setting `line-height` on `input` using `!important` in 323 | // the UA stylesheet. 324 | // 325 | 326 | input { 327 | line-height: normal; 328 | } 329 | 330 | // 331 | // It's recommended that you don't attempt to style these elements. 332 | // Firefox's implementation doesn't respect box-sizing, padding, or width. 333 | // 334 | // 1. Address box sizing set to `content-box` in IE 8/9/10. 335 | // 2. Remove excess padding in IE 8/9/10. 336 | // 337 | 338 | input[type="checkbox"], 339 | input[type="radio"] { 340 | box-sizing: border-box; // 1 341 | padding: 0; // 2 342 | } 343 | 344 | // 345 | // Fix the cursor style for Chrome's increment/decrement buttons. For certain 346 | // `font-size` values of the `input`, it causes the cursor style of the 347 | // decrement button to change from `default` to `text`. 348 | // 349 | 350 | input[type="number"]::-webkit-inner-spin-button, 351 | input[type="number"]::-webkit-outer-spin-button { 352 | height: auto; 353 | } 354 | 355 | // 356 | // 1. Address `appearance` set to `searchfield` in Safari and Chrome. 357 | // 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 358 | // 359 | 360 | input[type="search"] { 361 | -webkit-appearance: textfield; // 1 362 | box-sizing: content-box; //2 363 | } 364 | 365 | // 366 | // Remove inner padding and search cancel button in Safari and Chrome on OS X. 367 | // Safari (but not Chrome) clips the cancel button when the search input has 368 | // padding (and `textfield` appearance). 369 | // 370 | 371 | input[type="search"]::-webkit-search-cancel-button, 372 | input[type="search"]::-webkit-search-decoration { 373 | -webkit-appearance: none; 374 | } 375 | 376 | // 377 | // Define consistent border, margin, and padding. 378 | // 379 | 380 | fieldset { 381 | border: 1px solid #c0c0c0; 382 | margin: 0 2px; 383 | padding: 0.35em 0.625em 0.75em; 384 | } 385 | 386 | // 387 | // 1. Correct `color` not being inherited in IE 8/9/10/11. 388 | // 2. Remove padding so people aren't caught out if they zero out fieldsets. 389 | // 390 | 391 | legend { 392 | border: 0; // 1 393 | padding: 0; // 2 394 | } 395 | 396 | // 397 | // Remove default vertical scrollbar in IE 8/9/10/11. 398 | // 399 | 400 | textarea { 401 | overflow: auto; 402 | } 403 | 404 | // 405 | // Don't inherit the `font-weight` (applied by a rule above). 406 | // NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 407 | // 408 | 409 | optgroup { 410 | font-weight: bold; 411 | } 412 | 413 | // Tables 414 | // ========================================================================== 415 | 416 | // 417 | // Remove most spacing between table cells. 418 | // 419 | 420 | table { 421 | border-collapse: collapse; 422 | border-spacing: 0; 423 | } 424 | 425 | td, 426 | th { 427 | padding: 0; 428 | } 429 | --------------------------------------------------------------------------------

{{selectedInfo.year}}

16 | {{selectedInfo.day}}, {{selectedInfo.month}} {{selectedInfo.date}} 17 |