├── .babelrc ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── bower.json ├── dist ├── datepickk.css ├── datepickk.js ├── datepickk.min.css ├── datepickk.min.js ├── doc.css └── doc.js ├── docs ├── _button.less ├── _colors.less ├── _grid.less ├── _variables.less ├── demo.js ├── doc.less └── doc.min.css ├── index.html ├── package-lock.json ├── package.json ├── src ├── css │ └── datepickk.less └── js │ └── datepickk.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "targets": { 5 | "browsers": ["last 2 versions"] 6 | } 7 | }] 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/datepickk.zip 2 | node_modules/* 3 | test.html -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | cache: 4 | directories: 5 | - node_modules 6 | notifications: 7 | email: false 8 | node_js: 9 | - '4' 10 | before_install: 11 | - npm i -g npm@^2.0.0 12 | before_script: 13 | - npm prune 14 | after_success: 15 | - npm run semantic-release 16 | branches: 17 | only: 18 | - master 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Carsten Jacobsen 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 | # Datepickk.js 2 | [![Build Status](https://travis-ci.org/crsten/datepickk.svg?branch=master&style=flat-square)](https://travis-ci.org/crsten/datepickk) 3 | [![npm](https://img.shields.io/npm/dt/datepickk.svg?style=flat-square)](https://www.npmjs.com/package/datepickk) 4 | [![npm](https://img.shields.io/npm/v/datepickk.svg?style=flat-square)](https://www.npmjs.com/package/datepickk) 5 | ![npm](https://img.shields.io/npm/l/datepickk.svg?style=flat-square) 6 | 7 | ## Inspiration 8 | 9 | I got tired of using ugly datepickers and jQuery so i decided to build my own. Have fun :) 10 | 11 | ## Demo & Docs 12 | 13 | You can find [demo & docs here](http://crsten.github.io/datepickk/). 14 | 15 | ## Installation 16 | 17 | You can get it on npm. 18 | 19 | ```shell 20 | npm install datepickk --save 21 | ``` 22 | 23 | If you're not using either package manager, you can use `datepickk` by downloading the [files in the `dist` folder](dist). 24 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "datepickk", 3 | "description": "Flexbox/js datepicker", 4 | "main": "src/js/datepickk.js", 5 | "authors": [ 6 | "Carsten Jacobsen" 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "datepicker", 11 | "js", 12 | "flexbox" 13 | ], 14 | "moduleType": [ 15 | "amd", 16 | "globals" 17 | ], 18 | "homepage": "https://crsten.github.io/datepickk", 19 | "ignore": [ 20 | "**/.*", 21 | "node_modules", 22 | "bower_components", 23 | "test", 24 | "tests" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /dist/datepickk.css: -------------------------------------------------------------------------------- 1 | /*Main color*/ 2 | /*Datepickk*/ 3 | .d-noscroll { 4 | overflow: hidden; 5 | } 6 | #Datepickk { 7 | position: fixed; 8 | top: 0; 9 | left: 0; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | z-index: 999; 15 | width: 100%; 16 | height: 100%; 17 | font-family: inherit; 18 | color: #333; 19 | user-select: none; 20 | } 21 | #Datepickk.MSIE:not(.wrapped):not(.inline) .d-calendar { 22 | height: 560px; 23 | } 24 | #Datepickk.d-show .d-overlay { 25 | animation-name: show; 26 | animation-duration: .2s; 27 | animation-timing-function: ease-out; 28 | animation-fill-mode: both; 29 | } 30 | #Datepickk.d-hide > * { 31 | animation-name: DatepickkHide; 32 | animation-duration: .2s; 33 | animation-timing-function: linear; 34 | animation-fill-mode: both; 35 | } 36 | #Datepickk.d-hide .d-overlay { 37 | animation-name: show; 38 | animation-duration: .15s; 39 | animation-timing-function: ease-out; 40 | animation-fill-mode: both; 41 | animation-direction: reverse; 42 | } 43 | #Datepickk .d-overlay { 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | height: 100%; 49 | background-color: rgba(55, 58, 71, 0.95); 50 | z-index: 1; 51 | } 52 | #Datepickk .d-title { 53 | color: white; 54 | text-align: center; 55 | position: relative; 56 | font-size: 30px; 57 | margin: 25px 0; 58 | z-index: 2; 59 | } 60 | #Datepickk .d-confirm { 61 | border: none; 62 | position: relative; 63 | background-color: transparent; 64 | outline: none; 65 | font-family: inherit; 66 | font-size: 30px; 67 | font-weight: 500; 68 | color: white; 69 | margin: 25px 0; 70 | cursor: pointer; 71 | padding: 0; 72 | z-index: 2; 73 | } 74 | #Datepickk .d-title:empty, 75 | #Datepickk .d-confirm:empty { 76 | display: none; 77 | } 78 | @media (max-height: 528px) { 79 | #Datepickk .d-title, 80 | #Datepickk .d-confirm { 81 | font-size: 20px; 82 | margin: 15px 0; 83 | } 84 | #Datepickk .d-calendar { 85 | font-size: 20px; 86 | } 87 | } 88 | #Datepickk.multi .d-calendar, 89 | #Datepickk.multi .d-legend { 90 | max-width: 800px; 91 | } 92 | #Datepickk.multi .d-table { 93 | position: relative; 94 | padding-top: 35px; 95 | } 96 | #Datepickk.multi .d-table:before { 97 | content: attr(data-month); 98 | text-align: right; 99 | width: 100%; 100 | font-size: 1em; 101 | padding: 5px 10px 5px 0; 102 | box-sizing: border-box; 103 | color: #CCC; 104 | position: absolute; 105 | left: 0; 106 | top: 0; 107 | } 108 | #Datepickk.inline.d-show .d-calendar { 109 | animation: none; 110 | } 111 | #Datepickk.inline, 112 | #Datepickk.wrapped { 113 | position: static; 114 | z-index: 0; 115 | } 116 | #Datepickk.inline .d-calendar, 117 | #Datepickk.wrapped .d-calendar { 118 | box-shadow: none; 119 | z-index: 0; 120 | max-width: none; 121 | max-height: none; 122 | } 123 | #Datepickk.inline .d-confirm, 124 | #Datepickk.wrapped .d-confirm, 125 | #Datepickk.inline .d-title, 126 | #Datepickk.wrapped .d-title { 127 | color: #222; 128 | } 129 | #Datepickk.inline .d-overlay, 130 | #Datepickk.wrapped .d-overlay { 131 | display: none; 132 | } 133 | #Datepickk.inline .d-legend, 134 | #Datepickk.wrapped .d-legend { 135 | color: #222!important; 136 | max-width: none; 137 | max-height: none; 138 | } 139 | #Datepickk.fullscreen .d-calendar { 140 | max-width: none; 141 | max-height: none; 142 | } 143 | #Datepickk.fullscreen .d-calendar input + label { 144 | outline: 1px solid #eaeaea; 145 | box-sizing: border-box; 146 | align-items: flex-start !important; 147 | justify-content: flex-end !important; 148 | } 149 | #Datepickk.fullscreen .d-calendar input + label text { 150 | padding: 5px 10px 0 0; 151 | } 152 | #Datepickk.fullscreen .d-legend { 153 | max-width: none; 154 | } 155 | #Datepickk .d-legend { 156 | display: flex; 157 | flex-wrap: wrap; 158 | justify-content: center; 159 | width: 100%; 160 | z-index: 2; 161 | background-color: whitesmoke; 162 | max-width: 500px; 163 | position: relative; 164 | color: white; 165 | } 166 | #Datepickk .d-legend:empty { 167 | height: 0; 168 | } 169 | #Datepickk .d-legend p { 170 | backface-visibility: visible !important; 171 | animation-name: DatepickfadeInUp; 172 | animation-duration: .5s; 173 | animation-fill-mode: both; 174 | margin: 0; 175 | padding: 15px; 176 | transition: background-color 0.2s ease; 177 | cursor: pointer; 178 | color: #1B353F; 179 | } 180 | #Datepickk .d-legend p:after { 181 | content: attr(data-legend); 182 | } 183 | #Datepickk .d-legend p span { 184 | width: 20px; 185 | height: 20px; 186 | border-radius: 100%; 187 | vertical-align: bottom; 188 | display: inline-block; 189 | margin-right: 10px; 190 | } 191 | #Datepickk .d-calendar { 192 | margin: 0; 193 | background-color: white; 194 | box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.6); 195 | font-size: 20px; 196 | width: 100%; 197 | position: relative; 198 | max-width: 500px; 199 | max-height: 560px; 200 | display: flex; 201 | flex-direction: column; 202 | justify-content: flex-start; 203 | flex-grow: 1; 204 | z-index: 2; 205 | } 206 | #Datepickk .d-header { 207 | position: relative; 208 | background-color: #1B363F; 209 | color: white; 210 | font-size: 1.5em; 211 | } 212 | #Datepickk .d-header p { 213 | margin: .5em 0; 214 | text-align: center; 215 | } 216 | #Datepickk .d-header i { 217 | position: absolute; 218 | top: 50%; 219 | width: 30px; 220 | height: 30px; 221 | cursor: pointer; 222 | text-align: center; 223 | border-radius: 100%; 224 | transition: background-color 0.2s ease; 225 | transform: translateY(-50%); 226 | } 227 | #Datepickk .d-header i:before, 228 | #Datepickk .d-header i:after { 229 | content: ''; 230 | width: 0; 231 | height: 0; 232 | position: absolute; 233 | } 234 | #Datepickk .d-header i:before { 235 | border-top: 10px solid rgba(0, 0, 0, 0); 236 | border-bottom: 10px solid rgba(0, 0, 0, 0); 237 | } 238 | #Datepickk .d-header i:after { 239 | border-top: 7px solid rgba(0, 0, 0, 0); 240 | border-bottom: 7px solid rgba(0, 0, 0, 0); 241 | transition: border-color 0.2s ease; 242 | } 243 | #Datepickk .d-header i#d-previous { 244 | left: 20px; 245 | } 246 | #Datepickk .d-header i#d-previous:before { 247 | border-right: 10px solid #FFF; 248 | top: 5px; 249 | left: 7px; 250 | } 251 | #Datepickk .d-header i#d-previous:after { 252 | border-right: 7px solid #1B363F; 253 | top: 8px; 254 | left: 10px; 255 | } 256 | #Datepickk .d-header i#d-next { 257 | right: 20px; 258 | } 259 | #Datepickk .d-header i#d-next:before { 260 | border-left: 10px solid #FFF; 261 | top: 5px; 262 | left: 12px; 263 | } 264 | #Datepickk .d-header i#d-next:after { 265 | border-left: 7px solid #1B363F; 266 | top: 8px; 267 | left: 12px; 268 | } 269 | #Datepickk .d-header i:hover { 270 | background-color: #5E7178; 271 | } 272 | #Datepickk .d-header i:hover:after { 273 | border-left-color: #5E7178!important; 274 | border-right-color: #5E7178!important; 275 | } 276 | #Datepickk .d-month { 277 | cursor: pointer; 278 | white-space: nowrap; 279 | } 280 | #Datepickk .d-year { 281 | margin-left: 10px; 282 | cursor: pointer; 283 | } 284 | #Datepickk .d-year:before { 285 | content: ""; 286 | } 287 | #Datepickk .d-month-picker { 288 | display: flex; 289 | justify-content: space-between; 290 | background-color: rgba(27, 54, 63, 0.9); 291 | height: 0; 292 | overflow: hidden; 293 | pointer-events: none; 294 | transition: height .2s ease; 295 | } 296 | #Datepickk .d-month-picker.d-show { 297 | height: 44px; 298 | pointer-events: auto; 299 | } 300 | #Datepickk .d-month-picker > div { 301 | width: calc(100% / 12); 302 | text-align: center; 303 | line-height: 44px; 304 | color: white; 305 | cursor: pointer; 306 | } 307 | #Datepickk .d-month-picker > div:hover, 308 | #Datepickk .d-month-picker > div:focus { 309 | background-color: #e32d2d; 310 | color: white; 311 | } 312 | #Datepickk .d-month-picker > div.current { 313 | background-color: #e9965a; 314 | color: white; 315 | } 316 | #Datepickk .d-year-picker { 317 | display: flex; 318 | justify-content: space-between; 319 | background-color: rgba(27, 54, 63, 0.9); 320 | height: 0; 321 | overflow: hidden; 322 | pointer-events: none; 323 | transition: height .2s ease; 324 | } 325 | #Datepickk .d-year-picker.d-show { 326 | height: 44px; 327 | pointer-events: auto; 328 | } 329 | #Datepickk .d-year-picker > div { 330 | width: calc(100% / 11); 331 | text-align: center; 332 | line-height: 44px; 333 | color: white; 334 | cursor: pointer; 335 | } 336 | #Datepickk .d-year-picker > div:hover, 337 | #Datepickk .d-year-picker > div:focus { 338 | background-color: #e32d2d; 339 | color: white; 340 | } 341 | #Datepickk .d-year-picker > div.current { 342 | background-color: #e9965a; 343 | color: white; 344 | } 345 | #Datepickk .d-weekdays { 346 | display: flex; 347 | } 348 | #Datepickk .d-week { 349 | background-color: #E95A5A; 350 | color: white; 351 | display: flex; 352 | width: 100%; 353 | } 354 | #Datepickk .d-week + .d-week { 355 | border-left: 1px solid rgba(255, 255, 255, 0.05); 356 | } 357 | #Datepickk .d-week > div { 358 | flex-basis: calc(100% / 7); 359 | text-align: center; 360 | } 361 | #Datepickk .d-week > div p { 362 | margin: .8em 0; 363 | } 364 | @media (max-height: 540px) { 365 | #Datepickk .d-week { 366 | display: none; 367 | } 368 | } 369 | #Datepickk .d-table { 370 | width: 100%; 371 | display: flex; 372 | flex-wrap: wrap; 373 | flex: 1; 374 | } 375 | #Datepickk .d-table:first-child:nth-last-child(n + 3), 376 | #Datepickk .d-table:first-child:nth-last-child(n + 3) ~ div { 377 | flex: 0; 378 | flex-basis: calc(100% / 3 - 1px); 379 | /*-1px due to browser render*/ 380 | border-bottom: 1px solid rgba(0, 0, 0, 0.05); 381 | } 382 | #Datepickk .d-table label:nth-of-type(7n) .d-date-legends { 383 | padding-right: 0; 384 | } 385 | #Datepickk .d-table label:nth-last-of-type(-n + 7) .d-date-legends { 386 | padding-bottom: 0; 387 | } 388 | #Datepickk .d-table input { 389 | display: none; 390 | } 391 | #Datepickk .d-table input + label { 392 | flex-basis: calc(100% / 7); 393 | -ms-flex-preferred-size: 14.28%; 394 | /*Keep -> IE render fail*/ 395 | display: flex; 396 | align-items: center; 397 | justify-content: center; 398 | cursor: pointer; 399 | transition: background-color 0.2s ease, background 0.2s ease, color 0.2s ease; 400 | position: relative; 401 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 402 | box-sizing: border-box; 403 | } 404 | #Datepickk .d-table input + label text { 405 | z-index: 9; 406 | pointer-events: none; 407 | position: relative; 408 | } 409 | #Datepickk .d-table input + label[style*="linear-gradient"] text { 410 | text-shadow: 0 0 20px black; 411 | } 412 | #Datepickk .d-table input + label.today text:before { 413 | content: ''; 414 | width: 100%; 415 | height: 2px; 416 | background-color: #E95A5A; 417 | position: absolute; 418 | bottom: -5px; 419 | left: 0; 420 | } 421 | #Datepickk .d-table input + label:before { 422 | content: ''; 423 | position: absolute; 424 | top: 12.5%; 425 | left: 12.5%; 426 | width: 75%; 427 | height: 75%; 428 | border-radius: 5px; 429 | background-color: #7DD076; 430 | transition: transform 0.1s ease-out; 431 | transform: scaleX(0); 432 | transform-origin: left; 433 | } 434 | #Datepickk .d-table input + label.legend-hover { 435 | animation: legendhover 1s infinite; 436 | z-index: 10; 437 | } 438 | @keyframes legendhover { 439 | 0% { 440 | transform: translate(0, 0px); 441 | } 442 | 50% { 443 | transform: translate(0, -5px); 444 | } 445 | 100% { 446 | transform: translate(0, 0px); 447 | } 448 | } 449 | #Datepickk .d-table input + label.next, 450 | #Datepickk .d-table input + label.prev { 451 | color: #ccc; 452 | } 453 | #Datepickk .d-table input + label [data-tooltip]:after { 454 | content: ''; 455 | border-radius: 100%; 456 | background-color: #1B363F; 457 | width: 5px; 458 | height: 5px; 459 | position: absolute; 460 | top: 0; 461 | right: -10px; 462 | } 463 | #Datepickk .d-table input + label .d-tooltip { 464 | position: absolute; 465 | background-color: #1B363F; 466 | color: #FFF; 467 | padding: 7px; 468 | font-size: .7em; 469 | z-index: 13; 470 | text-align: center; 471 | top: 100%; 472 | left: 50%; 473 | transform: translate(-50%, -5px); 474 | display: none; 475 | } 476 | #Datepickk .d-table input + label .d-tooltip:before { 477 | content: ''; 478 | border-bottom: 7px solid #1B363F; 479 | border-left: 5px solid rgba(0, 0, 0, 0); 480 | border-right: 5px solid rgba(0, 0, 0, 0); 481 | top: -7px; 482 | left: 50%; 483 | position: absolute; 484 | margin-left: -5px; 485 | } 486 | #Datepickk .d-table input + label .d-tooltip:empty { 487 | display: none!important; 488 | } 489 | #Datepickk .d-table input + label:hover .d-tooltip { 490 | display: block; 491 | } 492 | #Datepickk .d-table input:checked + label { 493 | color: white; 494 | } 495 | #Datepickk .d-table input:checked + label:before { 496 | transform: scaleX(1); 497 | } 498 | #Datepickk .d-table input:disabled + label { 499 | cursor: not-allowed; 500 | } 501 | #Datepickk .d-table input:disabled + label:after { 502 | content: ''; 503 | position: absolute; 504 | top: 50%; 505 | left: 20%; 506 | width: 60%; 507 | height: 2px; 508 | z-index: 10; 509 | background-color: #c60000; 510 | transform-origin: center; 511 | transform: rotate(-25deg); 512 | } 513 | #Datepickk .d-table input + label.d-hidden { 514 | cursor: default; 515 | color: #ccc!important; 516 | background: #f0f0f0!important; 517 | text-decoration: line-through; 518 | } 519 | #Datepickk .d-table input + label.d-hidden:after { 520 | content: none; 521 | } 522 | #Datepickk .d-tables { 523 | display: flex; 524 | flex: 1; 525 | flex-wrap: wrap; 526 | } 527 | #Datepickk .d-tables:not(.locked) input:not(:checked) + label:not(.hidden):hover { 528 | color: #222; 529 | background-color: #eaeaea; 530 | } 531 | #Datepickk .d-tables.locked label { 532 | cursor: default; 533 | } 534 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked + label { 535 | color: white; 536 | } 537 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked + label ~ label:not(.hidden) { 538 | color: white; 539 | } 540 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked + label ~ label:not(.hidden):before { 541 | transform: scaleX(1); 542 | background-color: rgba(125, 208, 118, 0.5); 543 | } 544 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ label:hover ~ label, 545 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ label:focus ~ label { 546 | color: #666; 547 | } 548 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ label:hover ~ label:before, 549 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ label:focus ~ label:before { 550 | transform: scaleX(0); 551 | } 552 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ label:hover ~ label.next, 553 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ label:focus ~ label.next, 554 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ label:hover ~ label.prev, 555 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ label:focus ~ label.prev { 556 | color: #ccc; 557 | } 558 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ input:checked + label { 559 | color: white; 560 | } 561 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ input:checked + label:before { 562 | transform: scaleX(1); 563 | background-color: #7DD076; 564 | } 565 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ input:checked + label ~ label { 566 | color: inherit; 567 | } 568 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ input:checked + label ~ label.next, 569 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ input:checked + label ~ label.prev { 570 | color: #ccc; 571 | } 572 | #Datepickk .d-tables.range:not(.before) input:not(.single):checked ~ input:checked + label ~ label:before { 573 | transform: scaleX(0); 574 | } 575 | #Datepickk .d-tables.range.before input:not(.single):not(:checked) + label { 576 | color: white; 577 | } 578 | #Datepickk .d-tables.range.before input:not(.single):not(:checked) + label:before { 579 | transform: scaleX(1); 580 | background-color: rgba(233, 90, 126, 0.3); 581 | } 582 | #Datepickk .d-tables.range.before input:not(.single):checked + label ~ label { 583 | color: inherit; 584 | } 585 | #Datepickk .d-tables.range.before input:not(.single):checked + label ~ label.next, 586 | #Datepickk .d-tables.range.before input:not(.single):checked + label ~ label.prev { 587 | color: #ccc; 588 | } 589 | #Datepickk .d-tables.range.before input:not(.single):checked + label ~ label:before { 590 | transform: scaleX(0); 591 | } 592 | #Datepickk .d-fadeInUp { 593 | backface-visibility: visible !important; 594 | animation-name: DatepickfadeInUp; 595 | animation-duration: .5s; 596 | animation-fill-mode: both; 597 | } 598 | @keyframes DatepickBGShow { 599 | from { 600 | opacity: 0; 601 | } 602 | } 603 | @keyframes DatepickfadeInUp { 604 | 0% { 605 | opacity: 0; 606 | transform: translate3d(0, 100%, 0); 607 | } 608 | 100% { 609 | opacity: 1; 610 | transform: none; 611 | } 612 | } 613 | .d-fadeInUp { 614 | animation-name: DatepickfadeInUp; 615 | } 616 | #Datepickk.d-show > * { 617 | animation-name: DatepickkShow; 618 | animation-duration: .2s; 619 | animation-timing-function: ease-out; 620 | animation-fill-mode: both; 621 | } 622 | @keyframes DatepickkShow { 623 | from { 624 | opacity: 0; 625 | transform: translateY(-50px); 626 | } 627 | } 628 | @keyframes DatepickkHide { 629 | to { 630 | opacity: 0; 631 | transform: translateY(50px); 632 | } 633 | } 634 | -------------------------------------------------------------------------------- /dist/datepickk.min.css: -------------------------------------------------------------------------------- 1 | .d-noscroll{overflow:hidden}#Datepickk{position:fixed;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:6;width:100%;height:100%;font-family:inherit;color:#333;user-select:none}#Datepickk.MSIE:not(.wrapped):not(.inline) .d-calendar{height:560px}#Datepickk.d-show .d-overlay{animation-name:show;animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:both}#Datepickk.d-hide>*{animation-name:d;animation-duration:.2s;animation-timing-function:linear;animation-fill-mode:both}#Datepickk.d-hide .d-overlay{animation-name:show;animation-duration:.15s;animation-timing-function:ease-out;animation-fill-mode:both;animation-direction:reverse}#Datepickk .d-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(55,58,71,.95);z-index:1}#Datepickk .d-title{text-align:center}#Datepickk .d-confirm,#Datepickk .d-title{color:#fff;position:relative;font-size:30px;margin:25px 0;z-index:2}#Datepickk .d-confirm{border:none;background-color:transparent;outline:none;font-family:inherit;font-weight:500;cursor:pointer;padding:0}#Datepickk .d-confirm:empty,#Datepickk .d-title:empty{display:none}@media (max-height:528px){#Datepickk .d-confirm,#Datepickk .d-title{font-size:20px;margin:15px 0}#Datepickk .d-calendar{font-size:20px}}#Datepickk.multi .d-calendar,#Datepickk.multi .d-legend{max-width:800px}#Datepickk.multi .d-table{position:relative;padding-top:35px}#Datepickk.multi .d-table:before{content:attr(data-month);text-align:right;width:100%;font-size:1em;padding:5px 10px 5px 0;box-sizing:border-box;color:#ccc;position:absolute;left:0;top:0}#Datepickk.inline.d-show .d-calendar{animation:none}#Datepickk.inline,#Datepickk.wrapped{position:static;z-index:0}#Datepickk.inline .d-calendar,#Datepickk.wrapped .d-calendar{box-shadow:none;z-index:0;max-width:none;max-height:none}#Datepickk.inline .d-confirm,#Datepickk.inline .d-title,#Datepickk.wrapped .d-confirm,#Datepickk.wrapped .d-title{color:#222}#Datepickk.inline .d-overlay,#Datepickk.wrapped .d-overlay{display:none}#Datepickk.inline .d-legend,#Datepickk.wrapped .d-legend{color:#222!important;max-width:none;max-height:none}#Datepickk.fullscreen .d-calendar{max-width:none;max-height:none}#Datepickk.fullscreen .d-calendar input+label{outline:1px solid #eaeaea;box-sizing:border-box;align-items:flex-start!important;justify-content:flex-end!important}#Datepickk.fullscreen .d-calendar input+label text{padding:5px 10px 0 0}#Datepickk.fullscreen .d-legend{max-width:none}#Datepickk .d-legend{display:flex;flex-wrap:wrap;justify-content:center;width:100%;z-index:2;background-color:#f5f5f5;max-width:500px;position:relative;color:#fff}#Datepickk .d-legend:empty{height:0}#Datepickk .d-legend p{backface-visibility:visible!important;animation-name:b;animation-duration:.5s;animation-fill-mode:both;margin:0;padding:15px;transition:background-color .2s ease;cursor:pointer;color:#1b353f}#Datepickk .d-legend p:after{content:attr(data-legend)}#Datepickk .d-legend p span{width:20px;height:20px;border-radius:100%;vertical-align:bottom;display:inline-block;margin-right:10px}#Datepickk .d-calendar{margin:0;background-color:#fff;box-shadow:0 2px 10px -2px rgba(0,0,0,.6);font-size:20px;width:100%;position:relative;max-width:500px;max-height:560px;display:flex;flex-direction:column;justify-content:flex-start;flex-grow:1;z-index:2}#Datepickk .d-header{position:relative;background-color:#1b363f;color:#fff;font-size:1.5em}#Datepickk .d-header p{margin:.5em 0;text-align:center}#Datepickk .d-header i{position:absolute;top:50%;width:30px;height:30px;cursor:pointer;text-align:center;border-radius:100%;transition:background-color .2s ease;transform:translateY(-50%)}#Datepickk .d-header i:after,#Datepickk .d-header i:before{content:"";width:0;height:0;position:absolute}#Datepickk .d-header i:before{border-top:10px solid transparent;border-bottom:10px solid transparent}#Datepickk .d-header i:after{border-top:7px solid transparent;border-bottom:7px solid transparent;transition:border-color .2s ease}#Datepickk .d-header i#d-previous{left:20px}#Datepickk .d-header i#d-previous:before{border-right:10px solid #fff;top:5px;left:7px}#Datepickk .d-header i#d-previous:after{border-right:7px solid #1b363f;top:8px;left:10px}#Datepickk .d-header i#d-next{right:20px}#Datepickk .d-header i#d-next:before{border-left:10px solid #fff;top:5px;left:12px}#Datepickk .d-header i#d-next:after{border-left:7px solid #1b363f;top:8px;left:12px}#Datepickk .d-header i:hover{background-color:#5e7178}#Datepickk .d-header i:hover:after{border-left-color:#5e7178!important;border-right-color:#5e7178!important}#Datepickk .d-month{cursor:pointer;white-space:nowrap}#Datepickk .d-year{margin-left:10px;cursor:pointer}#Datepickk .d-year:before{content:""}#Datepickk .d-month-picker{display:flex;justify-content:space-between;background-color:rgba(27,54,63,.9);height:0;overflow:hidden;pointer-events:none;transition:height .2s ease}#Datepickk .d-month-picker.d-show{height:44px;pointer-events:auto}#Datepickk .d-month-picker>div{width:8.33333%;text-align:center;line-height:44px;color:#fff;cursor:pointer}#Datepickk .d-month-picker>div:focus,#Datepickk .d-month-picker>div:hover{background-color:#e32d2d;color:#fff}#Datepickk .d-month-picker>div.current{background-color:#e9965a;color:#fff}#Datepickk .d-year-picker{display:flex;justify-content:space-between;background-color:rgba(27,54,63,.9);height:0;overflow:hidden;pointer-events:none;transition:height .2s ease}#Datepickk .d-year-picker.d-show{height:44px;pointer-events:auto}#Datepickk .d-year-picker>div{width:9.09091%;text-align:center;line-height:44px;color:#fff;cursor:pointer}#Datepickk .d-year-picker>div:focus,#Datepickk .d-year-picker>div:hover{background-color:#e32d2d;color:#fff}#Datepickk .d-year-picker>div.current{background-color:#e9965a;color:#fff}#Datepickk .d-weekdays{display:flex}#Datepickk .d-week{background-color:#e95a5a;color:#fff;display:flex;width:100%}#Datepickk .d-week+.d-week{border-left:1px solid hsla(0,0%,100%,.05)}#Datepickk .d-week>div{flex-basis:14.28571%;text-align:center}#Datepickk .d-week>div p{margin:.8em 0}@media (max-height:540px){#Datepickk .d-week{display:none}}#Datepickk .d-table{width:100%;display:flex;flex-wrap:wrap;flex:1}#Datepickk .d-table:first-child:nth-last-child(n+3),#Datepickk .d-table:first-child:nth-last-child(n+3)~div{flex:0;flex-basis:calc(100% / 3 - 1px);border-bottom:1px solid rgba(0,0,0,.05)}#Datepickk .d-table label:nth-of-type(7n) .d-date-legends{padding-right:0}#Datepickk .d-table label:nth-last-of-type(-n+7) .d-date-legends{padding-bottom:0}#Datepickk .d-table input{display:none}#Datepickk .d-table input+label{flex-basis:14.28571%;-ms-flex-preferred-size:14.28%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease,background .2s ease,color .2s ease;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}#Datepickk .d-table input+label text{z-index:3;pointer-events:none;position:relative}#Datepickk .d-table input+label[style*=linear-gradient] text{text-shadow:0 0 20px #000}#Datepickk .d-table input+label.today text:before{content:"";width:100%;height:2px;background-color:#e95a5a;position:absolute;bottom:-5px;left:0}#Datepickk .d-table input+label:before{content:"";position:absolute;top:12.5%;left:12.5%;width:75%;height:75%;border-radius:5px;background-color:#7dd076;transition:transform .1s ease-out;transform:scaleX(0);transform-origin:left}#Datepickk .d-table input+label.legend-hover{animation:a 1s infinite;z-index:4}@keyframes a{0%{transform:translate(0)}50%{transform:translateY(-5px)}to{transform:translate(0)}}#Datepickk .d-table input+label.next,#Datepickk .d-table input+label.prev{color:#ccc}#Datepickk .d-table input+label [data-tooltip]:after{content:"";border-radius:100%;background-color:#1b363f;width:5px;height:5px;position:absolute;top:0;right:-10px}#Datepickk .d-table input+label .d-tooltip{position:absolute;background-color:#1b363f;color:#fff;padding:7px;font-size:.7em;z-index:5;text-align:center;top:100%;left:50%;transform:translate(-50%,-5px);display:none}#Datepickk .d-table input+label .d-tooltip:before{content:"";border-bottom:7px solid #1b363f;border-left:5px solid transparent;border-right:5px solid transparent;top:-7px;left:50%;position:absolute;margin-left:-5px}#Datepickk .d-table input+label .d-tooltip:empty{display:none!important}#Datepickk .d-table input+label:hover .d-tooltip{display:block}#Datepickk .d-table input:checked+label{color:#fff}#Datepickk .d-table input:checked+label:before{transform:scaleX(1)}#Datepickk .d-table input:disabled+label{cursor:not-allowed}#Datepickk .d-table input:disabled+label:after{content:"";position:absolute;top:50%;left:20%;width:60%;height:2px;z-index:4;background-color:#c60000;transform-origin:center;transform:rotate(-25deg)}#Datepickk .d-table input+label.d-hidden{cursor:default;color:#ccc!important;background:#f0f0f0!important;text-decoration:line-through}#Datepickk .d-table input+label.d-hidden:after{content:none}#Datepickk .d-tables{display:flex;flex:1;flex-wrap:wrap}#Datepickk .d-tables:not(.locked) input:not(:checked)+label:not(.hidden):hover{color:#222;background-color:#eaeaea}#Datepickk .d-tables.locked label{cursor:default}#Datepickk .d-tables.range:not(.before) input:not(.single):checked+label,#Datepickk .d-tables.range:not(.before) input:not(.single):checked+label~label:not(.hidden){color:#fff}#Datepickk .d-tables.range:not(.before) input:not(.single):checked+label~label:not(.hidden):before{transform:scaleX(1);background-color:rgba(125,208,118,.5)}#Datepickk .d-tables.range:not(.before) input:not(.single):checked~label:focus~label,#Datepickk .d-tables.range:not(.before) input:not(.single):checked~label:hover~label{color:#666}#Datepickk .d-tables.range:not(.before) input:not(.single):checked~label:focus~label:before,#Datepickk .d-tables.range:not(.before) input:not(.single):checked~label:hover~label:before{transform:scaleX(0)}#Datepickk .d-tables.range:not(.before) input:not(.single):checked~label:focus~label.next,#Datepickk .d-tables.range:not(.before) input:not(.single):checked~label:focus~label.prev,#Datepickk .d-tables.range:not(.before) input:not(.single):checked~label:hover~label.next,#Datepickk .d-tables.range:not(.before) input:not(.single):checked~label:hover~label.prev{color:#ccc}#Datepickk .d-tables.range:not(.before) input:not(.single):checked~input:checked+label{color:#fff}#Datepickk .d-tables.range:not(.before) input:not(.single):checked~input:checked+label:before{transform:scaleX(1);background-color:#7dd076}#Datepickk .d-tables.range:not(.before) input:not(.single):checked~input:checked+label~label{color:inherit}#Datepickk .d-tables.range:not(.before) input:not(.single):checked~input:checked+label~label.next,#Datepickk .d-tables.range:not(.before) input:not(.single):checked~input:checked+label~label.prev{color:#ccc}#Datepickk .d-tables.range:not(.before) input:not(.single):checked~input:checked+label~label:before{transform:scaleX(0)}#Datepickk .d-tables.range.before input:not(.single):not(:checked)+label{color:#fff}#Datepickk .d-tables.range.before input:not(.single):not(:checked)+label:before{transform:scaleX(1);background-color:rgba(233,90,126,.3)}#Datepickk .d-tables.range.before input:not(.single):checked+label~label{color:inherit}#Datepickk .d-tables.range.before input:not(.single):checked+label~label.next,#Datepickk .d-tables.range.before input:not(.single):checked+label~label.prev{color:#ccc}#Datepickk .d-tables.range.before input:not(.single):checked+label~label:before{transform:scaleX(0)}#Datepickk .d-fadeInUp{backface-visibility:visible!important;animation-name:b;animation-duration:.5s;animation-fill-mode:both}@keyframes b{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.d-fadeInUp{animation-name:b}#Datepickk.d-show>*{animation-name:c;animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:both}@keyframes c{0%{opacity:0;transform:translateY(-50px)}}@keyframes d{to{opacity:0;transform:translateY(50px)}} -------------------------------------------------------------------------------- /dist/datepickk.min.js: -------------------------------------------------------------------------------- 1 | (function(a,b){'object'==typeof exports&&'object'==typeof module?module.exports=b():'function'==typeof define&&define.amd?define([],b):'object'==typeof exports?exports.Datepickk=b():a.Datepickk=b()})(this,function(){return function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c={};return b.m=a,b.c=c,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a['default']}:function(){return a};return b.d(c,'a',c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p='',b(b.s=0)}([function(a,b,c){'use strict';function d(a){function b(){z.el.days.innerHTML='';var a=null==ba?E[S].weekStart:ba;if(Y)for(var b,c=0;cc;c++){b=document.createElement('div'),b.setAttribute('class','d-week');for(var d=0;7>d;d++){var e=d+a>E[S].dayNames.length-1?d+a-E[S].dayNames.length:d+a,f=document.createElement('div'),g=document.createElement('p');g.innerHTML=E[S].dayNames[e],f.appendChild(g),b.appendChild(f)}z.el.days.appendChild(b)}}function h(){[].slice.call(z.el.yearPicker.childNodes).forEach(function(a){a.innerHTML='\''+(C+parseInt(a.getAttribute('data-year'))).toString().substring(2,4)})}function c(){function a(a){function b(a){var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);return b?{r:parseInt(b[1],16),g:parseInt(b[2],16),b:parseInt(b[3],16)}:null}if('LABEL'===a.target.nodeName){var c=a.target.getAttribute('data-legend-id')?a.target.getAttribute('data-legend-id').split(' '):[];c.length&&c.forEach(function(c){var d=z.el.legend.querySelector('[data-legend-id="'+c+'"]');if('mouseover'==a.type&&d){var e=d.getAttribute('data-color')?b(d.getAttribute('data-color')):null;d.setAttribute('style','background-color:rgba('+e.r+','+e.g+','+e.b+',0.35);')}else d&&d.removeAttribute('style')})}}z.el.tables.innerHTML='';for(var b,c=0;cf;f++){e=document.createElement('input'),e.type='checkbox',e.id=d.numInstances+'-'+c+'-d-day-'+f;var g=document.createElement('label');g.setAttribute('for',d.numInstances+'-'+c+'-d-day-'+f);var h=document.createElement('text'),i=document.createElement('span');i.setAttribute('class','d-tooltip'),b.appendChild(e),b.appendChild(g),g.appendChild(h),g.appendChild(i),e.addEventListener(A,function(a){ca&&a.preventDefault()}),e.addEventListener('change',s)}z.el.tables.appendChild(b)}z.el.tables.addEventListener('mouseover',a),z.el.tables.addEventListener('mouseout',a)}function i(){function a(a){[].slice.call(z.el.tables.querySelectorAll('[data-legend-id*="'+this.getAttribute('data-legend-id')+'"]')).forEach(function(b){'mouseover'==a.type?b.classList.add('legend-hover'):b.classList.remove('legend-hover')})}for(var b=new Date(z.el.tables.childNodes[0].childNodes[0].getAttribute('data-date')),c=new Date(z.el.tables.childNodes[J-1].childNodes[82].getAttribute('data-date')),d=W.filter(function(a){for(var d=0;db)return!0;return!1}),e=[],f=0;fe.indexOf(b)&&(b.removeEventListener('mouseover',a),b.removeEventListener('mouseout',a),z.el.legend.removeChild(b))})}function j(a){return 11a&&(a+=12),a}function k(a,b){var c=z.el.querySelectorAll('.d-table'),d=null==ba?E[S].weekStart:ba;[].slice.call(z.el.querySelectorAll('.d-table')).forEach(function(e,f){var g=new Date(a,b+f,0).getDate(),h=new Date(a,b+f-1,0).getDate(),k=new Date(a,b+f-1,1).getDay();0>k-d?k=7-d:k-=d;var i=E[S].monthNames[j(b-1+f)];e.setAttribute('data-month',i),[].slice.call(e.querySelectorAll('.d-table input')).forEach(function(d,e){var i=d.nextSibling;d.checked=!1,d.removeAttribute('disabled'),i.removeAttribute('style'),i.removeAttribute('data-legend-id'),i.className='';var j=null;if(eaa)&&(d.setAttribute('disabled',!0),i.className='d-hidden'),Z&&j.getTime()==new Date().setHours(0,0,0,0)?i.classList.add('today'):i.classList.remove('today'),X[j.getTime()]?(i.childNodes[0].setAttribute('data-tooltip',!0),i.childNodes[1].innerHTML=X[j.getTime()]):(i.childNodes[0].removeAttribute('data-tooltip'),i.childNodes[1].innerHTML='');var l=W.filter(function(a){for(var b=0;b=a.dates[b].start.getTime()&&j.getTime()<=a.dates[b].end.getTime())return!0;return!1});if(0D)&&(12=new Date(aa).setDate(1)?(C=aa.getFullYear(),D=aa.getMonth()+1-J+1,z.el.header.childNodes[2].setAttribute('style','visibility:hidden')):z.el.header.childNodes[2].removeAttribute('style'),_&&new Date(C,D-1,1)<=new Date(_).setDate(1)?(C=_.getFullYear(),D=_.getMonth()+1,z.el.header.childNodes[0].setAttribute('style','visibility:hidden')):z.el.header.childNodes[0].removeAttribute('style');for(var a,b=0;ba&&(a+=12),z.el.monthPicker.childNodes[a].classList.add('current');k(C,D),h();var c=E[S].monthNames[D-1],d='';if(1e&&(e+=12),d+=E[S].monthNames[e]}var f=11=new Date(b[0].getFullYear(),b[0].getMonth(),1)&&a<=new Date(b[1].getFullYear(),b[1].getMonth(),1)&&z.el.tables.classList.add('before')}}function n(){[].slice.call(z.el.querySelectorAll('.d-table input')).forEach(function(a){a.checked=!1}),[].slice.call(z.el.monthPicker.querySelectorAll('.current')).forEach(function(a){a.classList.remove('current')}),[].slice.call(z.el.yearPicker.querySelectorAll('.current')).forEach(function(a){a.classList.remove('current')})}function o(){D+=J,l()}function p(){D-=J,l()}function q(a,b){a=new Date(a),a.setHours(0,0,0,0);var c=z.el.querySelector('[data-date="'+a.toJSON()+'"]');F&&c&&c.checked&&c.classList.add('single'),c&&!c.checked&&(c.checked=!0),B.push(a),T&&!b&&T.apply(a,[!0])}function r(a,b){a=new Date(a),a.setHours(0,0,0,0);var c=z.el.querySelector('[data-date="'+a.toJSON()+'"]');c&&(c.classList.remove('single'),c.checked&&(c.checked=!1)),B=B.filter(function(b){return b.getTime()!=a.getTime()}),T&&!b&&T.call(a,!1)}function s(){var a=this,b=new Date(a.getAttribute('data-date'));if(a.classList.remove('single'),!ca){if(F&&z.el.tables.classList.remove('before'),a.checked){if(G&&B.length>G-1){var c=B.length;for(c;c>G-1;c--)r(B[0])}if(F&&B.length){var d=z.el.querySelector('[data-date="'+B[0].toJSON()+'"]');!d&&b>B[0]&&z.el.tables.classList.add('before')}B.push(b),K&&z.hide()}else F&&1==B.length&&B[0].getTime()==b.getTime()?(q(b),a.classList.add('single')):B=B.filter(function(a){return a.getTime()!=b.getTime()});T&&T.call(b,a.checked)}}function t(a){a?(F=!0,z.el.tables.classList.add('range')):(F=!1,z.el.tables.classList.remove('range'))}function u(a){z.inline||z.container!==document.body||document.body.classList.add('d-noscroll'),x(a);z.el.calendar.addEventListener(e(),function a(){z.el.classList.remove('d-show'),z.el.calendar.removeEventListener(e(),a)}),z.el.classList.add('d-show'),H.appendChild(z.el),I=!0,$&&(D=$.getMonth()+1,C=$.getFullYear()),l()}function v(){document.body.classList.remove('d-noscroll');z.el.addEventListener(e(),function a(){z.el.parentNode.removeChild(z.el),I=!1,z.el.classList.remove('d-hide'),'function'==typeof O&&O.apply(z),z.el.removeEventListener(e(),a)}),z.el.classList.add('d-hide')}function w(){z.el.header.childNodes[0].addEventListener(A,p),z.el.header.childNodes[2].addEventListener(A,o),z.el.header.childNodes[1].childNodes[0].addEventListener(A,function(){z.el.monthPicker.classList.contains('d-show')?z.el.monthPicker.classList.remove('d-show'):z.el.monthPicker.classList.add('d-show'),z.el.yearPicker.classList.remove('d-show')}),z.el.header.childNodes[1].childNodes[1].addEventListener(A,function(){h(),z.el.yearPicker.classList.contains('d-show')?z.el.yearPicker.classList.remove('d-show'):z.el.yearPicker.classList.add('d-show'),z.el.monthPicker.classList.remove('d-show')}),z.el.button.addEventListener(A,v),z.el.overlay.addEventListener(A,function(){Q&&z.hide()}),[].slice.call(z.el.monthPicker.childNodes).forEach(function(a){a.addEventListener(A,function(){D=parseInt(this.getAttribute('data-month')),l(),z.el.monthPicker.classList.remove('d-show')})}),[].slice.call(z.el.yearPicker.childNodes).forEach(function(a){a.addEventListener(A,function(){C+=parseInt(this.getAttribute('data-year')),l(),z.el.yearPicker.classList.remove('d-show')})});var a=0,b=0;z.el.calendar.addEventListener('touchstart',function(b){a=b.changedTouches[0].clientX||b.originalEvent.changedTouches[0].clientX}),z.el.calendar.addEventListener('touchmove',function(c){b=c.changedTouches[0].clientX-a||c.originalEvent.changedTouches[0].clientX-a,c.preventDefault()}),z.el.calendar.addEventListener('touchend',function(){50b&&o(),b=0})}function x(a){for(var b in a)b in z&&(z[b]=a[b])}function y(a){a=new Date(a),D=a.getMonth()+1,C=a.getFullYear(),l()}d.numInstances=(d.numInstances||0)+1;var z=this,A='click',B=[],C=new Date().getFullYear(),D=new Date().getMonth()+1,E={no:{monthNames:['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'],dayNames:['s\xF8','ma','ti','on','to','fr','l\xF8'],weekStart:1},se:{monthNames:['januari','februari','mars','april','maj','juni','juli','augusti','september','oktober','november','december'],dayNames:['s\xF6','m\xE5','ti','on','to','fr','l\xF6'],weekStart:1},ru:{monthNames:['\u042F\u043D\u0432\u0430\u0440\u044C','\u0424\u0435\u0432\u0440\u0430\u043B\u044C','\u041C\u0430\u0440\u0442','\u0410\u043F\u0440\u0435\u043B\u044C','\u041C\u0430\u0439','\u0418\u044E\u043D\u044C','\u0418\u044E\u043B\u044C','\u0410\u0432\u0433\u0443\u0441\u0442','\u0421\u0435\u043D\u0442\u044F\u0431\u0440\u044C','\u041E\u043A\u0442\u044F\u0431\u0440\u044C','\u041D\u043E\u044F\u0431\u0440\u044C','\u0414\u0435\u043A\u0430\u0431\u0440\u044C'],dayNames:['\u0432\u0441','\u043F\u043D','\u0432\u0442','\u0441\u0440','\u0447\u0442','\u043F\u0442','\u0441\u0431'],weekStart:1},en:{monthNames:['january','february','march','april','may','june','july','august','september','october','november','december'],dayNames:['su','mo','tu','we','th','fr','sa'],weekStart:0},de:{monthNames:['Januar','Februar','M\xE4rz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],dayNames:['So','Mo','Di','Mi','Do','Fr','Sa'],weekStart:1}};E.nb=E.no,E.nn=E.no;var F=!1,G=null,H=document.body,I=!1,J=1,K=!1,L=null,M=null,N=null,O=null,P=null,Q=!0,R=!1,S='en',T=null,U=[],V=[],W=[],X={},Y=!0,Z=!0,$=null,_=null,aa=null,ba=null,ca=!1;return z.show=u,z.hide=v,z.selectDate=q,z.unselectAll=function(a){B.forEach(function(b){r(b,a)})},z.unselectDate=r,Object.defineProperties(z,{selectedDates:{get:function(){return B.sort(function(c,a){return c.getTime()-a.getTime()})}},range:{get:function(){return F},set:function(a){t(a),a&&(G=2)}},button:{get:function(){return L},set:function(a){L='string'==typeof a?a:null,z.el.button.innerHTML=L?L:''}},title:{get:function(){return M},set:function(a){M='string'==typeof a?a:null,z.el.titleBox.innerText=M?M:''}},lang:{get:function(){return S},set:function(a){a in E?(S=a,b(),l()):console.error('Language not found')}},weekStart:{get:function(){return null==ba?E[S].weekStart:ba},set:function(a){'number'==typeof a&&-1a?(ba=a,b(),l()):console.error('weekStart must be a number between 0 and 6')}},months:{get:function(){return J},set:function(a){'number'==typeof a&&0 0')}},isOpen:{get:function(){return I}},closeOnSelect:{get:function(){return K},set:function(a){K=!!a}},disabledDays:{get:function(){return V},set:function(a){if(a instanceof Array)for(var b=0;b [class*="col-"] { 36 | -webkit-box-flex: 1; 37 | -webkit-flex-grow: 1; 38 | -ms-flex-positive: 1; 39 | flex-grow: 1; 40 | } 41 | .title { 42 | -webkit-flex-basis: 100%; 43 | -ms-flex-preferred-size: 100%; 44 | flex-basis: 100%; 45 | margin: 15px 0; 46 | } 47 | .block { 48 | box-shadow: 0px 2px 10px -4px rgba(0, 0, 0, 0.3); 49 | } 50 | [class*="col-"] { 51 | -webkit-flex-basis: 100%; 52 | -ms-flex-preferred-size: 100%; 53 | flex-basis: 100%; 54 | -webkit-box-ordinal-group: 1000; 55 | -webkit-order: 999; 56 | -ms-flex-order: 999; 57 | order: 999; 58 | display: -webkit-box; 59 | display: -webkit-flex; 60 | display: -ms-flexbox; 61 | display: flex; 62 | -webkit-flex-wrap: wrap; 63 | -ms-flex-wrap: wrap; 64 | flex-wrap: wrap; 65 | -webkit-box-pack: start; 66 | -webkit-justify-content: flex-start; 67 | -ms-flex-pack: start; 68 | justify-content: flex-start; 69 | -webkit-box-align: start; 70 | -webkit-align-items: flex-start; 71 | -ms-flex-align: start; 72 | align-items: flex-start; 73 | -webkit-box-orient: vertical; 74 | -webkit-box-direction: normal; 75 | -webkit-flex-direction: row; 76 | -ms-flex-direction: row; 77 | flex-direction: row; 78 | -webkit-align-content: flex-start; 79 | -ms-flex-line-pack: start; 80 | align-content: flex-start; 81 | transition: flex-basis 0.1s ease; 82 | -webkit-transition: -webkit-flex-basis 0.1s ease; 83 | -ms-transition: -ms-flex-basis 0.1s ease; 84 | } 85 | [class*="col-"].block { 86 | padding: 15px; 87 | background: white; 88 | margin: 7.5px; 89 | } 90 | [class*="col-"].block.transparent { 91 | box-shadow: none; 92 | } 93 | [class*="col-"].align-center { 94 | -webkit-box-pack: center; 95 | -webkit-justify-content: center; 96 | -ms-flex-pack: center; 97 | justify-content: center; 98 | } 99 | [class*="col-"] h1, 100 | [class*="col-"] h2 { 101 | margin-top: 0; 102 | margin-bottom: 15px; 103 | } 104 | [class*="col-"].nested { 105 | padding: 7.5px; 106 | } 107 | [class*="col-"]:empty { 108 | min-height: 250px; 109 | } 110 | [class*="col-"].orderTop { 111 | -webkit-box-ordinal-group: 2; 112 | -webkit-order: 1; 113 | -ms-flex-order: 1; 114 | order: 1; 115 | } 116 | [class*="col-"] .align-bottom { 117 | margin-top: auto; 118 | } 119 | [class*="col-"] .align-right { 120 | margin-left: auto; 121 | } 122 | [class*="col-"] .title { 123 | margin-top: 0; 124 | } 125 | [class*="col-"] [class*="col-"] { 126 | padding: 7.5px; 127 | } 128 | [class*="col-"].nopadding { 129 | padding: 0; 130 | } 131 | .align-middle { 132 | -webkit-box-align: center; 133 | -webkit-align-items: center; 134 | -ms-flex-align: center; 135 | align-items: center; 136 | } 137 | .equal-height { 138 | -webkit-box-align: stretch; 139 | -webkit-align-items: stretch; 140 | -ms-flex-align: stretch; 141 | align-items: stretch; 142 | } 143 | .align-center { 144 | -webkit-box-pack: center; 145 | -webkit-justify-content: center; 146 | -ms-flex-pack: center; 147 | justify-content: center; 148 | } 149 | .align-end { 150 | -webkit-box-pack: end; 151 | -webkit-justify-content: flex-end; 152 | -ms-flex-pack: end; 153 | justify-content: flex-end; 154 | } 155 | .column { 156 | -webkit-box-orient: vertical; 157 | -webkit-box-direction: normal; 158 | -webkit-flex-direction: column; 159 | -ms-flex-direction: column; 160 | flex-direction: column; 161 | } 162 | .col-xs-1 { 163 | -webkit-flex-basis: 8.33333333%; 164 | -ms-flex-preferred-size: 8.33333333%; 165 | flex-basis: 8.33333333%; 166 | } 167 | .col-xs-1.block { 168 | -webkit-flex-basis: calc(8.33333333% - 15px); 169 | flex-basis: calc(8.33333333% - 15px); 170 | -ms-flex-preferred-size: calc(8.33333333% - 45px); 171 | } 172 | .col-xs-2 { 173 | -webkit-flex-basis: 16.66666667%; 174 | -ms-flex-preferred-size: 16.66666667%; 175 | flex-basis: 16.66666667%; 176 | } 177 | .col-xs-2.block { 178 | -webkit-flex-basis: calc(16.66666667% - 15px); 179 | flex-basis: calc(16.66666667% - 15px); 180 | -ms-flex-preferred-size: calc(16.66666667% - 45px); 181 | } 182 | .col-xs-3 { 183 | -webkit-flex-basis: 25%; 184 | -ms-flex-preferred-size: 25%; 185 | flex-basis: 25%; 186 | } 187 | .col-xs-3.block { 188 | -webkit-flex-basis: calc(25% - 15px); 189 | flex-basis: calc(25% - 15px); 190 | -ms-flex-preferred-size: calc(25% - 45px); 191 | } 192 | .col-xs-4 { 193 | -webkit-flex-basis: 33.33333333%; 194 | -ms-flex-preferred-size: 33.33333333%; 195 | flex-basis: 33.33333333%; 196 | } 197 | .col-xs-4.block { 198 | -webkit-flex-basis: calc(33.33333333% - 15px); 199 | flex-basis: calc(33.33333333% - 15px); 200 | -ms-flex-preferred-size: calc(33.33333333% - 45px); 201 | } 202 | .col-xs-5 { 203 | -webkit-flex-basis: 41.66666667%; 204 | -ms-flex-preferred-size: 41.66666667%; 205 | flex-basis: 41.66666667%; 206 | } 207 | .col-xs-5.block { 208 | -webkit-flex-basis: calc(41.66666667% - 15px); 209 | flex-basis: calc(41.66666667% - 15px); 210 | -ms-flex-preferred-size: calc(41.66666667% - 45px); 211 | } 212 | .col-xs-6 { 213 | -webkit-flex-basis: 50%; 214 | -ms-flex-preferred-size: 50%; 215 | flex-basis: 50%; 216 | } 217 | .col-xs-6.block { 218 | -webkit-flex-basis: calc(50% - 15px); 219 | flex-basis: calc(50% - 15px); 220 | -ms-flex-preferred-size: calc(50% - 45px); 221 | } 222 | .col-xs-7 { 223 | -webkit-flex-basis: 58.33333333%; 224 | -ms-flex-preferred-size: 58.33333333%; 225 | flex-basis: 58.33333333%; 226 | } 227 | .col-xs-7.block { 228 | -webkit-flex-basis: calc(58.33333333% - 15px); 229 | flex-basis: calc(58.33333333% - 15px); 230 | -ms-flex-preferred-size: calc(58.33333333% - 45px); 231 | } 232 | .col-xs-8 { 233 | -webkit-flex-basis: 66.66666667%; 234 | -ms-flex-preferred-size: 66.66666667%; 235 | flex-basis: 66.66666667%; 236 | } 237 | .col-xs-8.block { 238 | -webkit-flex-basis: calc(66.66666667% - 15px); 239 | flex-basis: calc(66.66666667% - 15px); 240 | -ms-flex-preferred-size: calc(66.66666667% - 45px); 241 | } 242 | .col-xs-9 { 243 | -webkit-flex-basis: 75%; 244 | -ms-flex-preferred-size: 75%; 245 | flex-basis: 75%; 246 | } 247 | .col-xs-9.block { 248 | -webkit-flex-basis: calc(75% - 15px); 249 | flex-basis: calc(75% - 15px); 250 | -ms-flex-preferred-size: calc(75% - 45px); 251 | } 252 | .col-xs-10 { 253 | -webkit-flex-basis: 83.33333333%; 254 | -ms-flex-preferred-size: 83.33333333%; 255 | flex-basis: 83.33333333%; 256 | } 257 | .col-xs-10.block { 258 | -webkit-flex-basis: calc(83.33333333% - 15px); 259 | flex-basis: calc(83.33333333% - 15px); 260 | -ms-flex-preferred-size: calc(83.33333333% - 45px); 261 | } 262 | .col-xs-11 { 263 | -webkit-flex-basis: 91.66666667%; 264 | -ms-flex-preferred-size: 91.66666667%; 265 | flex-basis: 91.66666667%; 266 | } 267 | .col-xs-11.block { 268 | -webkit-flex-basis: calc(91.66666667% - 15px); 269 | flex-basis: calc(91.66666667% - 15px); 270 | -ms-flex-preferred-size: calc(91.66666667% - 45px); 271 | } 272 | .col-xs-12 { 273 | -webkit-flex-basis: 100%; 274 | -ms-flex-preferred-size: 100%; 275 | flex-basis: 100%; 276 | } 277 | .col-xs-12.block { 278 | -webkit-flex-basis: calc(100% - 15px); 279 | flex-basis: calc(100% - 15px); 280 | -ms-flex-preferred-size: calc(100% - 45px); 281 | } 282 | @media (min-width: 600px) { 283 | .col-sm-1 { 284 | -webkit-flex-basis: 8.33333333%; 285 | -ms-flex-preferred-size: 8.33333333%; 286 | flex-basis: 8.33333333%; 287 | } 288 | .col-sm-1.block { 289 | -webkit-flex-basis: calc(8.33333333% - 15px); 290 | flex-basis: calc(8.33333333% - 15px); 291 | -ms-flex-preferred-size: calc(8.33333333% - 45px); 292 | } 293 | .col-sm-2 { 294 | -webkit-flex-basis: 16.66666667%; 295 | -ms-flex-preferred-size: 16.66666667%; 296 | flex-basis: 16.66666667%; 297 | } 298 | .col-sm-2.block { 299 | -webkit-flex-basis: calc(16.66666667% - 15px); 300 | flex-basis: calc(16.66666667% - 15px); 301 | -ms-flex-preferred-size: calc(16.66666667% - 45px); 302 | } 303 | .col-sm-3 { 304 | -webkit-flex-basis: 25%; 305 | -ms-flex-preferred-size: 25%; 306 | flex-basis: 25%; 307 | } 308 | .col-sm-3.block { 309 | -webkit-flex-basis: calc(25% - 15px); 310 | flex-basis: calc(25% - 15px); 311 | -ms-flex-preferred-size: calc(25% - 45px); 312 | } 313 | .col-sm-4 { 314 | -webkit-flex-basis: 33.33333333%; 315 | -ms-flex-preferred-size: 33.33333333%; 316 | flex-basis: 33.33333333%; 317 | } 318 | .col-sm-4.block { 319 | -webkit-flex-basis: calc(33.33333333% - 15px); 320 | flex-basis: calc(33.33333333% - 15px); 321 | -ms-flex-preferred-size: calc(33.33333333% - 45px); 322 | } 323 | .col-sm-5 { 324 | -webkit-flex-basis: 41.66666667%; 325 | -ms-flex-preferred-size: 41.66666667%; 326 | flex-basis: 41.66666667%; 327 | } 328 | .col-sm-5.block { 329 | -webkit-flex-basis: calc(41.66666667% - 15px); 330 | flex-basis: calc(41.66666667% - 15px); 331 | -ms-flex-preferred-size: calc(41.66666667% - 45px); 332 | } 333 | .col-sm-6 { 334 | -webkit-flex-basis: 50%; 335 | -ms-flex-preferred-size: 50%; 336 | flex-basis: 50%; 337 | } 338 | .col-sm-6.block { 339 | -webkit-flex-basis: calc(50% - 15px); 340 | flex-basis: calc(50% - 15px); 341 | -ms-flex-preferred-size: calc(50% - 45px); 342 | } 343 | .col-sm-7 { 344 | -webkit-flex-basis: 58.33333333%; 345 | -ms-flex-preferred-size: 58.33333333%; 346 | flex-basis: 58.33333333%; 347 | } 348 | .col-sm-7.block { 349 | -webkit-flex-basis: calc(58.33333333% - 15px); 350 | flex-basis: calc(58.33333333% - 15px); 351 | -ms-flex-preferred-size: calc(58.33333333% - 45px); 352 | } 353 | .col-sm-8 { 354 | -webkit-flex-basis: 66.66666667%; 355 | -ms-flex-preferred-size: 66.66666667%; 356 | flex-basis: 66.66666667%; 357 | } 358 | .col-sm-8.block { 359 | -webkit-flex-basis: calc(66.66666667% - 15px); 360 | flex-basis: calc(66.66666667% - 15px); 361 | -ms-flex-preferred-size: calc(66.66666667% - 45px); 362 | } 363 | .col-sm-9 { 364 | -webkit-flex-basis: 75%; 365 | -ms-flex-preferred-size: 75%; 366 | flex-basis: 75%; 367 | } 368 | .col-sm-9.block { 369 | -webkit-flex-basis: calc(75% - 15px); 370 | flex-basis: calc(75% - 15px); 371 | -ms-flex-preferred-size: calc(75% - 45px); 372 | } 373 | .col-sm-10 { 374 | -webkit-flex-basis: 83.33333333%; 375 | -ms-flex-preferred-size: 83.33333333%; 376 | flex-basis: 83.33333333%; 377 | } 378 | .col-sm-10.block { 379 | -webkit-flex-basis: calc(83.33333333% - 15px); 380 | flex-basis: calc(83.33333333% - 15px); 381 | -ms-flex-preferred-size: calc(83.33333333% - 45px); 382 | } 383 | .col-sm-11 { 384 | -webkit-flex-basis: 91.66666667%; 385 | -ms-flex-preferred-size: 91.66666667%; 386 | flex-basis: 91.66666667%; 387 | } 388 | .col-sm-11.block { 389 | -webkit-flex-basis: calc(91.66666667% - 15px); 390 | flex-basis: calc(91.66666667% - 15px); 391 | -ms-flex-preferred-size: calc(91.66666667% - 45px); 392 | } 393 | .col-sm-12 { 394 | -webkit-flex-basis: 100%; 395 | -ms-flex-preferred-size: 100%; 396 | flex-basis: 100%; 397 | } 398 | .col-sm-12.block { 399 | -webkit-flex-basis: calc(100% - 15px); 400 | flex-basis: calc(100% - 15px); 401 | -ms-flex-preferred-size: calc(100% - 45px); 402 | } 403 | } 404 | @media (min-width: 992px) { 405 | .col-md-1 { 406 | -webkit-flex-basis: 8.33333333%; 407 | -ms-flex-preferred-size: 8.33333333%; 408 | flex-basis: 8.33333333%; 409 | } 410 | .col-md-1.block { 411 | -webkit-flex-basis: calc(8.33333333% - 15px); 412 | flex-basis: calc(8.33333333% - 15px); 413 | -ms-flex-preferred-size: calc(8.33333333% - 45px); 414 | } 415 | .col-md-2 { 416 | -webkit-flex-basis: 16.66666667%; 417 | -ms-flex-preferred-size: 16.66666667%; 418 | flex-basis: 16.66666667%; 419 | } 420 | .col-md-2.block { 421 | -webkit-flex-basis: calc(16.66666667% - 15px); 422 | flex-basis: calc(16.66666667% - 15px); 423 | -ms-flex-preferred-size: calc(16.66666667% - 45px); 424 | } 425 | .col-md-3 { 426 | -webkit-flex-basis: 25%; 427 | -ms-flex-preferred-size: 25%; 428 | flex-basis: 25%; 429 | } 430 | .col-md-3.block { 431 | -webkit-flex-basis: calc(25% - 15px); 432 | flex-basis: calc(25% - 15px); 433 | -ms-flex-preferred-size: calc(25% - 45px); 434 | } 435 | .col-md-4 { 436 | -webkit-flex-basis: 33.33333333%; 437 | -ms-flex-preferred-size: 33.33333333%; 438 | flex-basis: 33.33333333%; 439 | } 440 | .col-md-4.block { 441 | -webkit-flex-basis: calc(33.33333333% - 15px); 442 | flex-basis: calc(33.33333333% - 15px); 443 | -ms-flex-preferred-size: calc(33.33333333% - 45px); 444 | } 445 | .col-md-5 { 446 | -webkit-flex-basis: 41.66666667%; 447 | -ms-flex-preferred-size: 41.66666667%; 448 | flex-basis: 41.66666667%; 449 | } 450 | .col-md-5.block { 451 | -webkit-flex-basis: calc(41.66666667% - 15px); 452 | flex-basis: calc(41.66666667% - 15px); 453 | -ms-flex-preferred-size: calc(41.66666667% - 45px); 454 | } 455 | .col-md-6 { 456 | -webkit-flex-basis: 50%; 457 | -ms-flex-preferred-size: 50%; 458 | flex-basis: 50%; 459 | } 460 | .col-md-6.block { 461 | -webkit-flex-basis: calc(50% - 15px); 462 | flex-basis: calc(50% - 15px); 463 | -ms-flex-preferred-size: calc(50% - 45px); 464 | } 465 | .col-md-7 { 466 | -webkit-flex-basis: 58.33333333%; 467 | -ms-flex-preferred-size: 58.33333333%; 468 | flex-basis: 58.33333333%; 469 | } 470 | .col-md-7.block { 471 | -webkit-flex-basis: calc(58.33333333% - 15px); 472 | flex-basis: calc(58.33333333% - 15px); 473 | -ms-flex-preferred-size: calc(58.33333333% - 45px); 474 | } 475 | .col-md-8 { 476 | -webkit-flex-basis: 66.66666667%; 477 | -ms-flex-preferred-size: 66.66666667%; 478 | flex-basis: 66.66666667%; 479 | } 480 | .col-md-8.block { 481 | -webkit-flex-basis: calc(66.66666667% - 15px); 482 | flex-basis: calc(66.66666667% - 15px); 483 | -ms-flex-preferred-size: calc(66.66666667% - 45px); 484 | } 485 | .col-md-9 { 486 | -webkit-flex-basis: 75%; 487 | -ms-flex-preferred-size: 75%; 488 | flex-basis: 75%; 489 | } 490 | .col-md-9.block { 491 | -webkit-flex-basis: calc(75% - 15px); 492 | flex-basis: calc(75% - 15px); 493 | -ms-flex-preferred-size: calc(75% - 45px); 494 | } 495 | .col-md-10 { 496 | -webkit-flex-basis: 83.33333333%; 497 | -ms-flex-preferred-size: 83.33333333%; 498 | flex-basis: 83.33333333%; 499 | } 500 | .col-md-10.block { 501 | -webkit-flex-basis: calc(83.33333333% - 15px); 502 | flex-basis: calc(83.33333333% - 15px); 503 | -ms-flex-preferred-size: calc(83.33333333% - 45px); 504 | } 505 | .col-md-11 { 506 | -webkit-flex-basis: 91.66666667%; 507 | -ms-flex-preferred-size: 91.66666667%; 508 | flex-basis: 91.66666667%; 509 | } 510 | .col-md-11.block { 511 | -webkit-flex-basis: calc(91.66666667% - 15px); 512 | flex-basis: calc(91.66666667% - 15px); 513 | -ms-flex-preferred-size: calc(91.66666667% - 45px); 514 | } 515 | .col-md-12 { 516 | -webkit-flex-basis: 100%; 517 | -ms-flex-preferred-size: 100%; 518 | flex-basis: 100%; 519 | } 520 | .col-md-12.block { 521 | -webkit-flex-basis: calc(100% - 15px); 522 | flex-basis: calc(100% - 15px); 523 | -ms-flex-preferred-size: calc(100% - 45px); 524 | } 525 | } 526 | @media (min-width: 1200px) { 527 | .col-lg-1 { 528 | -webkit-flex-basis: 8.33333333%; 529 | -ms-flex-preferred-size: 8.33333333%; 530 | flex-basis: 8.33333333%; 531 | } 532 | .col-lg-1.block { 533 | -webkit-flex-basis: calc(8.33333333% - 15px); 534 | flex-basis: calc(8.33333333% - 15px); 535 | -ms-flex-preferred-size: calc(8.33333333% - 45px); 536 | } 537 | .col-lg-2 { 538 | -webkit-flex-basis: 16.66666667%; 539 | -ms-flex-preferred-size: 16.66666667%; 540 | flex-basis: 16.66666667%; 541 | } 542 | .col-lg-2.block { 543 | -webkit-flex-basis: calc(16.66666667% - 15px); 544 | flex-basis: calc(16.66666667% - 15px); 545 | -ms-flex-preferred-size: calc(16.66666667% - 45px); 546 | } 547 | .col-lg-3 { 548 | -webkit-flex-basis: 25%; 549 | -ms-flex-preferred-size: 25%; 550 | flex-basis: 25%; 551 | } 552 | .col-lg-3.block { 553 | -webkit-flex-basis: calc(25% - 15px); 554 | flex-basis: calc(25% - 15px); 555 | -ms-flex-preferred-size: calc(25% - 45px); 556 | } 557 | .col-lg-4 { 558 | -webkit-flex-basis: 33.33333333%; 559 | -ms-flex-preferred-size: 33.33333333%; 560 | flex-basis: 33.33333333%; 561 | } 562 | .col-lg-4.block { 563 | -webkit-flex-basis: calc(33.33333333% - 15px); 564 | flex-basis: calc(33.33333333% - 15px); 565 | -ms-flex-preferred-size: calc(33.33333333% - 45px); 566 | } 567 | .col-lg-5 { 568 | -webkit-flex-basis: 41.66666667%; 569 | -ms-flex-preferred-size: 41.66666667%; 570 | flex-basis: 41.66666667%; 571 | } 572 | .col-lg-5.block { 573 | -webkit-flex-basis: calc(41.66666667% - 15px); 574 | flex-basis: calc(41.66666667% - 15px); 575 | -ms-flex-preferred-size: calc(41.66666667% - 45px); 576 | } 577 | .col-lg-6 { 578 | -webkit-flex-basis: 50%; 579 | -ms-flex-preferred-size: 50%; 580 | flex-basis: 50%; 581 | } 582 | .col-lg-6.block { 583 | -webkit-flex-basis: calc(50% - 15px); 584 | flex-basis: calc(50% - 15px); 585 | -ms-flex-preferred-size: calc(50% - 45px); 586 | } 587 | .col-lg-7 { 588 | -webkit-flex-basis: 58.33333333%; 589 | -ms-flex-preferred-size: 58.33333333%; 590 | flex-basis: 58.33333333%; 591 | } 592 | .col-lg-7.block { 593 | -webkit-flex-basis: calc(58.33333333% - 15px); 594 | flex-basis: calc(58.33333333% - 15px); 595 | -ms-flex-preferred-size: calc(58.33333333% - 45px); 596 | } 597 | .col-lg-8 { 598 | -webkit-flex-basis: 66.66666667%; 599 | -ms-flex-preferred-size: 66.66666667%; 600 | flex-basis: 66.66666667%; 601 | } 602 | .col-lg-8.block { 603 | -webkit-flex-basis: calc(66.66666667% - 15px); 604 | flex-basis: calc(66.66666667% - 15px); 605 | -ms-flex-preferred-size: calc(66.66666667% - 45px); 606 | } 607 | .col-lg-9 { 608 | -webkit-flex-basis: 75%; 609 | -ms-flex-preferred-size: 75%; 610 | flex-basis: 75%; 611 | } 612 | .col-lg-9.block { 613 | -webkit-flex-basis: calc(75% - 15px); 614 | flex-basis: calc(75% - 15px); 615 | -ms-flex-preferred-size: calc(75% - 45px); 616 | } 617 | .col-lg-10 { 618 | -webkit-flex-basis: 83.33333333%; 619 | -ms-flex-preferred-size: 83.33333333%; 620 | flex-basis: 83.33333333%; 621 | } 622 | .col-lg-10.block { 623 | -webkit-flex-basis: calc(83.33333333% - 15px); 624 | flex-basis: calc(83.33333333% - 15px); 625 | -ms-flex-preferred-size: calc(83.33333333% - 45px); 626 | } 627 | .col-lg-11 { 628 | -webkit-flex-basis: 91.66666667%; 629 | -ms-flex-preferred-size: 91.66666667%; 630 | flex-basis: 91.66666667%; 631 | } 632 | .col-lg-11.block { 633 | -webkit-flex-basis: calc(91.66666667% - 15px); 634 | flex-basis: calc(91.66666667% - 15px); 635 | -ms-flex-preferred-size: calc(91.66666667% - 45px); 636 | } 637 | .col-lg-12 { 638 | -webkit-flex-basis: 100%; 639 | -ms-flex-preferred-size: 100%; 640 | flex-basis: 100%; 641 | } 642 | .col-lg-12.block { 643 | -webkit-flex-basis: calc(100% - 15px); 644 | flex-basis: calc(100% - 15px); 645 | -ms-flex-preferred-size: calc(100% - 45px); 646 | } 647 | } 648 | .bg-blue { 649 | background: #3f7cac; 650 | } 651 | .bg-blue-fade { 652 | background: rgba(63, 124, 172, 0.4); 653 | } 654 | .red { 655 | background: #AA3F3F !important; 656 | color: white!important; 657 | } 658 | .orange { 659 | background: #E99C00 !important; 660 | color: white!important; 661 | } 662 | .grey { 663 | background: #767676 !important; 664 | color: white!important; 665 | } 666 | .green { 667 | background: #3faa56 !important; 668 | color: white!important; 669 | } 670 | .blue { 671 | background: #3f7cac !important; 672 | color: white!important; 673 | } 674 | .white { 675 | background: white; 676 | } 677 | .darkgrey { 678 | background: #222 !important; 679 | color: white!important; 680 | } 681 | .transparent { 682 | background: transparent!important; 683 | } 684 | button, 685 | a.button { 686 | font-family: inherit; 687 | font-size: 1.2rem; 688 | font-weight: 200; 689 | display: inline-block; 690 | padding: 1rem 1.5rem; 691 | cursor: pointer; 692 | transition: background 0.2s ease-out, opacity 0.2s ease-out; 693 | text-decoration: none; 694 | color: white; 695 | border: none; 696 | outline: none; 697 | background: #3f7cac; 698 | } 699 | @media (max-width: 375px) { 700 | button, 701 | a.button { 702 | width: 100%; 703 | text-align: center; 704 | } 705 | button + button, 706 | a.button + button, 707 | button + a.button, 708 | a.button + a.button { 709 | margin-top: 7.5px; 710 | } 711 | } 712 | button[data-label], 713 | a.button[data-label] { 714 | transition: all 0.2s ease-out; 715 | } 716 | button[data-label]:hover, 717 | a.button[data-label]:hover { 718 | padding: 0 2rem!important; 719 | } 720 | button[data-label]:hover:before, 721 | a.button[data-label]:hover:before { 722 | margin-right: 5px; 723 | } 724 | button[data-label]:hover:after, 725 | a.button[data-label]:hover:after { 726 | content: attr(data-label); 727 | width: auto; 728 | } 729 | button:hover, 730 | a.button:hover, 731 | button:active, 732 | a.button:active { 733 | text-decoration: none; 734 | color: white; 735 | background: #5b95c3; 736 | } 737 | button.big, 738 | a.button.big { 739 | padding: 50px 0; 740 | text-align: center; 741 | } 742 | button.big i, 743 | a.button.big i { 744 | display: block; 745 | font-size: 10vw; 746 | padding-bottom: 2rem; 747 | } 748 | button.add, 749 | a.button.add { 750 | background: #3faa56; 751 | } 752 | button.add.invert, 753 | a.button.add.invert { 754 | color: #3faa56; 755 | } 756 | button.add:hover, 757 | a.button.add:hover, 758 | button.add:active, 759 | a.button.add:active { 760 | background: #5ac270; 761 | } 762 | button.add:before, 763 | a.button.add:before { 764 | content: '\F067'; 765 | font-family: 'FontAwesome'; 766 | margin-right: .5rem; 767 | font-size: 1.2rem; 768 | } 769 | button.check, 770 | a.button.check { 771 | background: #3faa56; 772 | } 773 | button.check.invert, 774 | a.button.check.invert { 775 | color: #3faa56; 776 | } 777 | button.check:hover, 778 | a.button.check:hover, 779 | button.check:active, 780 | a.button.check:active { 781 | background: #5ac270; 782 | } 783 | button.check:before, 784 | a.button.check:before { 785 | content: '\F00C'; 786 | font-family: 'FontAwesome'; 787 | margin-right: .5rem; 788 | font-size: 1.2rem; 789 | } 790 | button.save, 791 | a.button.save { 792 | background: #3faa56; 793 | } 794 | button.save.invert, 795 | a.button.save.invert { 796 | color: #3faa56; 797 | } 798 | button.save:hover, 799 | a.button.save:hover, 800 | button.save:active, 801 | a.button.save:active { 802 | background: #5ac270; 803 | } 804 | button.save:before, 805 | a.button.save:before { 806 | content: '\F0C7'; 807 | font-family: 'FontAwesome'; 808 | margin-right: .5rem; 809 | font-size: 1.2rem; 810 | } 811 | button.refresh:before, 812 | a.button.refresh:before { 813 | content: '\F021'; 814 | font-family: 'FontAwesome'; 815 | margin-right: .5rem; 816 | font-size: 1.2rem; 817 | } 818 | button.view:before, 819 | a.button.view:before { 820 | content: '\F002'; 821 | font-family: 'FontAwesome'; 822 | margin-right: .5rem; 823 | font-size: 1.2rem; 824 | } 825 | button.edit, 826 | a.button.edit { 827 | background: #E99C00; 828 | } 829 | button.edit.invert, 830 | a.button.edit.invert { 831 | color: #E99C00; 832 | } 833 | button.edit:hover, 834 | a.button.edit:hover, 835 | button.edit:active, 836 | a.button.edit:active { 837 | background: #ffb41d; 838 | } 839 | button.edit:before, 840 | a.button.edit:before { 841 | content: '\F040'; 842 | font-family: 'FontAwesome'; 843 | margin-right: .5rem; 844 | font-size: 1.2rem; 845 | } 846 | button.disable, 847 | a.button.disable { 848 | background: #AA3F3F; 849 | } 850 | button.disable.invert, 851 | a.button.disable.invert { 852 | color: #AA3F3F; 853 | } 854 | button.disable:hover, 855 | a.button.disable:hover, 856 | button.disable:active, 857 | a.button.disable:active { 858 | background: #c25a5a; 859 | } 860 | button.disable:before, 861 | a.button.disable:before { 862 | content: '\F05E'; 863 | font-family: 'FontAwesome'; 864 | margin-right: .5rem; 865 | font-size: 1.2rem; 866 | } 867 | button.enable, 868 | a.button.enable { 869 | background: #E99C00; 870 | } 871 | button.enable.invert, 872 | a.button.enable.invert { 873 | color: #E99C00; 874 | } 875 | button.enable:hover, 876 | a.button.enable:hover, 877 | button.enable:active, 878 | a.button.enable:active { 879 | background: #ffb41d; 880 | } 881 | button.enable:before, 882 | a.button.enable:before { 883 | content: '\F00C'; 884 | font-family: 'FontAwesome'; 885 | margin-right: .5rem; 886 | font-size: 1.2rem; 887 | } 888 | button.remove, 889 | a.button.remove { 890 | background: #AA3F3F; 891 | } 892 | button.remove.invert, 893 | a.button.remove.invert { 894 | color: #AA3F3F; 895 | } 896 | button.remove:hover, 897 | a.button.remove:hover, 898 | button.remove:active, 899 | a.button.remove:active { 900 | background: #c25a5a; 901 | } 902 | button.remove:before, 903 | a.button.remove:before { 904 | content: '\F00D'; 905 | font-family: 'FontAwesome'; 906 | margin-right: .5rem; 907 | font-size: 1.2rem; 908 | } 909 | button.success, 910 | a.button.success { 911 | background: #3faa56; 912 | } 913 | button.success.invert, 914 | a.button.success.invert { 915 | color: #3faa56; 916 | } 917 | button.success:hover, 918 | a.button.success:hover, 919 | button.success:active, 920 | a.button.success:active { 921 | background: #5ac270; 922 | } 923 | button.warning, 924 | a.button.warning { 925 | background: #E99C00; 926 | } 927 | button.warning.invert, 928 | a.button.warning.invert { 929 | color: #E99C00; 930 | } 931 | button.warning:hover, 932 | a.button.warning:hover, 933 | button.warning:active, 934 | a.button.warning:active { 935 | background: #ffb41d; 936 | } 937 | button.error, 938 | a.button.error { 939 | background: #AA3F3F; 940 | } 941 | button.error.invert, 942 | a.button.error.invert { 943 | color: #AA3F3F; 944 | } 945 | button.error:hover, 946 | a.button.error:hover, 947 | button.error:active, 948 | a.button.error:active { 949 | background: #c25a5a; 950 | } 951 | button.invert, 952 | a.button.invert { 953 | background: transparent; 954 | } 955 | button.invert:hover, 956 | a.button.invert:hover { 957 | color: white; 958 | } 959 | button.full, 960 | a.button.full { 961 | width: 100%; 962 | } 963 | button:empty:before, 964 | a.button:empty:before { 965 | margin-right: 0; 966 | } 967 | /*Font variables*/ 968 | /*Grid variables*/ 969 | * { 970 | box-sizing: border-box; 971 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 972 | } 973 | body { 974 | font-family: 'Raleway'; 975 | margin: 80px 0 0 0; 976 | padding: 0; 977 | background-color: #eaeaea; 978 | } 979 | ul { 980 | margin: 0; 981 | padding: 0; 982 | list-style: none; 983 | } 984 | ul li { 985 | padding: 7.5px 0; 986 | } 987 | ul li:before { 988 | content: '\F1DB'; 989 | opacity: .4; 990 | margin-right: 10px; 991 | font-family: 'FontAwesome'; 992 | } 993 | .nav { 994 | display: -webkit-box; 995 | display: -webkit-flex; 996 | display: -ms-flexbox; 997 | display: flex; 998 | -webkit-box-pack: justify; 999 | -webkit-justify-content: space-between; 1000 | -ms-flex-pack: justify; 1001 | justify-content: space-between; 1002 | -webkit-box-align: center; 1003 | -webkit-align-items: center; 1004 | -ms-flex-align: center; 1005 | align-items: center; 1006 | position: fixed; 1007 | z-index: 10; 1008 | background-color: white; 1009 | height: 80px; 1010 | width: 100%; 1011 | top: 0; 1012 | left: 0; 1013 | padding: 0 20px; 1014 | box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.4); 1015 | } 1016 | .nav h1 { 1017 | color: #222; 1018 | width: auto; 1019 | display: inline; 1020 | } 1021 | .nav h1 span { 1022 | color: rgba(34, 34, 34, 0.5); 1023 | font-size: .6em; 1024 | } 1025 | .nav p { 1026 | color: #A9A9A9; 1027 | } 1028 | button span { 1029 | font-size: .7em; 1030 | display: block; 1031 | font-style: italic; 1032 | } 1033 | #browsers i { 1034 | text-align: center; 1035 | font-size: 40px; 1036 | color: #959595; 1037 | } 1038 | #browsers p { 1039 | width: 100%; 1040 | text-align: center; 1041 | font-weight: 500; 1042 | color: #959595; 1043 | font-size: 20px; 1044 | } 1045 | h1, 1046 | h2 { 1047 | width: 100%; 1048 | } 1049 | h2 span { 1050 | color: #3f7cac; 1051 | font-size: .7em; 1052 | font-style: italic; 1053 | } 1054 | h2 span:before { 1055 | content: '\F121'; 1056 | margin-right: 5px; 1057 | font-family: 'FontAwesome'; 1058 | } 1059 | h2 a { 1060 | font-size: .8em; 1061 | float: right; 1062 | text-decoration: none; 1063 | color: #767676; 1064 | } 1065 | h2 a:after { 1066 | content: '\F148'; 1067 | margin-left: 10px; 1068 | font-family: 'FontAwesome'; 1069 | } 1070 | .center { 1071 | text-align: center; 1072 | } 1073 | .center .line { 1074 | display: inline-block; 1075 | height: 1px; 1076 | width: 30px; 1077 | background-color: #BBB; 1078 | vertical-align: super; 1079 | margin: 0 10px; 1080 | } 1081 | .hint { 1082 | margin-right: 10px; 1083 | background-color: #FFE800; 1084 | border-radius: 100%; 1085 | width: 30px; 1086 | height: 30px; 1087 | text-align: center; 1088 | line-height: 30px; 1089 | } 1090 | pre { 1091 | margin: 0; 1092 | width: 100%; 1093 | white-space: normal; 1094 | } 1095 | code { 1096 | padding: 20px!important; 1097 | width: 100%; 1098 | } 1099 | #mainDemo { 1100 | width: 100%; 1101 | height: 500px; 1102 | } 1103 | a { 1104 | color: #3f7cac; 1105 | } 1106 | -------------------------------------------------------------------------------- /dist/doc.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["Datepickk"] = factory(); 8 | else 9 | root["Datepickk"] = factory(); 10 | })(this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // define getter function for harmony exports 47 | /******/ __webpack_require__.d = function(exports, name, getter) { 48 | /******/ if(!__webpack_require__.o(exports, name)) { 49 | /******/ Object.defineProperty(exports, name, { 50 | /******/ configurable: false, 51 | /******/ enumerable: true, 52 | /******/ get: getter 53 | /******/ }); 54 | /******/ } 55 | /******/ }; 56 | /******/ 57 | /******/ // getDefaultExport function for compatibility with non-harmony modules 58 | /******/ __webpack_require__.n = function(module) { 59 | /******/ var getter = module && module.__esModule ? 60 | /******/ function getDefault() { return module['default']; } : 61 | /******/ function getModuleExports() { return module; }; 62 | /******/ __webpack_require__.d(getter, 'a', getter); 63 | /******/ return getter; 64 | /******/ }; 65 | /******/ 66 | /******/ // Object.prototype.hasOwnProperty.call 67 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 68 | /******/ 69 | /******/ // __webpack_public_path__ 70 | /******/ __webpack_require__.p = ""; 71 | /******/ 72 | /******/ // Load entry module and return exports 73 | /******/ return __webpack_require__(__webpack_require__.s = 2); 74 | /******/ }) 75 | /************************************************************************/ 76 | /******/ ({ 77 | 78 | /***/ 2: 79 | /***/ (function(module, exports) { 80 | 81 | // removed by extract-text-webpack-plugin 82 | 83 | /***/ }) 84 | 85 | /******/ })["default"]; 86 | }); -------------------------------------------------------------------------------- /docs/_button.less: -------------------------------------------------------------------------------- 1 | @import '_colors.less'; 2 | @import '_variables.less'; 3 | 4 | button, 5 | a.button 6 | { 7 | font-family: inherit; 8 | font-size: 1.2rem; 9 | font-weight: 200; 10 | 11 | display: inline-block; 12 | 13 | padding: 1rem 1.5rem; 14 | 15 | cursor: pointer; 16 | transition: background .2s ease-out,opacity .2s ease-out; 17 | text-decoration: none; 18 | 19 | color: white; 20 | border: none; 21 | outline: none; 22 | background: @blue; 23 | 24 | @media(max-width: @mobile){ 25 | width:100%; 26 | text-align: center; 27 | 28 | & + button,& + a.button{ 29 | margin-top:@gutter/2; 30 | } 31 | } 32 | 33 | &[data-label]{ 34 | transition:all .2s ease-out; 35 | &:hover{ 36 | padding:0 2rem!important; 37 | 38 | &:before{ 39 | margin-right: 5px; 40 | } 41 | 42 | &:after{ 43 | content:attr(data-label); 44 | width:auto; 45 | } 46 | } 47 | } 48 | 49 | &:hover, 50 | &:active 51 | { 52 | text-decoration: none; 53 | 54 | color: white; 55 | background: lighten(@blue,10%); 56 | } 57 | 58 | &.big{ 59 | padding: 50px 0; 60 | text-align: center; 61 | 62 | i{ 63 | display: block; 64 | font-size: 10vw; 65 | padding-bottom:2rem; 66 | } 67 | } 68 | 69 | &.add{ 70 | .success(); 71 | &:before{ 72 | content: '\f067'; 73 | font-family: 'FontAwesome'; 74 | margin-right: .5rem; 75 | font-size: 1.2rem; 76 | 77 | } 78 | } 79 | 80 | &.check{ 81 | .success(); 82 | &:before{ 83 | content: '\f00c'; 84 | font-family: 'FontAwesome'; 85 | margin-right: .5rem; 86 | font-size: 1.2rem; 87 | } 88 | } 89 | 90 | &.save{ 91 | .success(); 92 | &:before{ 93 | content: '\f0c7'; 94 | font-family: 'FontAwesome'; 95 | margin-right: .5rem; 96 | font-size: 1.2rem; 97 | 98 | } 99 | } 100 | 101 | &.refresh{ 102 | &:before{ 103 | content: '\f021'; 104 | font-family: 'FontAwesome'; 105 | margin-right: .5rem; 106 | font-size: 1.2rem; 107 | 108 | } 109 | } 110 | 111 | &.view{ 112 | &:before{ 113 | content: '\f002'; 114 | font-family: 'FontAwesome'; 115 | margin-right: .5rem; 116 | font-size: 1.2rem; 117 | 118 | } 119 | } 120 | 121 | &.edit{ 122 | .warning(); 123 | &:before{ 124 | content: '\f040'; 125 | font-family: 'FontAwesome'; 126 | margin-right: .5rem; 127 | font-size: 1.2rem; 128 | 129 | } 130 | } 131 | 132 | &.disable{ 133 | .error(); 134 | &:before{ 135 | content: '\f05e'; 136 | font-family: 'FontAwesome'; 137 | margin-right: .5rem; 138 | font-size: 1.2rem; 139 | 140 | } 141 | } 142 | 143 | &.enable{ 144 | .warning(); 145 | &:before{ 146 | content: '\f00c'; 147 | font-family: 'FontAwesome'; 148 | margin-right: .5rem; 149 | font-size: 1.2rem; 150 | 151 | } 152 | } 153 | 154 | &.remove{ 155 | .error(); 156 | &:before{ 157 | content: '\f00d'; 158 | font-family: 'FontAwesome'; 159 | margin-right: .5rem; 160 | font-size: 1.2rem; 161 | 162 | } 163 | } 164 | 165 | 166 | 167 | &.success{ 168 | background:@green; 169 | 170 | &.invert{ 171 | color: @green; 172 | } 173 | 174 | &:hover,&:active{ 175 | background:lighten(@green,10%); 176 | } 177 | } 178 | 179 | &.warning{ 180 | background:@orange; 181 | 182 | &.invert{ 183 | color: @orange; 184 | } 185 | &:hover,&:active{ 186 | background:lighten(@orange,10%); 187 | } 188 | 189 | } 190 | 191 | &.error{ 192 | background:@red; 193 | 194 | &.invert{ 195 | color: @red; 196 | } 197 | &:hover,&:active{ 198 | background:lighten(@red,10%); 199 | } 200 | 201 | } 202 | 203 | &.invert{ 204 | background:transparent; 205 | 206 | &:hover{ 207 | color:white; 208 | } 209 | } 210 | 211 | &.full{ 212 | width: 100%; 213 | } 214 | 215 | &:empty:before{ 216 | margin-right:0; 217 | } 218 | } 219 | -------------------------------------------------------------------------------- /docs/_colors.less: -------------------------------------------------------------------------------- 1 | @blue: #3f7cac; 2 | @green: #3faa56; 3 | @orange: #E99C00; 4 | @red: #AA3F3F; 5 | @yellow: #ffff00; 6 | @darkgrey: #222; 7 | @grey: #767676; 8 | 9 | .bg-blue{ 10 | background:@blue; 11 | } 12 | 13 | .bg-blue-fade{ 14 | background: fade(@blue,40%); 15 | } 16 | 17 | .red{ 18 | background: @red!important; 19 | color:white!important; 20 | } 21 | 22 | .orange{ 23 | background: @orange!important; 24 | color:white!important; 25 | } 26 | 27 | .grey{ 28 | background: @grey!important; 29 | color:white!important; 30 | } 31 | 32 | .green{ 33 | background: @green!important; 34 | color:white!important; 35 | } 36 | 37 | .blue{ 38 | background: @blue!important; 39 | color:white!important; 40 | } 41 | 42 | .white{ 43 | background:white; 44 | } 45 | 46 | .darkgrey{ 47 | background: @darkgrey!important; 48 | color: white!important; 49 | } 50 | 51 | .transparent{ 52 | background:transparent!important; 53 | } -------------------------------------------------------------------------------- /docs/_grid.less: -------------------------------------------------------------------------------- 1 | @import "_variables.less"; 2 | 3 | /*Flex grid*/ 4 | .container{ 5 | padding:@gutter/2; 6 | } 7 | 8 | .align-end{ 9 | -webkit-align-self:flex-end; 10 | -ms-flex-item-align:end; 11 | align-self:flex-end; 12 | } 13 | 14 | .fullheight{ 15 | min-height: calc(100vh ~"-" 75px); 16 | } 17 | 18 | .row{ 19 | display:-webkit-box; 20 | display:-webkit-flex; 21 | display:-ms-flexbox; 22 | display:flex; 23 | -webkit-box-orient:horizontal; 24 | -webkit-box-direction:normal; 25 | -webkit-flex-direction:row; 26 | -ms-flex-direction:row; 27 | flex-direction:row; 28 | -webkit-flex-wrap:wrap; 29 | -ms-flex-wrap:wrap; 30 | flex-wrap:wrap; 31 | -webkit-box-pack:start; 32 | -webkit-justify-content:flex-start; 33 | -ms-flex-pack:start; 34 | justify-content:flex-start; 35 | -webkit-box-align: start; 36 | -webkit-align-items: flex-start; 37 | -ms-flex-align: start; 38 | align-items: flex-start; 39 | &.auto-fill{ 40 | & > [class*="col-"]{ 41 | -webkit-box-flex: 1; 42 | -webkit-flex-grow: 1; 43 | -ms-flex-positive: 1; 44 | flex-grow: 1; 45 | } 46 | } 47 | } 48 | 49 | .title{ 50 | -webkit-flex-basis: 100%; 51 | -ms-flex-preferred-size: 100%; 52 | flex-basis: 100%; 53 | margin: @gutter 0; 54 | } 55 | 56 | .block{ 57 | box-shadow: 0px 2px 10px -4px rgba(0, 0, 0, 0.3); 58 | } 59 | 60 | [class*="col-"]{ 61 | 62 | -webkit-flex-basis:100%; 63 | -ms-flex-preferred-size:100%; 64 | flex-basis:100%; 65 | -webkit-box-ordinal-group:1000; 66 | -webkit-order:999; 67 | -ms-flex-order:999; 68 | order:999; 69 | display: -webkit-box; 70 | display: -webkit-flex; 71 | display: -ms-flexbox; 72 | display: flex; 73 | -webkit-flex-wrap:wrap; 74 | -ms-flex-wrap:wrap; 75 | flex-wrap:wrap; 76 | -webkit-box-pack:start; 77 | -webkit-justify-content:flex-start; 78 | -ms-flex-pack:start; 79 | justify-content:flex-start; 80 | -webkit-box-align: start; 81 | -webkit-align-items: flex-start; 82 | -ms-flex-align: start; 83 | align-items: flex-start; 84 | -webkit-box-orient:vertical; 85 | -webkit-box-direction:normal; 86 | -webkit-flex-direction:row; 87 | -ms-flex-direction:row; 88 | flex-direction:row; 89 | 90 | -webkit-align-content: flex-start; 91 | -ms-flex-line-pack: start; 92 | align-content: flex-start; 93 | 94 | transition: flex-basis .1s ease; 95 | -webkit-transition: -webkit-flex-basis .1s ease; 96 | -ms-transition: -ms-flex-basis .1s ease; 97 | 98 | &.block{ 99 | padding:@gutter; 100 | background:white; 101 | margin: @gutter/2; 102 | 103 | &.transparent{ 104 | box-shadow: none; 105 | } 106 | } 107 | 108 | &.align-center{ 109 | -webkit-box-pack: center; 110 | -webkit-justify-content: center; 111 | -ms-flex-pack: center; 112 | justify-content: center; 113 | } 114 | 115 | h1,h2{ 116 | margin-top:0; 117 | margin-bottom:@gutter; 118 | } 119 | 120 | &.nested{ 121 | padding: @gutter/2; 122 | } 123 | 124 | &:empty{ 125 | min-height: 250px; 126 | } 127 | 128 | &.orderTop{ 129 | -webkit-box-ordinal-group:2; 130 | -webkit-order:1; 131 | -ms-flex-order:1; 132 | order:1; 133 | } 134 | 135 | .align-bottom{ 136 | margin-top:auto; 137 | } 138 | .align-right{ 139 | margin-left: auto; 140 | } 141 | 142 | .title{ 143 | margin-top:0; 144 | } 145 | 146 | [class*="col-"]{ 147 | padding:@gutter/2; 148 | } 149 | 150 | &.nopadding{ 151 | padding:0; 152 | } 153 | } 154 | 155 | .align-middle{ 156 | -webkit-box-align: center; 157 | -webkit-align-items: center; 158 | -ms-flex-align: center; 159 | align-items: center; 160 | } 161 | 162 | .equal-height{ 163 | -webkit-box-align:stretch; 164 | -webkit-align-items:stretch; 165 | -ms-flex-align:stretch; 166 | align-items:stretch; 167 | } 168 | .align-center{ 169 | -webkit-box-pack: center; 170 | -webkit-justify-content: center; 171 | -ms-flex-pack: center; 172 | justify-content: center; 173 | } 174 | .align-end{ 175 | -webkit-box-pack: end; 176 | -webkit-justify-content: flex-end; 177 | -ms-flex-pack: end; 178 | justify-content: flex-end; 179 | } 180 | .column{ 181 | -webkit-box-orient: vertical; 182 | -webkit-box-direction: normal; 183 | -webkit-flex-direction: column; 184 | -ms-flex-direction: column; 185 | flex-direction: column; 186 | } 187 | 188 | .generate-columns(xs); 189 | 190 | @media (min-width: @small) { 191 | .generate-columns(sm); 192 | } 193 | @media (min-width: @medium) { 194 | .generate-columns(md); 195 | } 196 | @media (min-width: @large) { 197 | .generate-columns(lg); 198 | } 199 | 200 | 201 | .generate-columns(@s,@n: 12,@i:1) when (@i =< @n){ 202 | .col-@{s}-@{i}{ 203 | -webkit-flex-basis: (@i * 100% / @n); 204 | -ms-flex-preferred-size: (@i * 100% / @n); 205 | flex-basis: (@i * 100% / @n); 206 | &.block{ 207 | -webkit-flex-basis: calc((@i * 100% / @n) ~"-" @gutter); 208 | flex-basis: calc((@i * 100% / @n) ~"-" @gutter); 209 | -ms-flex-preferred-size: calc((@i * 100% / @n) ~"-" @gutter*3); 210 | } 211 | } 212 | .generate-columns(@s,@n,(@i + 1)); 213 | } -------------------------------------------------------------------------------- /docs/_variables.less: -------------------------------------------------------------------------------- 1 | @gutter: 15px; 2 | @background: #E0E0E0; 3 | 4 | /*Font variables*/ 5 | @font-family: 'Raleway'; 6 | @font-size:16px; 7 | @font-color: #666666; 8 | 9 | /*Grid variables*/ 10 | @large: 1200px; 11 | @medium: 992px; 12 | @small: 600px; 13 | @mobile: 375px; -------------------------------------------------------------------------------- /docs/demo.js: -------------------------------------------------------------------------------- 1 | var allInternalLinks = document.querySelectorAll('[href^="#"]'); 2 | 3 | for(var m = 0; m < allInternalLinks.length;m++){ 4 | allInternalLinks[m].addEventListener('click',function(e){ 5 | e.preventDefault(); 6 | SmoothScroll(this.getAttribute('href')); 7 | }); 8 | } 9 | 10 | function SmoothScroll(target){ 11 | target = (typeof target === 'object')?target:document.querySelector(target); 12 | if(!target)return; 13 | var requestAnimationFrame = window.requestAnimationFrame || 14 | window.mozRequestAnimationFrame || 15 | window.webkitRequestAnimationFrame || 16 | window.msRequestAnimationFrame; 17 | var _iteration = 0; 18 | var _scrollPosition = window.pageYOffset; 19 | var _finalPosition = target.getBoundingClientRect().top - 95; 20 | var _maxIterations = 50; 21 | 22 | ScrollAnimationLoop(); 23 | 24 | 25 | function ScrollAnimationLoop(){ 26 | window.scrollTo(0,easeOutCubic(_iteration,_scrollPosition,_finalPosition,_maxIterations)); 27 | 28 | _iteration++; 29 | 30 | if(_iteration <= _maxIterations){ 31 | requestAnimationFrame(function(){ 32 | ScrollAnimationLoop(); 33 | }); 34 | } 35 | } 36 | 37 | function easeOutCubic(currentIteration, startValue, changeInValue, totalIterations) { 38 | return changeInValue * (Math.pow(currentIteration / totalIterations - 1, 3) + 1) + startValue; 39 | } 40 | } -------------------------------------------------------------------------------- /docs/doc.less: -------------------------------------------------------------------------------- 1 | @import "_grid.less"; 2 | @import "_colors.less"; 3 | @import "_button.less"; 4 | @import "_variables.less"; 5 | 6 | @main: #D55C2B; 7 | 8 | *{ 9 | box-sizing:border-box; 10 | -webkit-tap-highlight-color: rgba(0,0,0,0); 11 | } 12 | 13 | body{ 14 | font-family: 'Raleway'; 15 | margin:80px 0 0 0; 16 | padding:0; 17 | background-color: #eaeaea; 18 | } 19 | 20 | ul{ 21 | margin:0; 22 | padding:0; 23 | list-style: none; 24 | 25 | li{ 26 | padding: @gutter/2 0; 27 | 28 | &:before{ 29 | content: '\f1db'; 30 | opacity: .4; 31 | margin-right: 10px; 32 | font-family: 'FontAwesome'; 33 | } 34 | } 35 | } 36 | 37 | .nav{ 38 | display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; 39 | -webkit-box-pack: justify; 40 | -webkit-justify-content: space-between; 41 | -ms-flex-pack: justify; 42 | justify-content: space-between; 43 | -webkit-box-align: center; 44 | -webkit-align-items: center; 45 | -ms-flex-align: center; 46 | align-items: center; 47 | position: fixed; 48 | z-index: 10; 49 | background-color: white; 50 | height: 80px; 51 | width: 100%; 52 | top:0; 53 | left: 0; 54 | padding:0 20px; 55 | box-shadow: 0 2px 5px -2px rgba(0,0,0,0.4); 56 | 57 | h1{ 58 | color:#222; 59 | width:auto; 60 | display: inline; 61 | 62 | span{ 63 | color: fade(#222,50%); 64 | font-size: .6em; 65 | } 66 | } 67 | 68 | p{ 69 | color:#A9A9A9; 70 | } 71 | } 72 | 73 | button{ 74 | span{ 75 | font-size: .7em; 76 | display: block; 77 | font-style: italic; 78 | } 79 | } 80 | 81 | #browsers{ 82 | i{ 83 | text-align: center; 84 | font-size: 40px; 85 | color:#959595; 86 | } 87 | 88 | p{ 89 | width: 100%; 90 | text-align: center; 91 | font-weight: 500; 92 | color: #959595; 93 | font-size: 20px; 94 | } 95 | } 96 | 97 | h1,h2{ 98 | width: 100%; 99 | } 100 | 101 | h2{ 102 | span{ 103 | color: @blue; 104 | font-size: .7em; 105 | font-style: italic; 106 | 107 | &:before{ 108 | content: '\f121'; 109 | margin-right: 5px; 110 | font-family: 'FontAwesome'; 111 | } 112 | } 113 | 114 | a{ 115 | font-size: .8em; 116 | float: right; 117 | text-decoration: none; 118 | color: @grey; 119 | 120 | &:after{ 121 | content: '\f148'; 122 | margin-left: 10px; 123 | font-family: 'FontAwesome'; 124 | } 125 | } 126 | } 127 | 128 | .center{ 129 | text-align: center; 130 | 131 | .line{ 132 | display: inline-block; 133 | height: 1px; 134 | width: 30px; 135 | background-color: #BBB; 136 | vertical-align: super; 137 | margin: 0 10px; 138 | } 139 | } 140 | 141 | .hint{ 142 | margin-right: 10px; 143 | background-color: #FFE800; 144 | border-radius: 100%; 145 | width: 30px; 146 | height: 30px; 147 | text-align: center; 148 | line-height: 30px; 149 | } 150 | 151 | pre{ 152 | margin: 0; 153 | width: 100%; 154 | white-space: normal; 155 | } 156 | 157 | code{ 158 | padding: 20px!important; 159 | width: 100%; 160 | } 161 | 162 | #mainDemo{ 163 | width: 100%; 164 | height: 500px; 165 | } 166 | 167 | a{ 168 | color:@blue; 169 | } 170 | -------------------------------------------------------------------------------- /docs/doc.min.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300);@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);.container{padding:7.5px}.align-end{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.fullheight{min-height:calc(100vh - 75px)}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.row.auto-fill>[class*="col-"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.title{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;margin:15px 0}.block{box-shadow:0 2px 10px -4px rgba(0,0,0,0.3)}[class*="col-"]{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;-webkit-box-ordinal-group:1000;-webkit-order:999;-ms-flex-order:999;order:999;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;transition:flex-basis .1s ease;-webkit-transition:-webkit-flex-basis .1s ease;-ms-transition:-ms-flex-basis .1s ease}[class*="col-"].block{padding:15px;background:#fff;margin:7.5px}[class*="col-"].block.transparent{box-shadow:none}[class*="col-"].align-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}[class*="col-"] h1,[class*="col-"] h2{margin-top:0;margin-bottom:15px}[class*="col-"].nested{padding:7.5px}[class*="col-"]:empty{min-height:250px}[class*="col-"].orderTop{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}[class*="col-"] .align-bottom{margin-top:auto}[class*="col-"] .align-right{margin-left:auto}[class*="col-"] .title{margin-top:0}[class*="col-"] [class*="col-"]{padding:7.5px}[class*="col-"].nopadding{padding:0}.align-middle{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.equal-height{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.align-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.align-end{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.col-xs-1{-webkit-flex-basis:8.33333333%;-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%}.col-xs-1.block{-webkit-flex-basis:calc(8.33333333% - 15px);flex-basis:calc(8.33333333% - 15px);-ms-flex-preferred-size:calc(8.33333333% - 45px)}.col-xs-2{-webkit-flex-basis:16.66666667%;-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%}.col-xs-2.block{-webkit-flex-basis:calc(16.66666667% - 15px);flex-basis:calc(16.66666667% - 15px);-ms-flex-preferred-size:calc(16.66666667% - 45px)}.col-xs-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%}.col-xs-3.block{-webkit-flex-basis:calc(25% - 15px);flex-basis:calc(25% - 15px);-ms-flex-preferred-size:calc(25% - 45px)}.col-xs-4{-webkit-flex-basis:33.33333333%;-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%}.col-xs-4.block{-webkit-flex-basis:calc(33.33333333% - 15px);flex-basis:calc(33.33333333% - 15px);-ms-flex-preferred-size:calc(33.33333333% - 45px)}.col-xs-5{-webkit-flex-basis:41.66666667%;-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%}.col-xs-5.block{-webkit-flex-basis:calc(41.66666667% - 15px);flex-basis:calc(41.66666667% - 15px);-ms-flex-preferred-size:calc(41.66666667% - 45px)}.col-xs-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%}.col-xs-6.block{-webkit-flex-basis:calc(50% - 15px);flex-basis:calc(50% - 15px);-ms-flex-preferred-size:calc(50% - 45px)}.col-xs-7{-webkit-flex-basis:58.33333333%;-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%}.col-xs-7.block{-webkit-flex-basis:calc(58.33333333% - 15px);flex-basis:calc(58.33333333% - 15px);-ms-flex-preferred-size:calc(58.33333333% - 45px)}.col-xs-8{-webkit-flex-basis:66.66666667%;-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%}.col-xs-8.block{-webkit-flex-basis:calc(66.66666667% - 15px);flex-basis:calc(66.66666667% - 15px);-ms-flex-preferred-size:calc(66.66666667% - 45px)}.col-xs-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%}.col-xs-9.block{-webkit-flex-basis:calc(75% - 15px);flex-basis:calc(75% - 15px);-ms-flex-preferred-size:calc(75% - 45px)}.col-xs-10{-webkit-flex-basis:83.33333333%;-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%}.col-xs-10.block{-webkit-flex-basis:calc(83.33333333% - 15px);flex-basis:calc(83.33333333% - 15px);-ms-flex-preferred-size:calc(83.33333333% - 45px)}.col-xs-11{-webkit-flex-basis:91.66666667%;-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%}.col-xs-11.block{-webkit-flex-basis:calc(91.66666667% - 15px);flex-basis:calc(91.66666667% - 15px);-ms-flex-preferred-size:calc(91.66666667% - 45px)}.col-xs-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%}.col-xs-12.block{-webkit-flex-basis:calc(100% - 15px);flex-basis:calc(100% - 15px);-ms-flex-preferred-size:calc(100% - 45px)}@media (min-width:600px){.col-sm-1{-webkit-flex-basis:8.33333333%;-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%}.col-sm-1.block{-webkit-flex-basis:calc(8.33333333% - 15px);flex-basis:calc(8.33333333% - 15px);-ms-flex-preferred-size:calc(8.33333333% - 45px)}.col-sm-2{-webkit-flex-basis:16.66666667%;-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%}.col-sm-2.block{-webkit-flex-basis:calc(16.66666667% - 15px);flex-basis:calc(16.66666667% - 15px);-ms-flex-preferred-size:calc(16.66666667% - 45px)}.col-sm-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%}.col-sm-3.block{-webkit-flex-basis:calc(25% - 15px);flex-basis:calc(25% - 15px);-ms-flex-preferred-size:calc(25% - 45px)}.col-sm-4{-webkit-flex-basis:33.33333333%;-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%}.col-sm-4.block{-webkit-flex-basis:calc(33.33333333% - 15px);flex-basis:calc(33.33333333% - 15px);-ms-flex-preferred-size:calc(33.33333333% - 45px)}.col-sm-5{-webkit-flex-basis:41.66666667%;-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%}.col-sm-5.block{-webkit-flex-basis:calc(41.66666667% - 15px);flex-basis:calc(41.66666667% - 15px);-ms-flex-preferred-size:calc(41.66666667% - 45px)}.col-sm-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%}.col-sm-6.block{-webkit-flex-basis:calc(50% - 15px);flex-basis:calc(50% - 15px);-ms-flex-preferred-size:calc(50% - 45px)}.col-sm-7{-webkit-flex-basis:58.33333333%;-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%}.col-sm-7.block{-webkit-flex-basis:calc(58.33333333% - 15px);flex-basis:calc(58.33333333% - 15px);-ms-flex-preferred-size:calc(58.33333333% - 45px)}.col-sm-8{-webkit-flex-basis:66.66666667%;-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%}.col-sm-8.block{-webkit-flex-basis:calc(66.66666667% - 15px);flex-basis:calc(66.66666667% - 15px);-ms-flex-preferred-size:calc(66.66666667% - 45px)}.col-sm-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%}.col-sm-9.block{-webkit-flex-basis:calc(75% - 15px);flex-basis:calc(75% - 15px);-ms-flex-preferred-size:calc(75% - 45px)}.col-sm-10{-webkit-flex-basis:83.33333333%;-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%}.col-sm-10.block{-webkit-flex-basis:calc(83.33333333% - 15px);flex-basis:calc(83.33333333% - 15px);-ms-flex-preferred-size:calc(83.33333333% - 45px)}.col-sm-11{-webkit-flex-basis:91.66666667%;-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%}.col-sm-11.block{-webkit-flex-basis:calc(91.66666667% - 15px);flex-basis:calc(91.66666667% - 15px);-ms-flex-preferred-size:calc(91.66666667% - 45px)}.col-sm-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%}.col-sm-12.block{-webkit-flex-basis:calc(100% - 15px);flex-basis:calc(100% - 15px);-ms-flex-preferred-size:calc(100% - 45px)}}@media (min-width:992px){.col-md-1{-webkit-flex-basis:8.33333333%;-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%}.col-md-1.block{-webkit-flex-basis:calc(8.33333333% - 15px);flex-basis:calc(8.33333333% - 15px);-ms-flex-preferred-size:calc(8.33333333% - 45px)}.col-md-2{-webkit-flex-basis:16.66666667%;-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%}.col-md-2.block{-webkit-flex-basis:calc(16.66666667% - 15px);flex-basis:calc(16.66666667% - 15px);-ms-flex-preferred-size:calc(16.66666667% - 45px)}.col-md-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%}.col-md-3.block{-webkit-flex-basis:calc(25% - 15px);flex-basis:calc(25% - 15px);-ms-flex-preferred-size:calc(25% - 45px)}.col-md-4{-webkit-flex-basis:33.33333333%;-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%}.col-md-4.block{-webkit-flex-basis:calc(33.33333333% - 15px);flex-basis:calc(33.33333333% - 15px);-ms-flex-preferred-size:calc(33.33333333% - 45px)}.col-md-5{-webkit-flex-basis:41.66666667%;-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%}.col-md-5.block{-webkit-flex-basis:calc(41.66666667% - 15px);flex-basis:calc(41.66666667% - 15px);-ms-flex-preferred-size:calc(41.66666667% - 45px)}.col-md-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%}.col-md-6.block{-webkit-flex-basis:calc(50% - 15px);flex-basis:calc(50% - 15px);-ms-flex-preferred-size:calc(50% - 45px)}.col-md-7{-webkit-flex-basis:58.33333333%;-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%}.col-md-7.block{-webkit-flex-basis:calc(58.33333333% - 15px);flex-basis:calc(58.33333333% - 15px);-ms-flex-preferred-size:calc(58.33333333% - 45px)}.col-md-8{-webkit-flex-basis:66.66666667%;-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%}.col-md-8.block{-webkit-flex-basis:calc(66.66666667% - 15px);flex-basis:calc(66.66666667% - 15px);-ms-flex-preferred-size:calc(66.66666667% - 45px)}.col-md-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%}.col-md-9.block{-webkit-flex-basis:calc(75% - 15px);flex-basis:calc(75% - 15px);-ms-flex-preferred-size:calc(75% - 45px)}.col-md-10{-webkit-flex-basis:83.33333333%;-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%}.col-md-10.block{-webkit-flex-basis:calc(83.33333333% - 15px);flex-basis:calc(83.33333333% - 15px);-ms-flex-preferred-size:calc(83.33333333% - 45px)}.col-md-11{-webkit-flex-basis:91.66666667%;-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%}.col-md-11.block{-webkit-flex-basis:calc(91.66666667% - 15px);flex-basis:calc(91.66666667% - 15px);-ms-flex-preferred-size:calc(91.66666667% - 45px)}.col-md-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%}.col-md-12.block{-webkit-flex-basis:calc(100% - 15px);flex-basis:calc(100% - 15px);-ms-flex-preferred-size:calc(100% - 45px)}}@media (min-width:1200px){.col-lg-1{-webkit-flex-basis:8.33333333%;-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%}.col-lg-1.block{-webkit-flex-basis:calc(8.33333333% - 15px);flex-basis:calc(8.33333333% - 15px);-ms-flex-preferred-size:calc(8.33333333% - 45px)}.col-lg-2{-webkit-flex-basis:16.66666667%;-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%}.col-lg-2.block{-webkit-flex-basis:calc(16.66666667% - 15px);flex-basis:calc(16.66666667% - 15px);-ms-flex-preferred-size:calc(16.66666667% - 45px)}.col-lg-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%}.col-lg-3.block{-webkit-flex-basis:calc(25% - 15px);flex-basis:calc(25% - 15px);-ms-flex-preferred-size:calc(25% - 45px)}.col-lg-4{-webkit-flex-basis:33.33333333%;-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%}.col-lg-4.block{-webkit-flex-basis:calc(33.33333333% - 15px);flex-basis:calc(33.33333333% - 15px);-ms-flex-preferred-size:calc(33.33333333% - 45px)}.col-lg-5{-webkit-flex-basis:41.66666667%;-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%}.col-lg-5.block{-webkit-flex-basis:calc(41.66666667% - 15px);flex-basis:calc(41.66666667% - 15px);-ms-flex-preferred-size:calc(41.66666667% - 45px)}.col-lg-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%}.col-lg-6.block{-webkit-flex-basis:calc(50% - 15px);flex-basis:calc(50% - 15px);-ms-flex-preferred-size:calc(50% - 45px)}.col-lg-7{-webkit-flex-basis:58.33333333%;-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%}.col-lg-7.block{-webkit-flex-basis:calc(58.33333333% - 15px);flex-basis:calc(58.33333333% - 15px);-ms-flex-preferred-size:calc(58.33333333% - 45px)}.col-lg-8{-webkit-flex-basis:66.66666667%;-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%}.col-lg-8.block{-webkit-flex-basis:calc(66.66666667% - 15px);flex-basis:calc(66.66666667% - 15px);-ms-flex-preferred-size:calc(66.66666667% - 45px)}.col-lg-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%}.col-lg-9.block{-webkit-flex-basis:calc(75% - 15px);flex-basis:calc(75% - 15px);-ms-flex-preferred-size:calc(75% - 45px)}.col-lg-10{-webkit-flex-basis:83.33333333%;-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%}.col-lg-10.block{-webkit-flex-basis:calc(83.33333333% - 15px);flex-basis:calc(83.33333333% - 15px);-ms-flex-preferred-size:calc(83.33333333% - 45px)}.col-lg-11{-webkit-flex-basis:91.66666667%;-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%}.col-lg-11.block{-webkit-flex-basis:calc(91.66666667% - 15px);flex-basis:calc(91.66666667% - 15px);-ms-flex-preferred-size:calc(91.66666667% - 45px)}.col-lg-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%}.col-lg-12.block{-webkit-flex-basis:calc(100% - 15px);flex-basis:calc(100% - 15px);-ms-flex-preferred-size:calc(100% - 45px)}}.bg-blue{background:#3f7cac}.bg-blue-fade{background:rgba(63,124,172,0.4)}.red{background:#aa3f3f !important;color:#fff !important}.orange{background:#e99c00 !important;color:#fff !important}.grey{background:#767676 !important;color:#fff !important}.green{background:#3faa56 !important;color:#fff !important}.blue{background:#3f7cac !important;color:#fff !important}.white{background:#fff}.darkgrey{background:#222 !important;color:#fff !important}.transparent{background:transparent !important}button,a.button{font-family:inherit;font-size:1.2rem;font-weight:200;display:inline-block;padding:1rem 1.5rem;cursor:pointer;transition:background .2s ease-out,opacity .2s ease-out;text-decoration:none;color:#fff;border:none;outline:none;background:#3f7cac}@media (max-width:375px){button,a.button{width:100%;text-align:center}button+button,a.button+button,button+a.button,a.button+a.button{margin-top:7.5px}}button[data-label],a.button[data-label]{transition:all .2s ease-out}button[data-label]:hover,a.button[data-label]:hover{padding:0 2rem !important}button[data-label]:hover:before,a.button[data-label]:hover:before{margin-right:5px}button[data-label]:hover:after,a.button[data-label]:hover:after{content:attr(data-label);width:auto}button:hover,a.button:hover,button:active,a.button:active{text-decoration:none;color:#fff;background:#5b95c3}button.big,a.button.big{padding:50px 0;text-align:center}button.big i,a.button.big i{display:block;font-size:10vw;padding-bottom:2rem}button.add,a.button.add{background:#3faa56}button.add.invert,a.button.add.invert{color:#3faa56}button.add:hover,a.button.add:hover,button.add:active,a.button.add:active{background:#5ac270}button.add:before,a.button.add:before{content:'\f067';font-family:'FontAwesome';margin-right:.5rem;font-size:1.2rem}button.check,a.button.check{background:#3faa56}button.check.invert,a.button.check.invert{color:#3faa56}button.check:hover,a.button.check:hover,button.check:active,a.button.check:active{background:#5ac270}button.check:before,a.button.check:before{content:'\f00c';font-family:'FontAwesome';margin-right:.5rem;font-size:1.2rem}button.save,a.button.save{background:#3faa56}button.save.invert,a.button.save.invert{color:#3faa56}button.save:hover,a.button.save:hover,button.save:active,a.button.save:active{background:#5ac270}button.save:before,a.button.save:before{content:'\f0c7';font-family:'FontAwesome';margin-right:.5rem;font-size:1.2rem}button.refresh:before,a.button.refresh:before{content:'\f021';font-family:'FontAwesome';margin-right:.5rem;font-size:1.2rem}button.view:before,a.button.view:before{content:'\f002';font-family:'FontAwesome';margin-right:.5rem;font-size:1.2rem}button.edit,a.button.edit{background:#e99c00}button.edit.invert,a.button.edit.invert{color:#e99c00}button.edit:hover,a.button.edit:hover,button.edit:active,a.button.edit:active{background:#ffb41d}button.edit:before,a.button.edit:before{content:'\f040';font-family:'FontAwesome';margin-right:.5rem;font-size:1.2rem}button.disable,a.button.disable{background:#aa3f3f}button.disable.invert,a.button.disable.invert{color:#aa3f3f}button.disable:hover,a.button.disable:hover,button.disable:active,a.button.disable:active{background:#c25a5a}button.disable:before,a.button.disable:before{content:'\f05e';font-family:'FontAwesome';margin-right:.5rem;font-size:1.2rem}button.enable,a.button.enable{background:#e99c00}button.enable.invert,a.button.enable.invert{color:#e99c00}button.enable:hover,a.button.enable:hover,button.enable:active,a.button.enable:active{background:#ffb41d}button.enable:before,a.button.enable:before{content:'\f00c';font-family:'FontAwesome';margin-right:.5rem;font-size:1.2rem}button.remove,a.button.remove{background:#aa3f3f}button.remove.invert,a.button.remove.invert{color:#aa3f3f}button.remove:hover,a.button.remove:hover,button.remove:active,a.button.remove:active{background:#c25a5a}button.remove:before,a.button.remove:before{content:'\f00d';font-family:'FontAwesome';margin-right:.5rem;font-size:1.2rem}button.success,a.button.success{background:#3faa56}button.success.invert,a.button.success.invert{color:#3faa56}button.success:hover,a.button.success:hover,button.success:active,a.button.success:active{background:#5ac270}button.warning,a.button.warning{background:#e99c00}button.warning.invert,a.button.warning.invert{color:#e99c00}button.warning:hover,a.button.warning:hover,button.warning:active,a.button.warning:active{background:#ffb41d}button.error,a.button.error{background:#aa3f3f}button.error.invert,a.button.error.invert{color:#aa3f3f}button.error:hover,a.button.error:hover,button.error:active,a.button.error:active{background:#c25a5a}button.invert,a.button.invert{background:transparent}button.invert:hover,a.button.invert:hover{color:#fff}button.full,a.button.full{width:100%}button:empty:before,a.button:empty:before{margin-right:0}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:'Raleway';margin:80px 0 0 0;padding:0;background-color:#eaeaea}ul{margin:0;padding:0;list-style:none}ul li{padding:7.5px 0}ul li:before{content:'\f1db';opacity:.4;margin-right:10px;font-family:'FontAwesome'}.nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:fixed;z-index:10;background-color:#fff;height:80px;width:100%;top:0;left::0;padding:0 20px;box-shadow:0 2px 5px -2px rgba(0,0,0,0.4)}.nav h1{color:#222;width:auto;display:inline}.nav h1 span{color:rgba(34,34,34,0.5);font-size:.6em}.nav p{color:#a9a9a9}button span{font-size:.7em;display:block;font-style:italic}#browsers i{text-align:center;font-size:40px;color:#959595}#browsers p{width:100%;text-align:center;font-weight:500;color:#959595;font-size:20px}h1,h2{width:100%}h2 span{color:#3f7cac;font-size:.7em;font-style:italic}h2 span:before{content:'\f121';margin-right:5px;font-family:'FontAwesome'}h2 a{font-size:.8em;float:right;text-decoration:none;color:#767676}h2 a:after{content:'\f148';margin-left:10px;font-family:'FontAwesome'}.center{text-align:center}.center .line{display:inline-block;height:1px;width:30px;background-color:#bbb;vertical-align:super;margin:0 10px}.hint{margin-right:10px;background-color:#ffe800;border-radius:100%;width:30px;height:30px;text-align:center;line-height:30px}pre{margin:0;width:100%;white-space:normal}code{padding:20px !important;width:100%}#mainDemo{width:100%;height:500px}a{color:#3f7cac} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Datepickk - Documentation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Datepickk . js

18 |

Made with by Carsten J.

19 | Star 20 |
21 | 22 |
23 |
24 |

Get started

25 |
26 | 
  27 | 					
  28 | 						npm install datepickk

  29 | 					
  30 |
31 |
32 | 33 |
34 | or 35 |
36 | 37 |
38 | 
  39 | 					
  40 | 						bower install datepickk

  41 | 					
  42 |
43 |
44 | 45 |
46 | 
  47 | 					
  48 | 						//Initialize

  49 | 						var datepicker = new Datepickk();

  50 | 						/*And some more stuff down there...*/
  51 | 					
  52 |
53 | 56 |
57 |
58 | 59 |
60 |
61 |

or

62 |
63 |
64 |
65 | 84 |
85 |
86 | 87 |
88 |
89 | 90 |

31 +

91 |
92 |
93 | 94 |

31 +

95 |
96 |
97 | 98 |

10 +

99 |
100 |
101 | 102 |

Not tested yet

103 |
104 |
105 | 106 |
107 |
108 |

Settings

109 | 135 |
136 |
137 |

Status

138 | 142 |
143 |
144 |

Functions

145 | 152 |
153 |
154 |

Callbacks

155 | 161 |
162 |
163 | 164 |

Take a tour

165 | 166 |
167 | 168 |
169 |

startDate Setting Go up

170 | 
 171 | 					
 172 | 						//Type: Date

 173 | 						//Default: null -> takes current date

 174 | 						//Reset: assign non date object to reset default


 175 | 						/*Set startDate*/

 176 | 						datepicker.startDate = new Date(2000,0,1);


 177 | 						/*Get startDate*/

 178 | 						console.log(datepicker.startDate);
 179 | 					
 180 |
181 | 182 |

Each time you show the calendar this date will show up!

183 | 195 |
196 | 197 |
198 |

minDate Setting Go up

199 | 
 200 | 					
 201 | 						//Type: Date

 202 | 						//Default: null -> no limit

 203 | 						//Reset: assign non date object to reset default


 204 | 						/*Set minDate*/

 205 | 						datepicker.minDate = new Date(2015,0,1);


 206 | 						/*Get minDate*/

 207 | 						console.log(datepicker.minDate);
 208 | 					
 209 |
210 | 211 | 225 |
226 | 227 |
228 |

maxDate Setting Go up

229 | 
 230 | 					
 231 | 						//Type: Date

 232 | 						//Default: null -> no limit

 233 | 						//Reset: assign non date object to reset default


 234 | 						/*Set maxDate*/

 235 | 						datepicker.maxDate = new Date(2015,11,31);


 236 | 						/*Get maxDate*/

 237 | 						console.log(datepicker.maxDate);
 238 | 					
 239 |
240 | 241 | 255 |
256 | 257 |
258 |

currentDate | setDate (alias) Setting Go up

259 | 
 260 | 					
 261 | 						//Type: Date

 262 | 						//Default: current date


 263 | 						/*Set currentDate*/

 264 | 						datepicker.currentDate = new Date(2015,3,1);

 265 | 						//OR

 266 | 						datepicker.setDate = new Date(2015,3,1)


 267 | 						/*Get currentDate*/

 268 | 						console.log(datepicker.currentDate);
 269 | 					
 270 |
271 | 272 |

Use me to jump to spesific dates

273 | 281 |
282 | 283 |
284 |

maxSelections Setting Go up

285 | 
 286 | 					
 287 | 						//Type: Number

 288 | 						//Default: null -> infinite

 289 | 						//Reset: assign non number object to reset default


 290 | 						/*Set maxSelections*/

 291 | 						datepicker.maxSelections = 3;


 292 | 						/*Get maxSelections*/

 293 | 						console.log(datepicker.maxSelections);
 294 | 					
 295 |
296 | 297 |

If you don't want to let the user select anyting you should use locked instead. Check it out

298 | 310 |
311 | 312 |
313 |

months Setting Go up

314 |

315 | If you need to show multiple months at once this feature is perfect for you! 316 |

317 | 
 318 | 					
 319 | 						//Type: Number (must be > 0)

 320 | 						//Default: 1


 321 | 						/*Set maxSelections*/

 322 | 						datepicker.months = 2;


 323 | 						/*Get months*/

 324 | 						console.log(datepicker.months);
 325 | 					
 326 |
327 | 328 |

Showing multiple months at once needs much space! Be careful, the pretty looking datepicker might get ulgy

329 | 341 |
342 | 343 |
344 |

title Setting Go up

345 | 
 346 | 					
 347 | 						//Type: String

 348 | 						//Default: null

 349 | 						//Reset: assign non string object to reset default


 350 | 						/*Set title*/

 351 | 						datepicker.title = 'Choose date:';


 352 | 						/*Get title*/

 353 | 						console.log(datepicker.title);
 354 | 					
 355 |
356 | 357 | 369 |
370 | 371 |
372 |

button Setting Go up

373 | 
 374 | 					
 375 | 						//Type: String

 376 | 						//Default: null

 377 | 						//Reset: assign non string object to reset default


 378 | 						/*Set button*/

 379 | 						datepicker.button = 'OK';


 380 | 						/*Get button*/

 381 | 						console.log(datepicker.button);
 382 | 					
 383 |
384 | 385 | 397 |
398 | 399 |
400 |

lang Setting Go up

401 |

402 | You can change the language and the day the week starts by changing the lang property.
403 | By default there are 5 languages: English (en), Norwegian (no), German (de), Swedish (se), Russian (ru).
404 | Add your own languages to the 'languages' property in the source code. 405 |

406 | 
 407 | 					
 408 | 						//Type: String

 409 | 						//Default: 'en'


 410 | 						/*Set lang*/

 411 | 						datepicker.lang = 'no';


 412 | 						/*Get lang*/

 413 | 						console.log(datepicker.lang);
 414 | 					
 415 |
416 | 417 | 429 |
430 | 431 |
432 |

weekStart Setting Go up

433 |

434 | You can change when the week should start by setting the weekStart property to a number between 0 - 6 where 0 is sunday and 6 is saturday. 435 | The languages have the weekStart predefined. So if you choose norwegian it will automatically start the week on monday if no weekStart has been set. 436 |

437 | 
 438 | 					
 439 | 						//Type: Number

 440 | 						//Default: from language


 441 | 						/*Set weekStart*/

 442 | 						datepicker.weekStart = 1; //week starts at monday


 443 | 						/*Get weekStart*/

 444 | 						console.log(datepicker.weekStart);
 445 | 					
 446 |
447 | 448 | 459 |
460 | 461 |
462 |

range Setting Go up

463 |

Do you need to select a range of two dates? Use this

464 | 
 465 | 					
 466 | 						//Type: Boolean

 467 | 						//Default: false


 468 | 						/*Set range*/

 469 | 						datepicker.range = true;


 470 | 						/*Get range*/

 471 | 						console.log(datepicker.range);
 472 | 					
 473 |
474 | 475 |

This one overwrites the maxSelections property with 2.

476 | 488 |
489 | 490 |
491 |

container Setting Go up

492 |

Do you not like modals? Don't worry you can place the datepicker in a container you want.

493 | 
 494 | 					
 495 | 						//Type: String(selector) or HTMLElement(no jQuery bro! You can do better;)

 496 | 						//Default: document.body


 497 | 						/*Set container*/

 498 | 						datepicker.container = document.querySelector('#sampleContainer');


 499 | 						/*Get container*/

 500 | 						console.log(datepicker.range);
 501 | 					
 502 |
503 | 504 |

I'm pretty sure you will like inline aswell

505 | 521 |
522 | 523 |
524 |

Hi! My name is #sampleContainer

525 |
526 | 527 |
528 |

inline Setting Go up

529 |

If you set a container and set inline true it will always be visible and you don't need to show it first

530 | 
 531 | 					
 532 | 						//Type: Boolean

 533 | 						//Default: false


 534 | 						/*Set inline*/

 535 | 						datepicker.inline = true;


 536 | 						/*Get inline*/

 537 | 						console.log(datepicker.inline);
 538 | 					
 539 |
540 | 541 |

You should set container first

542 | 555 |
556 | 557 |
558 |

Hi! My name is #inlineContainer

559 |
560 | 561 |
562 |

closeOnSelect Setting Go up

563 |

If a date gets selected the datepicker will close

564 | 
 565 | 					
 566 | 						//Type: Boolean

 567 | 						//Default: false


 568 | 						/*Set closeOnSelect*/

 569 | 						datepicker.closeOnSelect = true;


 570 | 						/*Get closeOnSelect*/

 571 | 						console.log(datepicker.closeOnSelect);
 572 | 					
 573 |
574 | 575 |

This is not the same as closeOnClick

576 | 588 |
589 | 590 |
591 |

closeOnClick Setting Go up

592 |

If someone clicks outside the datepicker it closes

593 | 
 594 | 					
 595 | 						//Type: Boolean

 596 | 						//Default: true


 597 | 						/*Set closeOnClick*/

 598 | 						datepicker.closeOnClick = false;


 599 | 						/*Get closeOnClick*/

 600 | 						console.log(datepicker.closeOnClick);
 601 | 					
 602 |
603 | 604 |

This is not the same as closeOnSelect

605 | 619 |
620 | 621 |
622 |

tooltips Setting Go up

623 |

Put some notes on it

624 | 
 625 | 					
 626 | 						//Type: Object or Array of Objects (look how the object is built in the other code block)

 627 | 						//Default: null


 628 | 						/*Set tooltips*/

 629 | 						datepicker.tooltips = [tooltip,tooltip2];


 630 | 						/*Get tooltips*/

 631 | 						console.log(datepicker.tooltips);
 632 | 					
 633 |
634 | 
 635 | 					
 636 | 						/*tooltip object*/


 637 | 
 638 | 						var tooltip = {

 639 | 							 date: new Date(2015,6,1),

 640 | 							 text: 'Tooltip'

 641 | 						};


 642 | 
 643 | 						var tooltip2 = {

 644 | 							 date: new Date(2015,6,4),

 645 | 							 text: 'Tooltip 2'

 646 | 						};


 647 | 					
 648 |
649 | 650 |

Just put multiple tooltip objects in an array if you have more than 1 tooltip object

651 | 673 |
674 | 675 |
676 |

highlight Setting Go up

677 |

This is a nice way to mark stuff in the datepicker

678 | 
 679 | 					
 680 | 						//Type: Object or Array of Objects (look how the object is built in the other code block)

 681 | 						//Default: null


 682 | 						/*Set highlight*/

 683 | 						datepicker.highlight = [highlight,highlight2];


 684 | 						/*Get highlight*/

 685 | 						console.log(datepicker.highlight);
 686 | 					
 687 |
688 | 
 689 | 					
 690 | 						/*highlight object*/


 691 | 
 692 | 						/*Single daterange*/

 693 | 						var highlight = {

 694 | 							 start: new Date(2015,6,13),

 695 | 							 end: new Date(2015,6,19),

 696 | 							 backgroundColor: '#3faa56',

 697 | 							 color: '#ffffff',

 698 | 							 legend: 'CSS Conf.'//this is optional

 699 | 						};


 700 | 
 701 | 						/*highlight with multiple dateranges*/

 702 | 						var highlight2 = {

 703 | 							 dates: [

 704 | 								 {

 705 | 									 start: new Date(2015,6,6),

 706 | 									 end: new Date(2015,6,7)

 707 | 								 },

 708 | 								 {

 709 | 									 start: new Date(2015,6,22),

 710 | 									 end: new Date(2015,6,23)

 711 | 								 }

 712 | 							 ],

 713 | 							 backgroundColor: '#E99C00',

 714 | 							 color: '#ffffff',

 715 | 							 legend: 'Holidays'//this is optional

 716 | 						};
 717 | 					
 718 |
719 | 720 |

Just put multiple highlight objects in an array if you have more than 1 highlight object

721 | 757 |
758 | 759 |
760 |

disabledDays Setting Go up

761 |

You can disable spesific days

762 | 
 763 | 					
 764 | 						//Type: Number(0-6) or Array of Numbers(0-6)

 765 | 						//Default: null


 766 | 						/*Set disabledDays*/

 767 | 						datepicker.disabledDays = 0;


 768 | 						/*Get disabledDays*/

 769 | 						console.log(datepicker.disabledDays);
 770 | 					
 771 |
772 | 773 |

This is not the same as disabledDates

774 | 786 |
787 | 788 |
789 |

disabledDates Setting Go up

790 |

You can disable spesific days

791 | 
 792 | 					
 793 | 						//Type: Date or Array of Dates

 794 | 						//Default: null


 795 | 						/*Set disabledDates*/

 796 | 						datepicker.disabledDates = [new Date(),new Date(2015,6,20)];


 797 | 						/*Get disabledDates*/

 798 | 						console.log(datepicker.disabledDates);
 799 | 					
 800 |
801 | 802 |

This is not the same as disabledDays

803 | 816 |
817 | 818 |
819 |

today Setting Go up

820 |

Show little line on todays date

821 | 
 822 | 					
 823 | 						//Type: Boolean

 824 | 						//Default: true


 825 | 						/*Set today*/

 826 | 						datepicker.today = true;


 827 | 						/*Get today*/

 828 | 						console.log(datepicker.today);
 829 | 					
 830 |
831 | 832 |

This is not the same as currentDate

833 | 843 |
844 | 845 |
846 |

daynames Setting Go up

847 |

Show/hide daynames line

848 | 
 849 | 					
 850 | 						//Type: Boolean

 851 | 						//Default: true


 852 | 						/*Set daynames*/

 853 | 						datepicker.daynames = false;


 854 | 						/*Get daynames*/

 855 | 						console.log(datepicker.daynames);
 856 | 					
 857 |
858 | 859 | 871 |
872 | 873 |
874 |

fullscreen Setting Go up

875 |

Shows the datepicker fullscreen

876 | 
 877 | 					
 878 | 						//Type: Boolean

 879 | 						//Default: false


 880 | 						/*Set fullscreen*/

 881 | 						datepicker.fullscreen = true;


 882 | 						/*Get fullscreen*/

 883 | 						console.log(datepicker.fullscreen);
 884 | 					
 885 |
886 | 887 |

This feature is not made for inline or container

888 | 902 |
903 | 904 |
905 |

locked Setting Go up

906 |

Locks the datepicker (viewonlymode)

907 | 
 908 | 					
 909 | 						//Type: Boolean

 910 | 						//Default: false


 911 | 						/*Set locked*/

 912 | 						datepicker.locked = true;


 913 | 						/*Get locked*/

 914 | 						console.log(datepicker.locked);
 915 | 					
 916 |
917 | 918 | 930 |
931 | 932 |
933 |

selectedDates Status Go up

934 |

Returns all selected dates

935 | 
 936 | 					
 937 | 						/*Get selectedDates*/

 938 | 						console.log(datepicker.selectedDates);
 939 | 					
 940 |
941 | 942 | 952 |
953 | 954 |
955 |

isOpen Status Go up

956 | 
 957 | 					
 958 | 						/*Get isOpen*/

 959 | 						console.log(datepicker.isOpen);
 960 | 					
 961 |
962 | 963 | 968 |
969 | 970 |
971 |

show() Function Go up

972 | 
 973 | 					
 974 | 						/*Show datepicker*/

 975 | 						datepicker.show({

 976 | 							today:false

 977 | 						});
 978 | 					
 979 |
980 | 981 |

You can pass all settings and callbacks as object

982 | 994 |
995 | 996 |
997 |

hide() Function Go up

998 | 
 999 | 					
1000 | 						/*Hide datepicker*/

1001 | 						datepicker.hide();
1002 | 					
1003 |
1004 | 1005 |
1006 | 1007 |
1008 |

selectDate( Date, ignoreOnSelectEvent ) Function Go up

1009 | 
1010 | 					
1011 | 						//Type: Date

1012 | 						datepicker.selectDate(new Date());
1013 | 					
1014 |
1015 | 1016 | 1023 |
1024 | 1025 |
1026 |

unselectDate( Date, ignoreOnSelectEvent ) Function Go up

1027 | 
1028 | 					
1029 | 						//Type: Date

1030 | 						datepicker.unselectDate(new Date());
1031 | 					
1032 |
1033 | 1034 | 1044 |
1045 | 1046 |
1047 |

unselectAll( ignoreOnSelectEvent ) Function Go up

1048 | 
1049 | 					
1050 | 						//Unselect all

1051 | 						datepicker.unselectAll();
1052 | 					
1053 |
1054 | 1055 | 1061 |
1062 | 1063 |
1064 |

onConfirm Callback Go up

1065 | 
1066 | 					
1067 | 						//Type: Function

1068 | 						datepicker.onConfirm = function(){

1069 | 							alert('onConfirm')

1070 | 						};
1071 | 					
1072 |
1073 | 1074 |

The context(this) is the datepicker object

1075 | 1088 |
1089 | 1090 |
1091 |

onClose Callback Go up

1092 | 
1093 | 					
1094 | 						//Type: Function

1095 | 						datepicker.onClose = function(){

1096 | 							alert('onClose')

1097 | 						};
1098 | 					
1099 |
1100 | 1101 |

The context(this) is the datepicker object

1102 | 1112 |
1113 | 1114 |
1115 |

onSelect Callback Go up

1116 | 
1117 | 					
1118 | 						//Type: Function

1119 | 						datepicker.onSelect = function(checked){

1120 | 							var state = (checked)?'selected':'unselected';

1121 | 							alert(this.toLocaleDateString() + ' ' + state)

1122 | 						};
1123 | 					
1124 |
1125 | 1126 |

The context(this) is the date. The first parameter is the un-/selected state as Boolean

1127 | 1141 |
1142 | 1143 |
1144 |

onNavigation Callback Go up

1145 | 
1146 | 					
1147 | 						//Type: Function

1148 | 						datepicker.onNavigation = function(){

1149 | 							alert('Navigation happened!')

1150 | 						};
1151 | 					
1152 |
1153 | 1154 |

The context(this) is the datepicker object.

1155 | 1166 |
1169 | 1170 |
1171 | 1172 | 1173 | 1174 | 1175 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "datepickk", 3 | "description": "Flexbox/js datepicker", 4 | "main": "src/js/datepickk.js", 5 | "directories": { 6 | "doc": "docs" 7 | }, 8 | "scripts": { 9 | "commit": "git-cz", 10 | "semantic-release": "semantic-release pre && npm publish && semantic-release post", 11 | "build": "webpack", 12 | "dev": "webpack --watch", 13 | "prepare": "npm run build" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/crsten/datepickk.git" 18 | }, 19 | "keywords": [ 20 | "datepicker", 21 | "js", 22 | "flexbox" 23 | ], 24 | "bugs": { 25 | "url": "https://github.com/crsten/datepickk/issues" 26 | }, 27 | "author": "Carsten Jacobsen", 28 | "license": "MIT", 29 | "devDependencies": { 30 | "@babel/preset-env": "^7.0.0-beta.4", 31 | "babel-loader": "^7.1.2", 32 | "babel-minify-webpack-plugin": "^0.2.0", 33 | "babel-preset-env": "^1.6.1", 34 | "clean-webpack-plugin": "^0.1.17", 35 | "css-loader": "^0.28.7", 36 | "cz-conventional-changelog": "^2.1.0", 37 | "extract-text-webpack-plugin": "^3.0.2", 38 | "less": "^2.7.3", 39 | "less-loader": "^4.0.5", 40 | "optimize-css-assets-webpack-plugin": "^3.2.0", 41 | "semantic-release": "^4.3.5", 42 | "style-loader": "^0.19.0", 43 | "webpack": "^3.8.1" 44 | }, 45 | "config": { 46 | "commitizen": { 47 | "path": "./node_modules/cz-conventional-changelog" 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/css/datepickk.less: -------------------------------------------------------------------------------- 1 | /*Main color*/ 2 | @color: #E95A5A; //change if you want different theme 3 | @green: #7DD076; 4 | 5 | @spin: -15; 6 | 7 | /*Datepickk*/ 8 | 9 | .d-noscroll{ 10 | overflow:hidden; 11 | } 12 | 13 | #Datepickk{ 14 | position: fixed; 15 | top: 0; 16 | left: 0; 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | justify-content: center; 21 | z-index: 999; 22 | 23 | width: 100%; 24 | height: 100%; 25 | font-family: inherit; 26 | color: #333; 27 | 28 | user-select: none; 29 | 30 | &.MSIE:not(.wrapped):not(.inline) .d-calendar{ 31 | height:560px; 32 | } 33 | 34 | &.d-show{ 35 | .d-overlay{ 36 | animation-name: show; 37 | animation-duration: .2s; 38 | animation-timing-function: ease-out; 39 | animation-fill-mode: both; 40 | } 41 | } 42 | 43 | &.d-hide{ 44 | 45 | & > *{ 46 | animation-name: DatepickkHide; 47 | animation-duration: .2s; 48 | animation-timing-function: linear; 49 | animation-fill-mode: both; 50 | } 51 | 52 | .d-overlay{ 53 | animation-name: show; 54 | animation-duration: .15s; 55 | animation-timing-function: ease-out; 56 | animation-fill-mode: both; 57 | animation-direction: reverse; 58 | } 59 | } 60 | 61 | .d-overlay{ 62 | position: absolute; 63 | top: 0; 64 | left: 0; 65 | width: 100%; 66 | height: 100%; 67 | background-color: rgba(55, 58, 71, 0.95); 68 | z-index:1; 69 | } 70 | 71 | .d-title{ 72 | color:white; 73 | text-align: center; 74 | position: relative; 75 | font-size: 30px; 76 | margin:25px 0; 77 | z-index: 2; 78 | } 79 | 80 | .d-confirm{ 81 | border: none; 82 | position: relative; 83 | background-color: transparent; 84 | outline: none; 85 | font-family: inherit; 86 | font-size: 30px; 87 | font-weight: 500; 88 | color: white; 89 | margin:25px 0; 90 | cursor:pointer; 91 | padding:0; 92 | z-index: 2; 93 | } 94 | 95 | .d-title:empty,.d-confirm:empty{ 96 | display: none; 97 | } 98 | 99 | @media(max-height:528px){ 100 | .d-title,.d-confirm{ 101 | font-size:20px; 102 | margin:15px 0; 103 | } 104 | .d-calendar{ 105 | font-size: 20px; 106 | } 107 | } 108 | 109 | &.multi{ 110 | .d-calendar,.d-legend{ 111 | max-width: 800px; 112 | } 113 | 114 | .d-table{ 115 | position: relative; 116 | padding-top:35px; 117 | 118 | &:before{ 119 | content: attr(data-month); 120 | text-align: right; 121 | width: 100%; 122 | font-size: 1em; 123 | padding: 5px 10px 5px 0; 124 | box-sizing: border-box; 125 | color: #CCC; 126 | position: absolute; 127 | left: 0; 128 | top: 0; 129 | } 130 | } 131 | } 132 | 133 | &.inline{ 134 | &.d-show .d-calendar{ 135 | animation: none; 136 | } 137 | } 138 | 139 | &.inline,&.wrapped{ 140 | position: static; 141 | z-index: 0; 142 | 143 | .d-calendar{ 144 | box-shadow: none; 145 | z-index: 0; 146 | max-width: none; 147 | max-height: none; 148 | } 149 | 150 | .d-confirm,.d-title{ 151 | color:#222; 152 | } 153 | 154 | .d-overlay{ 155 | display: none; 156 | } 157 | 158 | .d-legend{ 159 | color:#222!important; 160 | max-width: none; 161 | max-height: none; 162 | } 163 | } 164 | 165 | &.fullscreen{ 166 | .d-calendar{ 167 | max-width: none; 168 | max-height: none; 169 | 170 | input + label{ 171 | outline: 1px solid #eaeaea; 172 | box-sizing: border-box; 173 | align-items:flex-start!important; 174 | justify-content: flex-end!important; 175 | 176 | text{ 177 | padding:5px 10px 0 0; 178 | } 179 | } 180 | } 181 | 182 | .d-legend{ 183 | max-width: none; 184 | } 185 | } 186 | 187 | .d-legend{ 188 | display: flex; 189 | flex-wrap:wrap; 190 | justify-content:center; 191 | width: 100%; 192 | z-index: 2; 193 | background-color:whitesmoke; 194 | max-width: 500px; 195 | position: relative; 196 | color:white; 197 | 198 | &:empty{ 199 | height:0; 200 | } 201 | 202 | p{ 203 | .d-fadeInUp(); 204 | margin:0; 205 | padding: 15px; 206 | transition: background-color .2s ease; 207 | cursor:pointer; 208 | color: #1B353F; 209 | 210 | &:after{ 211 | content: attr(data-legend); 212 | } 213 | 214 | span{ 215 | width: 20px; 216 | height: 20px; 217 | border-radius: 100%; 218 | vertical-align: bottom; 219 | display:inline-block; 220 | margin-right:10px; 221 | } 222 | } 223 | } 224 | 225 | .d-calendar{ 226 | margin:0; 227 | background-color:white; 228 | box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.6); 229 | font-size: 20px; 230 | width: 100%; 231 | position: relative; 232 | max-width: 500px; 233 | max-height: 560px; 234 | display: flex; 235 | flex-direction: column; 236 | justify-content:flex-start; 237 | flex-grow:1; 238 | z-index: 2; 239 | } 240 | 241 | .d-header{ 242 | position: relative; 243 | background-color: #1B363F; 244 | color: white; 245 | font-size: 1.5em; 246 | 247 | p{ 248 | margin: .5em 0; 249 | text-align: center; 250 | } 251 | 252 | i{ 253 | position: absolute; 254 | top: 50%; 255 | width: 30px; 256 | height:30px; 257 | cursor:pointer; 258 | text-align: center; 259 | border-radius: 100%; 260 | transition: background-color .2s ease; 261 | transform:translateY(-50%); 262 | 263 | &:before,&:after{ 264 | content: ''; 265 | width: 0; 266 | height: 0; 267 | position: absolute; 268 | } 269 | 270 | &:before{ 271 | border-top: 10px solid rgba(0, 0, 0, 0); 272 | border-bottom: 10px solid rgba(0, 0, 0, 0); 273 | } 274 | 275 | &:after{ 276 | border-top: 7px solid rgba(0, 0, 0, 0); 277 | border-bottom: 7px solid rgba(0, 0, 0, 0); 278 | transition: border-color .2s ease; 279 | } 280 | 281 | &#d-previous{ 282 | left:20px; 283 | &:before{ 284 | border-right: 10px solid #FFF; 285 | top: 5px; 286 | left: 7px; 287 | } 288 | 289 | &:after{ 290 | border-right: 7px solid #1B363F; 291 | top: 8px; 292 | left: 10px; 293 | } 294 | } 295 | 296 | &#d-next{ 297 | right:20px; 298 | &:before{ 299 | border-left: 10px solid #FFF; 300 | top: 5px; 301 | left: 12px; 302 | } 303 | &:after{ 304 | border-left: 7px solid #1B363F; 305 | top: 8px; 306 | left: 12px; 307 | } 308 | } 309 | 310 | &:hover{ 311 | background-color: #5E7178; 312 | 313 | &:after{ 314 | border-left-color: #5E7178!important; 315 | border-right-color: #5E7178!important; 316 | } 317 | } 318 | } 319 | } 320 | 321 | .d-month{ 322 | cursor: pointer; 323 | white-space: nowrap; 324 | } 325 | 326 | .d-year{ 327 | margin-left:10px; 328 | cursor: pointer; 329 | 330 | &:before{ 331 | content:""; 332 | } 333 | } 334 | 335 | .d-month-picker{ 336 | display: flex; 337 | justify-content:space-between; 338 | background-color: fade(#1B363F,90%); 339 | height: 0; 340 | overflow: hidden; 341 | pointer-events: none; 342 | transition: height .2s ease; 343 | 344 | &.d-show{ 345 | height: 44px; 346 | pointer-events: auto; 347 | } 348 | 349 | & > div{ 350 | width: calc(100% ~"/" 12); 351 | text-align: center; 352 | line-height: 44px; 353 | color:contrast(fade(#1B363F,90%),black,white); 354 | cursor:pointer; 355 | 356 | &:hover,&:focus{ 357 | background-color: darken(@color,10%); 358 | color:contrast(darken(@color,10%),black,white); 359 | } 360 | 361 | &.current{ 362 | background-color: spin(@color,25); 363 | color:contrast(spin(@color,25),black,white); 364 | } 365 | } 366 | } 367 | 368 | .d-year-picker{ 369 | display: flex; 370 | justify-content:space-between; 371 | background-color: fade(#1B363F,90%); 372 | height: 0; 373 | overflow: hidden; 374 | pointer-events: none; 375 | transition: height .2s ease; 376 | 377 | &.d-show{ 378 | height: 44px; 379 | pointer-events: auto; 380 | } 381 | 382 | & > div{ 383 | width: calc(100% ~"/" 11); 384 | text-align: center; 385 | line-height: 44px; 386 | color:contrast(fade(#1B363F,90%),black,white); 387 | cursor:pointer; 388 | 389 | &:hover,&:focus{ 390 | background-color: darken(@color,10%); 391 | color:contrast(darken(@color,10%),black,white); 392 | } 393 | 394 | &.current{ 395 | background-color: spin(@color,25); 396 | color:contrast(spin(@color,25),black,white); 397 | } 398 | } 399 | } 400 | 401 | .d-weekdays{ 402 | display: flex; 403 | } 404 | .d-week{ 405 | background-color:@color; 406 | color:contrast(@color,black,white); 407 | display: flex; 408 | width: 100%; 409 | 410 | & + .d-week{ 411 | border-left:1px solid rgba(255,255,255,0.05); 412 | } 413 | 414 | & > div{ 415 | flex-basis: calc(100% ~"/" 7); 416 | text-align: center; 417 | 418 | p{ 419 | margin:.8em 0; 420 | } 421 | } 422 | 423 | @media(max-height: 540px){ 424 | display: none; 425 | } 426 | } 427 | 428 | .d-table{ 429 | width: 100%; 430 | display: flex; 431 | flex-wrap: wrap; 432 | flex: 1; 433 | 434 | &:first-child:nth-last-child(n + 3),&:first-child:nth-last-child(n + 3) ~ div{ 435 | flex:0; 436 | flex-basis: calc(100% ~"/" 3 ~"-" 1px);/*-1px due to browser render*/ 437 | 438 | border-bottom:1px solid rgba(0,0,0,0.05); 439 | } 440 | 441 | label:nth-of-type(7n) .d-date-legends{ 442 | padding-right:0; 443 | } 444 | 445 | label:nth-last-of-type(-n + 7) .d-date-legends{ 446 | padding-bottom:0; 447 | } 448 | 449 | input{ 450 | 451 | display: none; 452 | 453 | & + label{ 454 | flex-basis: calc(100% ~"/" 7); 455 | -ms-flex-preferred-size: 14.28%;/*Keep -> IE render fail*/ 456 | display: flex; 457 | align-items: center; 458 | justify-content: center; 459 | cursor: pointer; 460 | transition: background-color .2s ease,background .2s ease,color .2s ease; 461 | position: relative; 462 | -webkit-tap-highlight-color: rgba(0,0,0,0); 463 | box-sizing: border-box; 464 | 465 | text{ 466 | z-index: 9; 467 | pointer-events: none; 468 | position: relative; 469 | } 470 | 471 | &[style*="linear-gradient"] text{ 472 | text-shadow: 0 0 20px black; 473 | } 474 | 475 | &.today text:before{ 476 | content: ''; 477 | width: 100%; 478 | height: 2px; 479 | background-color: @color; 480 | position: absolute; 481 | bottom: -5px; 482 | left: 0; 483 | } 484 | 485 | &:before{ 486 | content: ''; 487 | position: absolute; 488 | top: 12.5%; 489 | left: 12.5%; 490 | width: 75%; 491 | height: 75%; 492 | border-radius: 5px; 493 | background-color: @green; 494 | transition: transform 0.1s ease-out; 495 | transform: scaleX(0); 496 | transform-origin: left; 497 | } 498 | 499 | &.legend-hover{ 500 | animation: legendhover 1s infinite; 501 | z-index: 10; 502 | 503 | @keyframes legendhover{ 504 | 0%{ 505 | transform: translate(0,0px); 506 | } 507 | 50%{ 508 | transform: translate(0,-5px); 509 | } 510 | 100%{ 511 | transform: translate(0,0px); 512 | } 513 | } 514 | } 515 | 516 | &.next,&.prev{ 517 | color:#ccc; 518 | } 519 | 520 | [data-tooltip]{ 521 | &:after{ 522 | content: ''; 523 | border-radius: 100%; 524 | background-color: #1B363F; 525 | width: 5px; 526 | height: 5px; 527 | position: absolute; 528 | top: 0; 529 | right: -10px; 530 | } 531 | } 532 | 533 | 534 | .d-tooltip{ 535 | position: absolute; 536 | background-color: #1B363F; 537 | color: #FFF; 538 | padding: 7px; 539 | font-size: .7em; 540 | z-index: 13; 541 | text-align: center; 542 | top: 100%; 543 | left: 50%; 544 | transform: translate(-50%, -5px); 545 | display: none; 546 | 547 | &:before{ 548 | content: ''; 549 | border-bottom: 7px solid #1B363F; 550 | border-left: 5px solid rgba(0, 0, 0, 0); 551 | border-right: 5px solid rgba(0, 0, 0, 0); 552 | top: -7px; 553 | left: 50%; 554 | position: absolute; 555 | margin-left: -5px; 556 | } 557 | 558 | &:empty{ 559 | display: none!important; 560 | } 561 | } 562 | 563 | &:hover { 564 | .d-tooltip{ 565 | display: block; 566 | } 567 | } 568 | } 569 | 570 | &:checked { 571 | & + label{ 572 | color:contrast(@color,white,#666); 573 | 574 | &:before{ 575 | transform:scaleX(1); 576 | } 577 | } 578 | } 579 | 580 | &:disabled + label{ 581 | cursor:not-allowed; 582 | 583 | &:after{ 584 | content: ''; 585 | position: absolute; 586 | top: 50%; 587 | left: 20%; 588 | width: 60%; 589 | height: 2px; 590 | z-index: 10; 591 | background-color: #c60000; 592 | transform-origin: center; 593 | transform: rotate(-25deg); 594 | } 595 | 596 | } 597 | 598 | & + label.d-hidden{ 599 | cursor:default; 600 | color: #ccc!important; 601 | background: #f0f0f0!important; 602 | text-decoration: line-through; 603 | 604 | &:after{ 605 | content:none; 606 | } 607 | } 608 | } 609 | } 610 | 611 | .d-tables{ 612 | display: flex; 613 | flex:1; 614 | flex-wrap:wrap; 615 | 616 | &:not(.locked){ 617 | input:not(:checked) + label:not(.hidden):hover{ 618 | color: #222; 619 | background-color:#eaeaea; 620 | } 621 | } 622 | 623 | &.locked label{ 624 | cursor: default; 625 | } 626 | 627 | &.range{ 628 | &:not(.before) input:not(.single){ 629 | &:checked { 630 | & + label{ 631 | color:contrast(@color,white,#222); 632 | 633 | & ~ label:not(.hidden){ 634 | color:contrast(@color,white,#222); 635 | 636 | &:before{ 637 | transform:scaleX(1); 638 | background-color: fade(@green,50%); 639 | } 640 | } 641 | 642 | } 643 | 644 | & ~ label:hover ~ label,& ~ label:focus ~ label{ 645 | &:before{ 646 | transform:scaleX(0); 647 | } 648 | color:#666; 649 | 650 | &.next,&.prev{ 651 | color: contrast(@color,#ccc,#222); 652 | } 653 | } 654 | 655 | & ~ input:checked + label{ 656 | 657 | color:contrast(@color,white,#666); 658 | 659 | &:before{ 660 | transform:scaleX(1); 661 | background-color: @green; 662 | } 663 | 664 | & ~ label{ 665 | color:inherit; 666 | 667 | &.next,&.prev{ 668 | color: contrast(@color,#ccc,#222); 669 | } 670 | 671 | &:before{ 672 | transform:scaleX(0); 673 | } 674 | } 675 | } 676 | } 677 | } 678 | 679 | &.before input:not(.single){ 680 | &:not(:checked) + label{ 681 | color:contrast(spin(@color,@spin),white,#666); 682 | 683 | &:before{ 684 | transform:scaleX(1); 685 | background-color: fade(spin(@color,@spin),30%); 686 | } 687 | } 688 | 689 | &:checked + label ~ label{ 690 | color:inherit; 691 | 692 | &.next,&.prev{ 693 | color: contrast(@color,#ccc,#222); 694 | } 695 | 696 | &:before{ 697 | transform:scaleX(0); 698 | } 699 | } 700 | } 701 | } 702 | } 703 | 704 | .d-fadeInUp { 705 | backface-visibility: visible !important; 706 | animation-name: DatepickfadeInUp; 707 | animation-duration: .5s; 708 | animation-fill-mode: both; 709 | } 710 | } 711 | 712 | @keyframes DatepickBGShow{ 713 | from{ 714 | opacity: 0; 715 | } 716 | } 717 | 718 | @keyframes DatepickfadeInUp { 719 | 0% { 720 | opacity: 0; 721 | transform: translate3d(0, 100%, 0); 722 | } 723 | 724 | 100% { 725 | opacity: 1; 726 | transform: none; 727 | } 728 | } 729 | 730 | .d-fadeInUp { 731 | animation-name: DatepickfadeInUp; 732 | } 733 | 734 | #Datepickk.d-show > *{ 735 | animation-name: DatepickkShow; 736 | animation-duration: .2s; 737 | animation-timing-function: ease-out; 738 | animation-fill-mode: both; 739 | } 740 | 741 | @keyframes DatepickkShow { 742 | from{ 743 | opacity: 0; 744 | transform: translateY(-50px); 745 | } 746 | } 747 | 748 | @keyframes DatepickkHide{ 749 | to{ 750 | opacity: 0; 751 | transform: translateY(50px); 752 | } 753 | } 754 | -------------------------------------------------------------------------------- /src/js/datepickk.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Datepickk 3 | * Docs & License: https://crsten.github.com/datepickk 4 | * (c) 2017 Carsten Jacobsen 5 | */ 6 | 7 | import '../css/datepickk.less'; 8 | 9 | function Datepickk(args){ 10 | Datepickk.numInstances = (Datepickk.numInstances || 0) + 1; 11 | var that = this; 12 | var eventName = 'click'; 13 | var selectedDates = []; 14 | 15 | var currentYear = new Date().getFullYear(); 16 | var currentMonth = new Date().getMonth() + 1; 17 | 18 | var languages = { 19 | no: { 20 | monthNames:['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'], 21 | dayNames:['sø','ma','ti','on','to','fr','lø'], 22 | weekStart:1 23 | }, 24 | se: { 25 | monthNames:['januari','februari','mars','april','maj','juni','juli','augusti','september','oktober','november','december'], 26 | dayNames:['sö','må','ti','on','to','fr','lö'], 27 | weekStart:1 28 | }, 29 | ru: { 30 | monthNames:['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'], 31 | dayNames:['вс','пн','вт','ср','чт','пт','сб'], 32 | weekStart:1 33 | }, 34 | en: { 35 | monthNames:['january','february','march','april','may','june','july','august','september','october','november','december'], 36 | dayNames:['su','mo','tu','we','th','fr','sa'], 37 | weekStart:0 38 | }, 39 | de: { 40 | monthNames:['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'], 41 | dayNames:['So','Mo','Di','Mi','Do','Fr','Sa'], 42 | weekStart:1 43 | } 44 | }; 45 | 46 | /*Language aliases*/ 47 | languages.nb = languages.no; 48 | languages.nn = languages.no; 49 | 50 | var range = false; 51 | var maxSelections = null; 52 | var container = document.body; 53 | var opened = false; 54 | var months = 1; 55 | var closeOnSelect = false; 56 | var button = null; 57 | var title = null; 58 | var onNavigation = null; 59 | var onClose = null; 60 | var onConfirm = null; 61 | var closeOnClick = true; 62 | var inline = false; 63 | var lang = 'en'; 64 | var onSelect = null; 65 | var disabledDates = []; 66 | var disabledDays = []; 67 | var highlight = []; 68 | var tooltips = {}; 69 | var daynames = true; 70 | var today = true; 71 | var startDate = null; 72 | var minDate = null; 73 | var maxDate = null; 74 | var weekStart = null; 75 | var locked = false; 76 | 77 | function generateDaynames(){ 78 | that.el.days.innerHTML = ''; 79 | var ws = (weekStart !== null) ? weekStart : languages[lang].weekStart; 80 | if(daynames){ 81 | for(var x = 0;x languages[lang].dayNames.length - 1) ? i + ws - languages[lang].dayNames.length : i + ws; 86 | 87 | var dayEl = document.createElement('div'); 88 | var dayTextEl = document.createElement('p'); 89 | dayTextEl.innerHTML = languages[lang].dayNames[dayNameIndex]; 90 | 91 | dayEl.appendChild(dayTextEl); 92 | weekEl.appendChild(dayEl); 93 | } 94 | 95 | that.el.days.appendChild(weekEl); 96 | } 97 | } 98 | } 99 | 100 | function generateYears(){ 101 | [].slice.call(that.el.yearPicker.childNodes).forEach(function(node,index) { 102 | node.innerHTML = "'" + (currentYear + parseInt(node.getAttribute('data-year'))).toString().substring(2,4); 103 | }) 104 | } 105 | 106 | function generateInputs(){ 107 | that.el.tables.innerHTML = ''; 108 | for(var x = 0;x start){ 177 | return true; 178 | } 179 | } 180 | return false; 181 | }); 182 | var legends = []; 183 | for(var l = 0;l<_highlights.length;l++){ 184 | if('legend' in _highlights[l] && _highlights[l].legend){ 185 | var oldLegend = container.querySelector('.d-legend-item[data-legend="' + _highlights[l].legend + '"][data-color="' + _highlights[l].backgroundColor + '"]'); 186 | if(oldLegend == null){ 187 | var legendItem = document.createElement('p'); 188 | legendItem.setAttribute('class','d-legend-item'); 189 | legendItem.setAttribute('data-legend',_highlights[l].legend); 190 | legendItem.setAttribute('data-legend-id',highlight.indexOf(_highlights[l])); 191 | legendItem.setAttribute('data-color',_highlights[l].backgroundColor); 192 | var legendItemPoint = document.createElement('span'); 193 | legendItemPoint.setAttribute('style','background-color:' + _highlights[l].backgroundColor); 194 | 195 | legendItem.appendChild(legendItemPoint); 196 | 197 | that.el.legend.appendChild(legendItem); 198 | legendItem.addEventListener('mouseover',hoverLegend); 199 | legendItem.addEventListener('mouseout',hoverLegend); 200 | legends.push(legendItem); 201 | }else{ 202 | legends.push(oldLegend); 203 | } 204 | } 205 | } 206 | 207 | [].slice.call(that.el.legend.querySelectorAll('.d-legend-item')).forEach(function(item) { 208 | if(legends.indexOf(item) < 0){ 209 | item.removeEventListener('mouseover',hoverLegend); 210 | item.removeEventListener('mouseout',hoverLegend); 211 | that.el.legend.removeChild(item); 212 | } 213 | }); 214 | 215 | function hoverLegend(e){ 216 | [].slice.call(that.el.tables.querySelectorAll('[data-legend-id*="' + this.getAttribute('data-legend-id') + '"]')).forEach(function(element) { 217 | if(e.type == 'mouseover') element.classList.add('legend-hover'); 218 | else element.classList.remove('legend-hover'); 219 | }); 220 | } 221 | } 222 | 223 | function parseMonth(month){ 224 | if(month > 11) month -= 12; 225 | else if(month < 0) month += 12; 226 | return month; 227 | } 228 | 229 | function generateDates(year,month){ 230 | var monthElements = that.el.querySelectorAll('.d-table'); 231 | var ws = (weekStart !== null) ? weekStart : languages[lang].weekStart; 232 | 233 | [].slice.call(that.el.querySelectorAll('.d-table')).forEach(function(element, index) { 234 | var days = new Date(year,month + index,0).getDate(); 235 | var daysLast = new Date(year,month + index - 1,0).getDate(); 236 | var startDay = new Date(year,month + index - 1,1).getDay(); 237 | var startDate = null; 238 | var endDate = null; 239 | if(startDay - ws < 0){ 240 | startDay = 7 - ws; 241 | }else{ 242 | startDay -= ws; 243 | } 244 | var monthText = languages[lang].monthNames[parseMonth(month - 1 + index)]; 245 | element.setAttribute('data-month',monthText); 246 | 247 | [].slice.call(element.querySelectorAll('.d-table input')).forEach(function(inputEl,i) { 248 | var labelEl = inputEl.nextSibling; 249 | 250 | inputEl.checked = false; 251 | inputEl.removeAttribute('disabled'); 252 | labelEl.removeAttribute('style'); 253 | labelEl.removeAttribute('data-legend-id'); 254 | labelEl.className = ''; 255 | 256 | var date = null; 257 | if(i < startDay){ 258 | labelEl.childNodes[0].innerHTML = daysLast - (startDay - i - 1); 259 | if(index == 0){ 260 | date = new Date(year,month + index - 2,daysLast - (startDay - i - 1)); 261 | labelEl.className = 'prev'; 262 | }else{ 263 | date = ''; 264 | labelEl.className = 'd-hidden'; 265 | inputEl.setAttribute('disabled',true); 266 | } 267 | }else if(i < days + startDay){ 268 | date = new Date(year,month + index - 1,i - startDay+1); 269 | labelEl.childNodes[0].innerHTML = i - startDay + 1; 270 | labelEl.className = ''; 271 | }else{ 272 | labelEl.childNodes[0].innerHTML = i - days - startDay + 1; 273 | if(index == monthElements.length-1){ 274 | date = new Date(year,month + index,i - days - startDay + 1); 275 | labelEl.className = 'next'; 276 | }else{ 277 | date = ''; 278 | labelEl.className = 'd-hidden'; 279 | inputEl.setAttribute('disabled',true); 280 | } 281 | } 282 | 283 | if(date instanceof Date){ 284 | inputEl.setAttribute('data-date',date.toJSON()); 285 | 286 | if(disabledDates.indexOf(date.getTime()) != -1 || disabledDays.indexOf(date.getDay()) != -1){ 287 | inputEl.setAttribute('disabled',true); 288 | } 289 | 290 | if((minDate && date < minDate) || (maxDate && date > maxDate)){ 291 | inputEl.setAttribute('disabled',true); 292 | labelEl.className = 'd-hidden'; 293 | 294 | } 295 | 296 | if(today && date.getTime() == new Date().setHours(0,0,0,0)){ 297 | labelEl.classList.add('today'); 298 | }else{ 299 | labelEl.classList.remove('today'); 300 | } 301 | 302 | 303 | if(tooltips[date.getTime()]){ 304 | labelEl.childNodes[0].setAttribute('data-tooltip',true); 305 | labelEl.childNodes[1].innerHTML = tooltips[date.getTime()]; 306 | }else{ 307 | labelEl.childNodes[0].removeAttribute('data-tooltip'); 308 | labelEl.childNodes[1].innerHTML = ''; 309 | } 310 | 311 | var _highlights = highlight.filter(function(x){ 312 | for(var m = 0;m < x.dates.length;m++){ 313 | if(date.getTime() >= x.dates[m].start.getTime() && date.getTime() <= x.dates[m].end.getTime()){ 314 | return true; 315 | } 316 | } 317 | return false; 318 | }); 319 | 320 | if(_highlights.length > 0){ 321 | var bgColor = ''; 322 | var legendIds = ''; 323 | 324 | if(_highlights.length > 1){ 325 | var percent = Math.round(100 / _highlights.length); 326 | bgColor = 'background: linear-gradient(-45deg,'; 327 | for(var z = 0;z < _highlights.length;z++){ 328 | legendIds += highlight.indexOf(_highlights[z]); 329 | if(z !== _highlights.length -1){legendIds += ' ';} 330 | bgColor += _highlights[z].backgroundColor + ' ' + (percent*z) + '%'; 331 | if(z != _highlights.length - 1){ 332 | bgColor += ','; 333 | bgColor += _highlights[z].backgroundColor + ' ' + (percent*(z+1)) + '%,'; 334 | } 335 | } 336 | bgColor += ');'; 337 | }else{ 338 | bgColor = (_highlights[0].backgroundColor)?'background:'+ _highlights[0].backgroundColor + ';':''; 339 | legendIds += highlight.indexOf(_highlights[0]); 340 | } 341 | var Color = (_highlights[0].color)?'color:'+ _highlights[0].color + ';':''; 342 | labelEl.setAttribute('style',bgColor + Color); 343 | labelEl.setAttribute('data-legend-id',legendIds); 344 | } 345 | } 346 | }); 347 | }); 348 | 349 | generateLegends(); 350 | }; 351 | 352 | function setDate(){ 353 | if(!that.el.tables.childNodes.length || !that.el.tables.childNodes[0].childNodes.length) return; 354 | 355 | resetCalendar(); 356 | 357 | if(currentMonth > 12 || currentMonth < 1){ 358 | if(currentMonth > 12){ 359 | currentYear += 1; 360 | currentMonth -= 12; 361 | }else{ 362 | currentYear -= 1; 363 | currentMonth += 12; 364 | } 365 | } 366 | 367 | if(maxDate && new Date(currentYear,currentMonth-1+months-1,1) >= new Date(maxDate).setDate(1)){ 368 | currentYear = maxDate.getFullYear(); 369 | currentMonth = maxDate.getMonth() + 1 - months + 1; 370 | that.el.header.childNodes[2].setAttribute('style','visibility:hidden'); 371 | }else{ 372 | that.el.header.childNodes[2].removeAttribute('style'); 373 | } 374 | if(minDate && new Date(currentYear,currentMonth -1,1) <= new Date(minDate).setDate(1)){ 375 | currentYear = minDate.getFullYear(); 376 | currentMonth = minDate.getMonth() + 1; 377 | that.el.header.childNodes[0].setAttribute('style','visibility:hidden'); 378 | }else{ 379 | that.el.header.childNodes[0].removeAttribute('style'); 380 | } 381 | 382 | for(var c = 0;c < months;c++){ 383 | var index = currentMonth-1+c; 384 | if(index > 11){ 385 | index -= 12; 386 | }else if(index < 0){ 387 | index += 12; 388 | } 389 | 390 | that.el.monthPicker.childNodes[index].classList.add('current'); 391 | } 392 | 393 | generateDates(currentYear,currentMonth); 394 | generateYears(); 395 | var startmonth = languages[lang].monthNames[currentMonth-1]; 396 | var endmonth = ''; 397 | if(months > 1){ 398 | endmonth += ' - '; 399 | var monthint = currentMonth-1+months-1; 400 | if(monthint > 11){ 401 | monthint -= 12; 402 | }else if(monthint < 0){ 403 | monthint += 12; 404 | } 405 | endmonth += languages[lang].monthNames[monthint]; 406 | } 407 | var yearname = (currentMonth-1+months-1 > 11)?currentYear.toString().substring(2,4) + '/' + (currentYear + 1).toString().substring(2,4):currentYear.toString().substring(2,4); 408 | that.el.header.childNodes[1].childNodes[0].innerHTML = startmonth + endmonth; 409 | that.el.header.childNodes[1].childNodes[1].innerHTML = yearname; 410 | 411 | that.el.yearPicker.querySelector('[data-year="0"]').classList.add('current'); 412 | if(currentMonth-1+months-1>11){ 413 | that.el.yearPicker.querySelector('[data-year="1"]').classList.add('current'); 414 | } 415 | 416 | renderSelectedDates(); 417 | if(onNavigation) onNavigation.call(that); 418 | }; 419 | 420 | function renderSelectedDates(){ 421 | selectedDates.forEach(function(date) { 422 | var el = that.el.querySelector('[data-date="' + date.toJSON() + '"]'); 423 | if(el){ 424 | el.checked = true; 425 | } 426 | }); 427 | 428 | that.el.tables.classList.remove('before'); 429 | if(range && selectedDates.length > 1){ 430 | var currentDate = new Date(currentYear,currentMonth-1,1); 431 | var sorted = selectedDates.sort(function(a,b){return a.getTime()-b.getTime()}); 432 | var first = that.el.querySelector('[data-date="'+ sorted[0].toJSON() +'"]'); 433 | if(!first && currentDate >= new Date(sorted[0].getFullYear(),sorted[0].getMonth(),1) && currentDate <= new Date(sorted[1].getFullYear(),sorted[1].getMonth(),1)){ 434 | that.el.tables.classList.add('before'); 435 | } 436 | } 437 | }; 438 | 439 | function resetCalendar(){ 440 | [].slice.call(that.el.querySelectorAll('.d-table input')).forEach(function(inputEl) { 441 | inputEl.checked = false; 442 | }); 443 | 444 | [].slice.call(that.el.monthPicker.querySelectorAll('.current')).forEach(function(monthPickEl) { 445 | monthPickEl.classList.remove('current'); 446 | }); 447 | 448 | [].slice.call(that.el.yearPicker.querySelectorAll('.current')).forEach(function(yearPickEl) { 449 | yearPickEl.classList.remove('current'); 450 | }); 451 | }; 452 | 453 | function nextMonth(){ 454 | currentMonth += months; 455 | setDate(); 456 | }; 457 | 458 | function prevMonth(){ 459 | currentMonth -= months; 460 | setDate(); 461 | }; 462 | 463 | function selectDate(date,ignoreOnSelect){ 464 | date = new Date(date); 465 | date.setHours(0,0,0,0); 466 | var el = that.el.querySelector('[data-date="'+ date.toJSON() +'"]'); 467 | 468 | if(range && el && el.checked) { 469 | el.classList.add('single'); 470 | } 471 | 472 | if(el && !el.checked){ 473 | el.checked = true; 474 | } 475 | 476 | 477 | selectedDates.push(date); 478 | 479 | if(onSelect && !ignoreOnSelect){ 480 | onSelect.apply(date,[true]); 481 | } 482 | }; 483 | 484 | function unselectDate(date,ignoreOnSelect){ 485 | date = new Date(date); 486 | date.setHours(0,0,0,0); 487 | var el = that.el.querySelector('[data-date="'+ date.toJSON() +'"]'); 488 | if(el){ 489 | el.classList.remove('single'); 490 | if(el.checked){el.checked = false;} 491 | } 492 | 493 | selectedDates = selectedDates.filter(function(x){return x.getTime() != date.getTime()}); 494 | 495 | if(onSelect && !ignoreOnSelect){ 496 | onSelect.call(date,false); 497 | } 498 | }; 499 | 500 | function unselectAll(ignoreOnSelect){ 501 | selectedDates.forEach(function(date) { 502 | unselectDate(date,ignoreOnSelect); 503 | }); 504 | }; 505 | 506 | function inputChange(e){ 507 | var input = this; 508 | var date = new Date(input.getAttribute('data-date')); 509 | input.classList.remove('single'); 510 | if(locked){return;} 511 | if(range){ 512 | that.el.tables.classList.remove('before'); 513 | } 514 | if(input.checked){ 515 | if(maxSelections && selectedDates.length > maxSelections-1){ 516 | var length = selectedDates.length; 517 | for(length; length > maxSelections-1; length --){ 518 | unselectDate(selectedDates[0]); 519 | } 520 | 521 | } 522 | 523 | if(range && selectedDates.length){ 524 | var first = that.el.querySelector('[data-date="'+ selectedDates[0].toJSON() +'"]'); 525 | if(!first && date > selectedDates[0]){ 526 | that.el.tables.classList.add('before'); 527 | } 528 | } 529 | 530 | selectedDates.push(date); 531 | 532 | if(closeOnSelect){ 533 | that.hide(); 534 | } 535 | }else{ 536 | if(range && selectedDates.length == 1 && selectedDates[0].getTime() == date.getTime()){ 537 | selectDate(date); 538 | input.classList.add('single'); 539 | }else{ 540 | selectedDates = selectedDates.filter(function(x){return x.getTime() != date.getTime()}) 541 | } 542 | } 543 | 544 | if(onSelect){ 545 | onSelect.call(date,input.checked); 546 | } 547 | }; 548 | 549 | function setRange(val){ 550 | if(val){ 551 | range = true; 552 | that.el.tables.classList.add('range'); 553 | }else{ 554 | range = false; 555 | that.el.tables.classList.remove('range'); 556 | } 557 | }; 558 | 559 | function show(properties){ 560 | if(!that.inline && that.container === document.body){document.body.classList.add('d-noscroll');} 561 | setArgs(properties); 562 | var handler = function(){ 563 | that.el.classList.remove('d-show'); 564 | that.el.calendar.removeEventListener(whichAnimationEvent(),handler); 565 | }; 566 | that.el.calendar.addEventListener(whichAnimationEvent(),handler); 567 | that.el.classList.add('d-show'); 568 | container.appendChild(that.el); 569 | opened = true; 570 | if(startDate){ 571 | currentMonth = startDate.getMonth() + 1; 572 | currentYear = startDate.getFullYear(); 573 | } 574 | setDate(); 575 | }; 576 | 577 | function hide(){ 578 | document.body.classList.remove('d-noscroll'); 579 | var handler = function(){ 580 | that.el.parentNode.removeChild(that.el); 581 | opened = false; 582 | that.el.classList.remove('d-hide'); 583 | if(typeof onClose == 'function'){ 584 | onClose.apply(that); 585 | } 586 | that.el.removeEventListener(whichAnimationEvent(),handler); 587 | } 588 | that.el.addEventListener(whichAnimationEvent(),handler); 589 | that.el.classList.add('d-hide'); 590 | }; 591 | 592 | function bindEvents(){ 593 | that.el.header.childNodes[0].addEventListener(eventName,prevMonth); 594 | that.el.header.childNodes[2].addEventListener(eventName,nextMonth); 595 | that.el.header.childNodes[1].childNodes[0].addEventListener(eventName,function(){ 596 | if(that.el.monthPicker.classList.contains('d-show')){ 597 | that.el.monthPicker.classList.remove('d-show'); 598 | }else{ 599 | that.el.monthPicker.classList.add('d-show'); 600 | } 601 | that.el.yearPicker.classList.remove('d-show'); 602 | }); 603 | that.el.header.childNodes[1].childNodes[1].addEventListener(eventName,function(){ 604 | generateYears(); 605 | if(that.el.yearPicker.classList.contains('d-show')){ 606 | that.el.yearPicker.classList.remove('d-show'); 607 | }else{ 608 | that.el.yearPicker.classList.add('d-show'); 609 | } 610 | that.el.monthPicker.classList.remove('d-show'); 611 | }); 612 | that.el.button.addEventListener(eventName,hide); 613 | 614 | that.el.overlay.addEventListener(eventName,function(){ 615 | if(closeOnClick){ 616 | that.hide(); 617 | } 618 | }); 619 | 620 | [].slice.call(that.el.monthPicker.childNodes).forEach(function(monthPicker) { 621 | monthPicker.addEventListener(eventName,function(){ 622 | currentMonth = parseInt(this.getAttribute('data-month')); 623 | setDate(); 624 | that.el.monthPicker.classList.remove('d-show'); 625 | }); 626 | }); 627 | 628 | [].slice.call(that.el.yearPicker.childNodes).forEach(function(yearPicker) { 629 | yearPicker.addEventListener(eventName,function(){ 630 | currentYear += parseInt(this.getAttribute('data-year')); 631 | setDate(); 632 | that.el.yearPicker.classList.remove('d-show'); 633 | }); 634 | }) 635 | 636 | var startX = 0; 637 | var distance = 0; 638 | that.el.calendar.addEventListener('touchstart',function(e){ 639 | startX = e.changedTouches[0].clientX || e.originalEvent.changedTouches[0].clientX; 640 | //e.preventDefault(); 641 | }); 642 | 643 | that.el.calendar.addEventListener('touchmove',function(e){ 644 | distance = e.changedTouches[0].clientX - startX || e.originalEvent.changedTouches[0].clientX - startX; 645 | e.preventDefault(); 646 | }); 647 | 648 | that.el.calendar.addEventListener('touchend',function(e){ 649 | if(distance > 50){ 650 | prevMonth(); 651 | }else if(distance < -50){ 652 | nextMonth(); 653 | } 654 | distance = 0; 655 | }); 656 | }; 657 | 658 | function setArgs(x){ 659 | for(var key in x){ 660 | if(key in that){ 661 | that[key] = x[key]; 662 | } 663 | }; 664 | }; 665 | 666 | function init(){ 667 | that.el = document.createElement('div'); 668 | that.el.id = 'Datepickk'; 669 | that.el.classList.add(getBrowserVersion().type); 670 | that.el.innerHTML = template; 671 | that.el.calendar = that.el.childNodes[1]; 672 | that.el.titleBox = that.el.childNodes[0]; 673 | that.el.button = that.el.childNodes[3]; 674 | that.el.header = that.el.calendar.childNodes[0]; 675 | that.el.monthPicker = that.el.calendar.childNodes[1]; 676 | that.el.yearPicker = that.el.calendar.childNodes[2]; 677 | that.el.tables = that.el.calendar.childNodes[4]; 678 | that.el.days = that.el.calendar.childNodes[3]; 679 | that.el.overlay = that.el.childNodes[4]; 680 | that.el.legend = that.el.childNodes[2]; 681 | 682 | setArgs(args); 683 | 684 | generateInputs(); 685 | generateDaynames(); 686 | bindEvents(); 687 | 688 | if(inline){ 689 | show(); 690 | } 691 | } 692 | 693 | that.show = show; 694 | that.hide = hide; 695 | that.selectDate = selectDate; 696 | that.unselectAll = unselectAll; 697 | that.unselectDate = unselectDate; 698 | 699 | function currentDateGetter(){ 700 | return new Date(currentYear,currentMonth-1,1); 701 | } 702 | function currentDateSetter(x){ 703 | x = new Date(x); 704 | currentMonth = x.getMonth() + 1; 705 | currentYear = x.getFullYear(); 706 | setDate(); 707 | } 708 | 709 | Object.defineProperties(that,{ 710 | "selectedDates": { 711 | get: function () { 712 | return selectedDates.sort(function(a,b){return a.getTime() - b.getTime();}); 713 | } 714 | }, 715 | "range": { 716 | get: function() { 717 | return range; 718 | }, 719 | set: function(x) { 720 | setRange(x); 721 | if(x){maxSelections = 2;} 722 | } 723 | }, 724 | "button": { 725 | get: function() { 726 | return button; 727 | }, 728 | set: function(x){ 729 | if(typeof x == 'string'){ 730 | button = x; 731 | }else{ 732 | button = null; 733 | } 734 | that.el.button.innerHTML = (button)?button:''; 735 | } 736 | }, 737 | "title": { 738 | get: function(){ 739 | return title; 740 | }, 741 | set: function(x){ 742 | if(typeof x == 'string'){ 743 | title = x; 744 | }else{ 745 | title = null; 746 | } 747 | that.el.titleBox.innerText = (title)?title:''; 748 | } 749 | }, 750 | "lang": { 751 | get: function(){ 752 | return lang; 753 | }, 754 | set: function(x){ 755 | if(x in languages){ 756 | lang = x; 757 | generateDaynames(); 758 | setDate(); 759 | }else{ 760 | console.error('Language not found'); 761 | } 762 | } 763 | }, 764 | "weekStart": { 765 | get: function(){ 766 | return (weekStart !== null) ? weekStart : languages[lang].weekStart; 767 | }, 768 | set: function(x){ 769 | if(typeof x == 'number' && x > -1 && x < 7){ 770 | weekStart = x; 771 | generateDaynames(); 772 | setDate(); 773 | }else{ 774 | console.error('weekStart must be a number between 0 and 6'); 775 | } 776 | } 777 | }, 778 | "months": { 779 | get: function(){ 780 | return months; 781 | }, 782 | set: function(x){ 783 | if(typeof x == 'number' && x > 0){ 784 | months = x; 785 | generateDaynames(); 786 | generateInputs(); 787 | setDate(); 788 | 789 | if(months == 1){ 790 | that.el.classList.remove('multi'); 791 | }else{ 792 | that.el.classList.add('multi'); 793 | } 794 | }else{ 795 | console.error('months must be a number > 0'); 796 | } 797 | } 798 | }, 799 | "isOpen": { 800 | get: function(){ 801 | return opened; 802 | } 803 | }, 804 | "closeOnSelect": { 805 | get: function(){ 806 | return closeOnSelect; 807 | }, 808 | set: function(x){ 809 | if(x){ 810 | closeOnSelect = true; 811 | }else{ 812 | closeOnSelect = false; 813 | } 814 | } 815 | }, 816 | "disabledDays": { 817 | get: function(){ 818 | return disabledDays; 819 | }, 820 | set: function(x){ 821 | if(x instanceof Array){ 822 | for(var i = 0;i < x.length;i++){ 823 | if(typeof x[i] == 'number'){ 824 | disabledDays.push(x[i]); 825 | } 826 | } 827 | }else if(typeof x == 'number'){ 828 | disabledDays = [x]; 829 | }else if(!x){ 830 | disabledDays = []; 831 | } 832 | setDate(); 833 | } 834 | }, 835 | "disabledDates": { 836 | get: function(){ 837 | return disabledDates.map(function(x){return new Date(x);}); 838 | }, 839 | set: function(x){ 840 | if(x instanceof Array){ 841 | x.forEach(function(date) { 842 | if(date instanceof Date){ 843 | disabledDates.push(new Date(date.getFullYear(),date.getMonth(),date.getDate()).getTime()); 844 | } 845 | }); 846 | }else if(x instanceof Date){ 847 | disabledDates = [new Date(x.getFullYear(),x.getMonth(),x.getDate()).getTime()]; 848 | }else if(!x){ 849 | disabledDates = []; 850 | } 851 | setDate(); 852 | } 853 | }, 854 | "highlight": { 855 | get: function(){ 856 | return highlight; 857 | }, 858 | set: function(x){ 859 | if(x instanceof Array){ 860 | x.forEach(function(hl) { 861 | if(hl instanceof Object){ 862 | var highlightObj = {}; 863 | highlightObj.dates = []; 864 | 865 | if('start' in hl){ 866 | highlightObj.dates.push({ 867 | start: new Date(hl.start.getFullYear(),hl.start.getMonth(),hl.start.getDate()), 868 | end: ('end' in hl)?new Date(hl.end.getFullYear(),hl.end.getMonth(),hl.end.getDate()):new Date(hl.start.getFullYear(),hl.start.getMonth(),hl.start.getDate()) 869 | }); 870 | }else if('dates' in hl && hl.dates instanceof Array){ 871 | hl.dates.forEach(function(hlDate) { 872 | highlightObj.dates.push({ 873 | start: new Date(hlDate.start.getFullYear(),hlDate.start.getMonth(),hlDate.start.getDate()), 874 | end: ('end' in hlDate)?new Date(hlDate.end.getFullYear(),hlDate.end.getMonth(),hlDate.end.getDate()):new Date(hlDate.start.getFullYear(),hlDate.start.getMonth(),hlDate.start.getDate()) 875 | }); 876 | }) 877 | } 878 | 879 | highlightObj.color = hl.color; 880 | highlightObj.backgroundColor = hl.backgroundColor; 881 | highlightObj.legend = ('legend' in hl)?hl.legend:null; 882 | 883 | highlight.push(highlightObj); 884 | } 885 | }); 886 | }else if(x instanceof Object){ 887 | var highlightObj = {}; 888 | highlightObj.dates = []; 889 | 890 | if('start' in x){ 891 | highlightObj.dates.push({ 892 | start: new Date(x.start.getFullYear(),x.start.getMonth(),x.start.getDate()), 893 | end: ('end' in x)?new Date(x.end.getFullYear(),x.end.getMonth(),x.end.getDate()):new Date(x.start.getFullYear(),x.start.getMonth(),x.start.getDate()) 894 | }); 895 | }else if('dates' in x && x.dates instanceof Array){ 896 | x.dates.forEach(function(hlDate) { 897 | highlightObj.dates.push({ 898 | start: new Date(hlDate.start.getFullYear(),hlDate.start.getMonth(),hlDate.start.getDate()), 899 | end: ('end' in hlDate)?new Date(hlDate.end.getFullYear(),hlDate.end.getMonth(),hlDate.end.getDate()):new Date(hlDate.start.getFullYear(),hlDate.start.getMonth(),hlDate.start.getDate()) 900 | }); 901 | }); 902 | } 903 | 904 | highlightObj.color = x.color; 905 | highlightObj.backgroundColor = x.backgroundColor; 906 | highlightObj.legend = ('legend' in x)?x.legend:null; 907 | 908 | highlight.push(highlightObj); 909 | }else if(!x){ 910 | highlight = []; 911 | } 912 | 913 | setDate(); 914 | } 915 | }, 916 | "onClose": { 917 | set: function(callback){ 918 | onClose = callback; 919 | } 920 | }, 921 | "onSelect": { 922 | set: function(callback){ 923 | onSelect = callback; 924 | } 925 | }, 926 | "today": { 927 | get: function(){ 928 | return today; 929 | }, 930 | set: function(x){ 931 | if(x){ 932 | today = true; 933 | }else{ 934 | today = false; 935 | } 936 | } 937 | }, 938 | "daynames": { 939 | get: function(){ 940 | return daynames; 941 | }, 942 | set: function(x){ 943 | if(x){ 944 | daynames = true; 945 | }else{ 946 | daynames = false; 947 | } 948 | generateDaynames(); 949 | } 950 | }, 951 | "fullscreen": { 952 | get: function(){ 953 | return that.el.classList.contains('fullscreen'); 954 | }, 955 | set: function(x){ 956 | if(x){ 957 | that.el.classList.add('fullscreen'); 958 | }else{ 959 | that.el.classList.remove('fullscreen'); 960 | } 961 | } 962 | }, 963 | "locked": { 964 | get: function(){ 965 | return locked; 966 | }, 967 | set: function(x){ 968 | if(x){ 969 | locked = true; 970 | that.el.tables.classList.add('locked'); 971 | }else{ 972 | locked = false; 973 | that.el.tables.classList.remove('locked'); 974 | } 975 | } 976 | }, 977 | "maxSelections": { 978 | get: function(){ 979 | return maxSelections; 980 | }, 981 | set: function(x){ 982 | if(typeof x == 'number' && !range){ 983 | maxSelections = x; 984 | }else{ 985 | if(range){ 986 | maxSelections = 2; 987 | }else{ 988 | maxSelections = null; 989 | } 990 | } 991 | } 992 | }, 993 | "onConfirm": { 994 | set: function(callback){ 995 | if(typeof callback == 'function'){ 996 | onConfirm = callback.bind(that); 997 | that.el.button.addEventListener(eventName,onConfirm); 998 | }else if(!callback){ 999 | that.el.button.removeEventListener(eventName,onConfirm); 1000 | onConfirm = null; 1001 | } 1002 | } 1003 | }, 1004 | "onNavigation": { 1005 | set: function(callback){ 1006 | if(typeof callback == 'function'){ 1007 | onNavigation = callback.bind(that); 1008 | }else if(!callback){ 1009 | onNavigation = null; 1010 | } 1011 | } 1012 | }, 1013 | "closeOnClick": { 1014 | get: function(){ 1015 | return closeOnClick; 1016 | }, 1017 | set: function(x){ 1018 | if(x){ 1019 | closeOnClick = true; 1020 | }else{ 1021 | closeOnClick = false; 1022 | } 1023 | } 1024 | }, 1025 | "tooltips": { 1026 | get: function(){ 1027 | var ret = []; 1028 | for(key in tooltips){ 1029 | ret.push({ 1030 | date: new Date(parseInt(key)), 1031 | text: tooltips[key] 1032 | }); 1033 | } 1034 | return ret; 1035 | }, 1036 | set: function(x){ 1037 | if(x instanceof Array){ 1038 | x.forEach(function(item) { 1039 | if(item.date && item.text && item.date instanceof Date){ 1040 | tooltips[new Date(item.date.getFullYear(),item.date.getMonth(),item.date.getDate()).getTime()] = item.text; 1041 | } 1042 | }); 1043 | }else if(x instanceof Object){ 1044 | if(x.date && x.text && x.date instanceof Date){ 1045 | tooltips[new Date(x.date.getFullYear(),x.date.getMonth(),x.date.getDate()).getTime()] = x.text; 1046 | } 1047 | }else if(!x){ 1048 | tooltips = []; 1049 | } 1050 | setDate(); 1051 | } 1052 | }, 1053 | "currentDate": { 1054 | get: currentDateGetter, 1055 | set: currentDateSetter 1056 | }, 1057 | "setDate": { 1058 | set: currentDateSetter 1059 | }, 1060 | "startDate": { 1061 | get: function(){ 1062 | return startDate; 1063 | }, 1064 | set: function(x){ 1065 | if(x){ 1066 | startDate = new Date(x); 1067 | }else{ 1068 | startDate = null; 1069 | currentYear = new Date().getFullYear(); 1070 | currentMonth = new Date().getMonth() + 1; 1071 | } 1072 | setDate(); 1073 | } 1074 | }, 1075 | "minDate": { 1076 | get: function(){ 1077 | return minDate; 1078 | }, 1079 | set: function(x){ 1080 | minDate = (x) ? new Date(x) : null ; 1081 | setDate(); 1082 | } 1083 | }, 1084 | "maxDate": { 1085 | get: function(){ 1086 | return maxDate; 1087 | }, 1088 | set: function(x){ 1089 | maxDate = (x) ? new Date(x) : null ; 1090 | setDate(); 1091 | } 1092 | }, 1093 | "container": { 1094 | get: function(){ 1095 | return container; 1096 | }, 1097 | set: function(x){ 1098 | if(x instanceof String){ 1099 | var y = document.querySelector(x); 1100 | if(y){ 1101 | container = y; 1102 | if(container != document.body){ 1103 | that.el.classList.add('wrapped'); 1104 | }else{ 1105 | that.el.classList.remove('wrapped'); 1106 | } 1107 | }else{ 1108 | console.error("Container doesn't exist"); 1109 | } 1110 | }else if(x instanceof HTMLElement){ 1111 | container = x; 1112 | if(container != document.body){ 1113 | that.el.classList.add('wrapped'); 1114 | }else{ 1115 | that.el.classList.remove('wrapped'); 1116 | } 1117 | }else{ 1118 | console.error("Invalid type"); 1119 | } 1120 | } 1121 | }, 1122 | "inline": { 1123 | get: function(){ 1124 | return inline; 1125 | }, 1126 | set: function(x){ 1127 | if(x){ 1128 | inline = true; 1129 | that.el.classList.add('inline'); 1130 | }else{ 1131 | inline = false; 1132 | that.el.classList.remove('inline'); 1133 | } 1134 | } 1135 | }, 1136 | 1137 | 1138 | }); 1139 | 1140 | init(); 1141 | setDate(); 1142 | 1143 | return Object.freeze(that); 1144 | }; 1145 | 1146 | function whichAnimationEvent(){ 1147 | var t; 1148 | var el = document.createElement('fakeelement'); 1149 | var transitions = { 1150 | 'animation':'animationend', 1151 | 'OAnimation':'oanimationend', 1152 | 'MozAnimation':'animationend', 1153 | 'WebkitAnimation':'webkitAnimationEnd', 1154 | '':'MSAnimationEnd' 1155 | }; 1156 | 1157 | for(t in transitions){ 1158 | if( el.style[t] !== undefined ){ 1159 | return transitions[t]; 1160 | } 1161 | } 1162 | } 1163 | 1164 | var template = '
' + 1165 | '
' + 1166 | '
' + 1167 | '' + 1168 | '

' + 1169 | '' + 1170 | '
' + 1171 | '
' + 1172 | '
1
' + 1173 | '
2
' + 1174 | '
3
' + 1175 | '
4
' + 1176 | '
5
' + 1177 | '
6
' + 1178 | '
7
' + 1179 | '
8
' + 1180 | '
9
' + 1181 | '
10
' + 1182 | '
11
' + 1183 | '
12
' + 1184 | '
' + 1185 | '
' + 1186 | '
' + 1187 | '
' + 1188 | '
' + 1189 | '
' + 1190 | '
' + 1191 | '
' + 1192 | '
' + 1193 | '
' + 1194 | '
' + 1195 | '
' + 1196 | '
' + 1197 | '
' + 1198 | '
' + 1199 | '
' + 1200 | '
' + 1201 | '
' + 1202 | '' + 1203 | '
'; 1204 | 1205 | var getBrowserVersion = function(){ 1206 | var browser = { 1207 | type: null, 1208 | version: null 1209 | } 1210 | 1211 | var ua= navigator.userAgent, tem, ios, 1212 | M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 1213 | ios = ua.match(/(iphone|ipad)\s+OS\s+([\d+_]+\d+)/i) || []; 1214 | if(/trident/i.test(M[1])){ 1215 | tem= /\brv[ :]+(\d+)/g.exec(ua) || []; 1216 | browser.type = 'MSIE'; 1217 | browser.version = parseInt(tem[1]); 1218 | return browser; 1219 | } 1220 | if(M[1]=== 'Chrome'){ 1221 | tem= ua.match(/\bOPR\/(\d+)/) 1222 | if(tem!= null) return 'Opera '+tem[1]; 1223 | } 1224 | if(ios[1]){ 1225 | return browser = { 1226 | type: 'iOS', 1227 | version: ios[2] 1228 | }; 1229 | } 1230 | M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?']; 1231 | if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]); 1232 | browser.type = M[0]; 1233 | browser.version = parseInt(M[1]); 1234 | 1235 | return browser; 1236 | } 1237 | 1238 | export default Datepickk 1239 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const CleanWebpackPlugin = require('clean-webpack-plugin') 3 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 | const MinifyPlugin = require('babel-minify-webpack-plugin'); 5 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 6 | 7 | module.exports = { 8 | entry: { 9 | 'datepickk': './src/js/datepickk.js', 10 | 'datepickk.min': './src/js/datepickk.js', 11 | 'doc': './docs/doc.less' 12 | }, 13 | //devtool: 'source-map', 14 | output: { 15 | filename: '[name].js', 16 | path: path.resolve(__dirname, 'dist'), 17 | library: "Datepickk", 18 | libraryExport: 'default', 19 | libraryTarget: "umd" 20 | }, 21 | module: { 22 | rules: [{ 23 | test: /\.js$/, 24 | exclude: /(node_modules|bower_components)/, 25 | use: { 26 | loader: 'babel-loader' 27 | } 28 | },{ 29 | test: /\.less$/, 30 | use: ExtractTextPlugin.extract({ 31 | fallback: "style-loader", 32 | use: ['css-loader','less-loader'] 33 | }) 34 | }] 35 | }, 36 | plugins: [ 37 | new CleanWebpackPlugin(['dist']), 38 | new ExtractTextPlugin({ 39 | filename: (getPath) => { 40 | return getPath('[name].css'); 41 | } 42 | }), 43 | new MinifyPlugin({}, { 44 | test: /\.min\.js$/, 45 | }), 46 | new OptimizeCssAssetsPlugin({ 47 | assetNameRegExp: /\.min\.css$/, 48 | cssProcessorOptions: { discardComments: { removeAll: true } } 49 | }) 50 | ] 51 | }; 52 | --------------------------------------------------------------------------------