├── src ├── datedropper.eot ├── datedropper.ttf ├── datedropper.woff └── datedropper.svg ├── Main.css ├── Date Dropper.html ├── my-style.css ├── datedropper.css ├── datedropper.js └── jquery-1.10.2.min.js /src/datedropper.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daftcreations/Date-Dropper/HEAD/src/datedropper.eot -------------------------------------------------------------------------------- /src/datedropper.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daftcreations/Date-Dropper/HEAD/src/datedropper.ttf -------------------------------------------------------------------------------- /src/datedropper.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daftcreations/Date-Dropper/HEAD/src/datedropper.woff -------------------------------------------------------------------------------- /Main.css: -------------------------------------------------------------------------------- 1 | input{ 2 | position: absolute; 3 | top:100px; 4 | left:50%; 5 | transform: translateX(-50%); 6 | } -------------------------------------------------------------------------------- /Date Dropper.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /my-style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | INSTRUCTIONS --------------------------------------------------------------------------------- 4 | 5 | 1. link this stylesheet in the head of your HTML 6 | 7 | 8 | 2. Set the file name as data-theme attribute on your input 9 | 10 | 11 | 3. That's it! 12 | 13 | When you run script the style will be automatically applied. 14 | 15 | */ 16 | div.datedropper.my-style { 17 | border-radius: 8px; 18 | width: 180px; 19 | } 20 | div.datedropper.my-style .picker { 21 | border-radius: 8px; 22 | box-shadow: 0 0 32px 0px rgba(0, 0, 0, 0.1); 23 | } 24 | div.datedropper.my-style .pick-l { 25 | border-bottom-left-radius: 8px; 26 | border-bottom-right-radius: 8px; 27 | } 28 | div.datedropper.my-style:before, 29 | div.datedropper.my-style .pick-submit, 30 | div.datedropper.my-style .pick-lg-b .pick-sl:before, 31 | div.datedropper.my-style .pick-m, 32 | div.datedropper.my-style .pick-lg-h { 33 | background-color: #fce14e; 34 | } 35 | div.datedropper.my-style .pick-y.pick-jump, 36 | div.datedropper.my-style .pick li span, 37 | div.datedropper.my-style .pick-lg-b .pick-wke, 38 | div.datedropper.my-style .pick-btn { 39 | color: #fce14e; 40 | } 41 | div.datedropper.my-style .picker, 42 | div.datedropper.my-style .pick-l { 43 | background-color: #FFF; 44 | } 45 | div.datedropper.my-style .picker, 46 | div.datedropper.my-style .pick-arw, 47 | div.datedropper.my-style .pick-l { 48 | color: #4D4D4D; 49 | } 50 | div.datedropper.my-style .pick-m, 51 | div.datedropper.my-style .pick-m .pick-arw, 52 | div.datedropper.my-style .pick-lg-h, 53 | div.datedropper.my-style .pick-lg-b .pick-sl, 54 | div.datedropper.my-style .pick-submit { 55 | color: #FFF; 56 | } 57 | div.datedropper.my-style.picker-tiny:before, 58 | div.datedropper.my-style.picker-tiny .pick-m { 59 | background-color: #FFF; 60 | } 61 | div.datedropper.my-style.picker-tiny .pick-m, 62 | div.datedropper.my-style.picker-tiny .pick-m .pick-arw { 63 | color: #4D4D4D; 64 | } 65 | div.datedropper.my-style.picker-lkd .pick-submit { 66 | background-color: #FFF; 67 | color: #4D4D4D; 68 | } 69 | -------------------------------------------------------------------------------- /src/datedropper.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | -------------------------------------------------------------------------------- /datedropper.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "datedropper"; 3 | src: url("src/datedropper.eot"); 4 | src: url("src/datedropper.eot?#iefix") format("embedded-opentype"), url("src/datedropper.woff") format("woff"), url("src/datedropper.ttf") format("truetype"), url("src/datedropper.svg#datedropper") format("svg"); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | [class^="pick-i-"]:before, 9 | [class*=" pick-i-"]:before { 10 | font-family: "datedropper" !important; 11 | font-style: normal !important; 12 | font-weight: normal !important; 13 | font-variant: normal !important; 14 | text-transform: none !important; 15 | speak: none; 16 | line-height: 1; 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | } 20 | .pick-i-lng:before { 21 | content: "\6a"; 22 | } 23 | .pick-i-lkd:before { 24 | content: "\62"; 25 | } 26 | .pick-i-ckd:before { 27 | content: "\65"; 28 | } 29 | .pick-i-r:before { 30 | content: "\66"; 31 | } 32 | .pick-i-l:before { 33 | content: "\68"; 34 | } 35 | .pick-i-min:before { 36 | content: "\61"; 37 | } 38 | .pick-i-exp:before { 39 | content: "\63"; 40 | } 41 | .picker-input { 42 | cursor: text; 43 | } 44 | .picker-modal-overlay { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | background-color: rgba(0, 0, 0, 0.8); 51 | z-index: 9998; 52 | opacity: 1; 53 | visibility: visible; 54 | -webkit-transition: opacity 0.4s ease, visibility 0.4s ease; 55 | -moz-transition: opacity 0.4s ease, visibility 0.4s ease; 56 | -ms-transition: opacity 0.4s ease, visibility 0.4s ease; 57 | -o-transition: opacity 0.4s ease, visibility 0.4s ease; 58 | } 59 | .picker-modal-overlay.tohide { 60 | opacity: 0; 61 | visibility: hidden; 62 | } 63 | div.datedropper { 64 | position: absolute; 65 | top: 0; 66 | left: 0; 67 | z-index: 9999; 68 | -webkit-transform: translateX(-50%); 69 | -moz-transform: translateX(-50%); 70 | -ms-transform: translateX(-50%); 71 | -o-transform: translateX(-50%); 72 | line-height: 1; 73 | font-family: sans-serif; 74 | -webkit-box-sizing: border-box; 75 | -moz-box-sizing: border-box; 76 | box-sizing: border-box; 77 | -webkit-user-select: none; 78 | -moz-user-select: none; 79 | -ms-user-select: none; 80 | -o-user-select: none; 81 | user-select: none; 82 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 83 | opacity: 0; 84 | visibility: hidden; 85 | margin-top: -8px; 86 | transform-style: preserve-3d; 87 | -webkit-perspective: 1000; 88 | -moz-perspective: 1000; 89 | -ms-perspective: 1000; 90 | perspective: 1000; 91 | -webkit-backface-visibility: hidden; 92 | -moz-backface-visibility: hidden; 93 | -ms-backface-visibility: hidden; 94 | backface-visibility: hidden; 95 | } 96 | div.datedropper:before { 97 | content: ""; 98 | position: absolute; 99 | width: 16px; 100 | height: 16px; 101 | top: -8px; 102 | left: 50%; 103 | -webkit-transform: translateX(-50%) rotate(45deg); 104 | -moz-transform: translateX(-50%) rotate(45deg); 105 | -ms-transform: translateX(-50%) rotate(45deg); 106 | -o-transform: translateX(-50%) rotate(45deg); 107 | border-top-left-radius: 4px; 108 | } 109 | div.datedropper.picker-focus { 110 | opacity: 1; 111 | visibility: visible; 112 | margin-top: 8px; 113 | } 114 | div.datedropper.picker-modal { 115 | top: 50%!important; 116 | left: 50%!important; 117 | -webkit-transform: translate(-50%, -50%) !important; 118 | -moz-transform: translate(-50%, -50%) !important; 119 | -ms-transform: translate(-50%, -50%) !important; 120 | -o-transform: translate(-50%, -50%) !important; 121 | position: fixed!important; 122 | margin: 0!important; 123 | } 124 | div.datedropper.picker-modal:before { 125 | display: none; 126 | } 127 | div.datedropper .picker { 128 | overflow: hidden; 129 | } 130 | div.datedropper .picker ul { 131 | margin: 0; 132 | padding: 0; 133 | list-style: none; 134 | cursor: pointer; 135 | } 136 | div.datedropper .picker ul.pick { 137 | position: relative; 138 | overflow: hidden; 139 | max-height: 100px; 140 | } 141 | div.datedropper .picker ul.pick:nth-of-type(2) { 142 | box-shadow: 0 1px rgba(0, 0, 0, 0.06); 143 | } 144 | div.datedropper .picker ul.pick li { 145 | position: absolute; 146 | top: 0; 147 | left: 0; 148 | width: 100%; 149 | height: 100%; 150 | text-align: center; 151 | opacity: .5; 152 | display: block; 153 | } 154 | div.datedropper .picker ul.pick li.pick-afr { 155 | -webkit-transform: translateY(100%); 156 | -moz-transform: translateY(100%); 157 | -ms-transform: translateY(100%); 158 | -o-transform: translateY(100%); 159 | } 160 | div.datedropper .picker ul.pick li.pick-bfr { 161 | -webkit-transform: translateY(-100%); 162 | -moz-transform: translateY(-100%); 163 | -ms-transform: translateY(-100%); 164 | -o-transform: translateY(-100%); 165 | } 166 | div.datedropper .picker ul.pick li.pick-sl { 167 | opacity: 1; 168 | -webkit-transform: translateY(0); 169 | -moz-transform: translateY(0); 170 | -ms-transform: translateY(0); 171 | -o-transform: translateY(0); 172 | z-index: 1; 173 | } 174 | div.datedropper .picker ul.pick li span { 175 | font-size: 16px; 176 | position: absolute; 177 | left: 0; 178 | width: 100%; 179 | line-height: 0; 180 | bottom: 24px; 181 | } 182 | div.datedropper .picker ul.pick .pick-arw { 183 | position: absolute; 184 | top: 0; 185 | height: 100%; 186 | width: 25%; 187 | font-size: 10px; 188 | text-align: center; 189 | display: block; 190 | z-index: 10; 191 | cursor: pointer; 192 | background-size: 24px 24px; 193 | background-position: center; 194 | background-repeat: no-repeat; 195 | overflow: hidden; 196 | opacity: 0; 197 | -webkit-transform: scale(0); 198 | -moz-transform: scale(0); 199 | -ms-transform: scale(0); 200 | -o-transform: scale(0); 201 | } 202 | div.datedropper .picker ul.pick .pick-arw i { 203 | line-height: 0; 204 | top: 50%; 205 | position: relative; 206 | display: block; 207 | -webkit-transform: translateY(-50%); 208 | -moz-transform: translateY(-50%); 209 | -ms-transform: translateY(-50%); 210 | -o-transform: translateY(-50%); 211 | } 212 | div.datedropper .picker ul.pick .pick-arw.pick-arw-s1:hover { 213 | opacity: 1; 214 | -webkit-transform: scale(1.2); 215 | -moz-transform: scale(1.2); 216 | -ms-transform: scale(1.2); 217 | -o-transform: scale(1.2); 218 | } 219 | div.datedropper .picker ul.pick .pick-arw.pick-arw-r { 220 | right: 0; 221 | } 222 | div.datedropper .picker ul.pick .pick-arw.pick-arw-r i { 223 | right: 0; 224 | } 225 | div.datedropper .picker ul.pick .pick-arw.pick-arw-l { 226 | left: 0; 227 | } 228 | div.datedropper .picker ul.pick .pick-arw.pick-arw-l i { 229 | left: 0; 230 | } 231 | div.datedropper .picker ul.pick .pick-arw.pick-arw-s2.pick-arw-r { 232 | -webkit-transform: translateX(100%); 233 | -moz-transform: translateX(100%); 234 | -ms-transform: translateX(100%); 235 | -o-transform: translateX(100%); 236 | } 237 | div.datedropper .picker ul.pick .pick-arw.pick-arw-s2.pick-arw-l { 238 | -webkit-transform: translateX(-100%); 239 | -moz-transform: translateX(-100%); 240 | -ms-transform: translateX(-100%); 241 | -o-transform: translateX(-100%); 242 | } 243 | @media only screen and (max-width: 480px) { 244 | div.datedropper .picker ul.pick .pick-arw { 245 | -webkit-transform: scale(1); 246 | -moz-transform: scale(1); 247 | -ms-transform: scale(1); 248 | -o-transform: scale(1); 249 | opacity: 0.4; 250 | } 251 | } 252 | div.datedropper .picker ul.pick.pick-m, 253 | div.datedropper .picker ul.pick.pick-y, 254 | div.datedropper .picker ul.pick.pick-l { 255 | height: 60px; 256 | line-height: 60px; 257 | } 258 | div.datedropper .picker ul.pick.pick-m { 259 | font-size: 32px; 260 | } 261 | div.datedropper .picker ul.pick.pick-y { 262 | font-size: 24px; 263 | } 264 | div.datedropper .picker ul.pick.pick-y.pick-jump .pick-arw.pick-arw-s1.pick-arw-r i { 265 | right: 16px; 266 | } 267 | div.datedropper .picker ul.pick.pick-y.pick-jump .pick-arw.pick-arw-s1.pick-arw-l i { 268 | left: 16px; 269 | } 270 | div.datedropper .picker ul.pick.pick-y.pick-jump .pick-arw.pick-arw-s2.pick-arw-r, 271 | div.datedropper .picker ul.pick.pick-y.pick-jump .pick-arw.pick-arw-s2.pick-arw-l { 272 | -webkit-transform: translateX(0); 273 | -moz-transform: translateX(0); 274 | -ms-transform: translateX(0); 275 | -o-transform: translateX(0); 276 | } 277 | div.datedropper .picker ul.pick.pick-y.pick-jump .pick-arw:hover { 278 | -webkit-transform: scale(1.6); 279 | -moz-transform: scale(1.6); 280 | -ms-transform: scale(1.6); 281 | -o-transform: scale(1.6); 282 | } 283 | div.datedropper .picker ul.pick.pick-d { 284 | height: 100px; 285 | line-height: 80px; 286 | font-size: 64px; 287 | font-weight: bold; 288 | } 289 | div.datedropper .picker ul.pick.pick-l { 290 | position: absolute; 291 | bottom: 0; 292 | left: 0; 293 | right: 0; 294 | z-index: 10; 295 | font-size: 18px; 296 | font-weight: bold; 297 | opacity: 0; 298 | visibility: hidden; 299 | -webkit-transform: translateY(32px); 300 | -moz-transform: translateY(32px); 301 | -ms-transform: translateY(32px); 302 | -o-transform: translateY(32px); 303 | -webkit-transition: all 0.4s ease; 304 | -moz-transition: all 0.4s ease; 305 | -ms-transition: all 0.4s ease; 306 | -o-transition: all 0.4s ease; 307 | } 308 | div.datedropper .picker ul.pick.pick-l.visible { 309 | opacity: 1; 310 | visibility: visible; 311 | -webkit-transform: translateY(0); 312 | -moz-transform: translateY(0); 313 | -ms-transform: translateY(0); 314 | -o-transform: translateY(0); 315 | } 316 | div.datedropper .picker ul.pick:hover .pick-arw { 317 | opacity: 0.6; 318 | -webkit-transform: scale(1); 319 | -moz-transform: scale(1); 320 | -ms-transform: scale(1); 321 | -o-transform: scale(1); 322 | } 323 | div.datedropper .picker ul.pick.pick-d:hover, 324 | div.datedropper .picker ul.pick.pick-y:hover { 325 | background-color: rgba(0, 0, 0, 0.02); 326 | } 327 | div.datedropper .picker .pick-lg { 328 | z-index: 1; 329 | margin: 0 auto; 330 | max-height: 0; 331 | overflow: hidden; 332 | } 333 | div.datedropper .picker .pick-lg.down { 334 | animation: down .8s ease; 335 | } 336 | div.datedropper .picker .pick-lg .pick-h { 337 | opacity: 0.4; 338 | } 339 | div.datedropper .picker .pick-lg ul:after { 340 | content: ""; 341 | display: table; 342 | clear: both; 343 | } 344 | div.datedropper .picker .pick-lg ul li { 345 | float: left; 346 | text-align: center; 347 | width: 14.285714286%; 348 | line-height: 36px; 349 | height: 36px; 350 | font-size: 14px; 351 | } 352 | div.datedropper .picker .pick-lg ul.pick-lg-h { 353 | padding: 0 16px; 354 | } 355 | div.datedropper .picker .pick-lg ul.pick-lg-b { 356 | padding: 16px; 357 | } 358 | div.datedropper .picker .pick-lg ul.pick-lg-b li { 359 | cursor: pointer; 360 | position: relative; 361 | z-index: 1; 362 | } 363 | div.datedropper .picker .pick-lg ul.pick-lg-b li:before { 364 | content: ""; 365 | position: absolute; 366 | z-index: -1; 367 | width: 48px; 368 | height: 48px; 369 | box-shadow: 0 0 32px rgba(0, 0, 0, 0.1); 370 | border-radius: 32px; 371 | top: 50%; 372 | left: 50%; 373 | -webkit-transform: translate(-50%, -50%) scale(0); 374 | -moz-transform: translate(-50%, -50%) scale(0); 375 | -ms-transform: translate(-50%, -50%) scale(0); 376 | -o-transform: translate(-50%, -50%) scale(0); 377 | } 378 | div.datedropper .picker .pick-lg ul.pick-lg-b li.pick-v:hover { 379 | text-decoration: underline; 380 | } 381 | div.datedropper .picker .pick-lg ul.pick-lg-b li.pick-lk:after { 382 | content: ""; 383 | position: absolute; 384 | top: 50%; 385 | left: 4px; 386 | right: 4px; 387 | height: 1px; 388 | background: rgba(0, 0, 0, 0.2); 389 | -webkit-transform: rotate(45deg); 390 | -moz-transform: rotate(45deg); 391 | -ms-transform: rotate(45deg); 392 | -o-transform: rotate(45deg); 393 | } 394 | div.datedropper .picker .pick-lg ul.pick-lg-b li.pick-sl { 395 | font-size: 24px; 396 | } 397 | div.datedropper .picker .pick-lg ul.pick-lg-b li.pick-sl:before { 398 | -webkit-transform: translate(-50%, -50%) scale(1); 399 | -moz-transform: translate(-50%, -50%) scale(1); 400 | -ms-transform: translate(-50%, -50%) scale(1); 401 | -o-transform: translate(-50%, -50%) scale(1); 402 | } 403 | div.datedropper .picker .pick-btns { 404 | margin: -1px; 405 | position: relative; 406 | z-index: 2; 407 | height: 56px; 408 | } 409 | div.datedropper .picker .pick-btns div { 410 | cursor: pointer; 411 | line-height: 0; 412 | } 413 | div.datedropper .picker .pick-btns .pick-submit { 414 | margin: 0 auto; 415 | width: 56px; 416 | height: 56px; 417 | line-height: 64px; 418 | border-radius: 56px; 419 | font-size: 24px; 420 | cursor: pointer; 421 | border-bottom-left-radius: 0; 422 | border-bottom-right-radius: 0; 423 | text-align: center; 424 | position: relative; 425 | top: 0; 426 | } 427 | div.datedropper .picker .pick-btns .pick-submit:after { 428 | font-family: "datedropper" !important; 429 | font-style: normal !important; 430 | font-weight: normal !important; 431 | font-variant: normal !important; 432 | text-transform: none !important; 433 | speak: none; 434 | line-height: 1; 435 | -webkit-font-smoothing: antialiased; 436 | -moz-osx-font-smoothing: grayscale; 437 | line-height: 60px; 438 | content: "\65"; 439 | } 440 | div.datedropper .picker .pick-btns .pick-submit:hover { 441 | top: 4px; 442 | box-shadow: 0 0 0 16px rgba(0, 0, 0, 0.04), 0 0 0 8px rgba(0, 0, 0, 0.04); 443 | } 444 | div.datedropper .picker .pick-btns .pick-btn { 445 | position: absolute; 446 | width: 32px; 447 | height: 32px; 448 | bottom: 0; 449 | text-align: center; 450 | line-height: 38px; 451 | font-size: 16px; 452 | margin: 8px; 453 | border-radius: 4px; 454 | background: rgba(0, 0, 0, 0.03); 455 | } 456 | div.datedropper .picker .pick-btns .pick-btn:hover { 457 | background: #FFF; 458 | -webkit-box-shadow: 0 0 32px rgba(0, 0, 0, 0.1); 459 | -moz-box-shadow: 0 0 32px rgba(0, 0, 0, 0.1); 460 | box-shadow: 0 0 32px rgba(0, 0, 0, 0.1); 461 | -webkit-transform: scale(1.2); 462 | -moz-transform: scale(1.2); 463 | -ms-transform: scale(1.2); 464 | -o-transform: scale(1.2); 465 | } 466 | div.datedropper .picker .pick-btns .pick-btn:after { 467 | font-family: "datedropper" !important; 468 | font-style: normal !important; 469 | font-weight: normal !important; 470 | font-variant: normal !important; 471 | text-transform: none !important; 472 | speak: none; 473 | line-height: 1; 474 | -webkit-font-smoothing: antialiased; 475 | -moz-osx-font-smoothing: grayscale; 476 | } 477 | div.datedropper .picker .pick-btns .pick-btn.pick-btn-sz { 478 | right: 0; 479 | transform-origin: right bottom; 480 | } 481 | div.datedropper .picker .pick-btns .pick-btn.pick-btn-sz:after { 482 | content: "\63"; 483 | } 484 | div.datedropper .picker .pick-btns .pick-btn.pick-btn-lng { 485 | left: 0; 486 | transform-origin: left bottom; 487 | } 488 | div.datedropper .picker .pick-btns .pick-btn.pick-btn-lng:after { 489 | content: "\6a"; 490 | } 491 | div.datedropper.picker-lg { 492 | width: 300px!important; 493 | } 494 | div.datedropper.picker-lg ul.pick.pick-d { 495 | -webkit-transform: scale(0); 496 | -moz-transform: scale(0); 497 | -ms-transform: scale(0); 498 | -o-transform: scale(0); 499 | max-height: 0!important; 500 | } 501 | div.datedropper.picker-lg .pick-lg { 502 | max-height: 320px; 503 | } 504 | div.datedropper.picker-lg .pick-btns .pick-btn.pick-btn-sz:after { 505 | content: "\61"; 506 | } 507 | @media only screen and (max-width: 480px) { 508 | div.datedropper.picker-lg { 509 | position: fixed; 510 | top: 50%!important; 511 | left: 50%!important; 512 | -webkit-transform: translate(-50%, -50%); 513 | -moz-transform: translate(-50%, -50%); 514 | -ms-transform: translate(-50%, -50%); 515 | -o-transform: translate(-50%, -50%); 516 | margin: 0; 517 | } 518 | div.datedropper.picker-lg:before { 519 | display: none; 520 | } 521 | } 522 | @-moz-keyframes picker_locked { 523 | 0%, 524 | 100% { 525 | -webkit-transform: translateX(-50%) translate3d(0, 0, 0); 526 | -moz-transform: translateX(-50%) translate3d(0, 0, 0); 527 | -ms-transform: translateX(-50%) translate3d(0, 0, 0); 528 | -o-transform: translateX(-50%) translate3d(0, 0, 0); 529 | } 530 | 10%, 531 | 30%, 532 | 50%, 533 | 70%, 534 | 90% { 535 | -webkit-transform: translateX(-50%) translate3d(-2px, 0, 0); 536 | -moz-transform: translateX(-50%) translate3d(-2px, 0, 0); 537 | -ms-transform: translateX(-50%) translate3d(-2px, 0, 0); 538 | -o-transform: translateX(-50%) translate3d(-2px, 0, 0); 539 | } 540 | 20%, 541 | 40%, 542 | 60%, 543 | 80% { 544 | -webkit-transform: translateX(-50%) translate3d(2px, 0, 0); 545 | -moz-transform: translateX(-50%) translate3d(2px, 0, 0); 546 | -ms-transform: translateX(-50%) translate3d(2px, 0, 0); 547 | -o-transform: translateX(-50%) translate3d(2px, 0, 0); 548 | } 549 | } 550 | @-webkit-keyframes picker_locked { 551 | 0%, 552 | 100% { 553 | -webkit-transform: translateX(-50%) translate3d(0, 0, 0); 554 | -moz-transform: translateX(-50%) translate3d(0, 0, 0); 555 | -ms-transform: translateX(-50%) translate3d(0, 0, 0); 556 | -o-transform: translateX(-50%) translate3d(0, 0, 0); 557 | } 558 | 10%, 559 | 30%, 560 | 50%, 561 | 70%, 562 | 90% { 563 | -webkit-transform: translateX(-50%) translate3d(-2px, 0, 0); 564 | -moz-transform: translateX(-50%) translate3d(-2px, 0, 0); 565 | -ms-transform: translateX(-50%) translate3d(-2px, 0, 0); 566 | -o-transform: translateX(-50%) translate3d(-2px, 0, 0); 567 | } 568 | 20%, 569 | 40%, 570 | 60%, 571 | 80% { 572 | -webkit-transform: translateX(-50%) translate3d(2px, 0, 0); 573 | -moz-transform: translateX(-50%) translate3d(2px, 0, 0); 574 | -ms-transform: translateX(-50%) translate3d(2px, 0, 0); 575 | -o-transform: translateX(-50%) translate3d(2px, 0, 0); 576 | } 577 | } 578 | @keyframes picker_locked { 579 | 0%, 580 | 100% { 581 | -webkit-transform: translateX(-50%) translate3d(0, 0, 0); 582 | -moz-transform: translateX(-50%) translate3d(0, 0, 0); 583 | -ms-transform: translateX(-50%) translate3d(0, 0, 0); 584 | -o-transform: translateX(-50%) translate3d(0, 0, 0); 585 | } 586 | 10%, 587 | 30%, 588 | 50%, 589 | 70%, 590 | 90% { 591 | -webkit-transform: translateX(-50%) translate3d(-2px, 0, 0); 592 | -moz-transform: translateX(-50%) translate3d(-2px, 0, 0); 593 | -ms-transform: translateX(-50%) translate3d(-2px, 0, 0); 594 | -o-transform: translateX(-50%) translate3d(-2px, 0, 0); 595 | } 596 | 20%, 597 | 40%, 598 | 60%, 599 | 80% { 600 | -webkit-transform: translateX(-50%) translate3d(2px, 0, 0); 601 | -moz-transform: translateX(-50%) translate3d(2px, 0, 0); 602 | -ms-transform: translateX(-50%) translate3d(2px, 0, 0); 603 | -o-transform: translateX(-50%) translate3d(2px, 0, 0); 604 | } 605 | } 606 | @-moz-keyframes picker_locked_large_mobile { 607 | 0%, 608 | 100% { 609 | -webkit-transform: translate(-50%, -50%) translate3d(0, 0, 0); 610 | -moz-transform: translate(-50%, -50%) translate3d(0, 0, 0); 611 | -ms-transform: translate(-50%, -50%) translate3d(0, 0, 0); 612 | -o-transform: translate(-50%, -50%) translate3d(0, 0, 0); 613 | } 614 | 10%, 615 | 30%, 616 | 50%, 617 | 70%, 618 | 90% { 619 | -webkit-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 620 | -moz-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 621 | -ms-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 622 | -o-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 623 | } 624 | 20%, 625 | 40%, 626 | 60%, 627 | 80% { 628 | -webkit-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 629 | -moz-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 630 | -ms-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 631 | -o-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 632 | } 633 | } 634 | @-webkit-keyframes picker_locked_large_mobile { 635 | 0%, 636 | 100% { 637 | -webkit-transform: translate(-50%, -50%) translate3d(0, 0, 0); 638 | -moz-transform: translate(-50%, -50%) translate3d(0, 0, 0); 639 | -ms-transform: translate(-50%, -50%) translate3d(0, 0, 0); 640 | -o-transform: translate(-50%, -50%) translate3d(0, 0, 0); 641 | } 642 | 10%, 643 | 30%, 644 | 50%, 645 | 70%, 646 | 90% { 647 | -webkit-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 648 | -moz-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 649 | -ms-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 650 | -o-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 651 | } 652 | 20%, 653 | 40%, 654 | 60%, 655 | 80% { 656 | -webkit-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 657 | -moz-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 658 | -ms-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 659 | -o-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 660 | } 661 | } 662 | @keyframes picker_locked_large_mobile { 663 | 0%, 664 | 100% { 665 | -webkit-transform: translate(-50%, -50%) translate3d(0, 0, 0); 666 | -moz-transform: translate(-50%, -50%) translate3d(0, 0, 0); 667 | -ms-transform: translate(-50%, -50%) translate3d(0, 0, 0); 668 | -o-transform: translate(-50%, -50%) translate3d(0, 0, 0); 669 | } 670 | 10%, 671 | 30%, 672 | 50%, 673 | 70%, 674 | 90% { 675 | -webkit-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 676 | -moz-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 677 | -ms-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 678 | -o-transform: translate(-50%, -50%) translate3d(-2px, 0, 0); 679 | } 680 | 20%, 681 | 40%, 682 | 60%, 683 | 80% { 684 | -webkit-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 685 | -moz-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 686 | -ms-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 687 | -o-transform: translate(-50%, -50%) translate3d(2px, 0, 0); 688 | } 689 | } 690 | div.datedropper.picker-rmbl { 691 | -webkit-animation: picker_locked 0.4s ease; 692 | -moz-animation: picker_locked 0.4s ease; 693 | animation: picker_locked 0.4s ease; 694 | } 695 | @media only screen and (max-width: 480px) { 696 | div.datedropper.picker-rmbl.picker-lg { 697 | -webkit-animation: picker_locked_large_mobile 0.4s ease; 698 | -moz-animation: picker_locked_large_mobile 0.4s ease; 699 | animation: picker_locked_large_mobile 0.4s ease; 700 | } 701 | } 702 | div.datedropper.picker-lkd .pick-submit { 703 | background-color: rgba(0, 0, 0, 0.04) !important; 704 | color: rgba(0, 0, 0, 0.2) !important; 705 | } 706 | div.datedropper.picker-lkd .pick-submit:hover { 707 | -webkit-box-shadow: none !important; 708 | -moz-box-shadow: none !important; 709 | box-shadow: none !important; 710 | } 711 | div.datedropper.picker-lkd .pick-submit:after { 712 | content: "\62" !important; 713 | } 714 | div.datedropper.picker-fxs { 715 | -webkit-transition: width 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease; 716 | -moz-transition: width 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease; 717 | -ms-transition: width 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease; 718 | -o-transition: width 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease; 719 | } 720 | div.datedropper.picker-fxs ul.pick.pick-d { 721 | -webkit-transition: top 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), transform 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), max-height 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), background-color 0.4s ease; 722 | -moz-transition: top 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), transform 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), max-height 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), background-color 0.4s ease; 723 | -ms-transition: top 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), transform 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), max-height 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), background-color 0.4s ease; 724 | -o-transition: top 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), transform 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), max-height 0.8s cubic-bezier(1, -0.55, 0.2, 1.37), background-color 0.4s ease; 725 | } 726 | div.datedropper.picker-fxs ul.pick.pick-y { 727 | -webkit-transition: background-color 0.4s ease; 728 | -moz-transition: background-color 0.4s ease; 729 | -ms-transition: background-color 0.4s ease; 730 | -o-transition: background-color 0.4s ease; 731 | } 732 | div.datedropper.picker-fxs ul.pick li { 733 | -webkit-transition: transform 0.4s ease, opacity 0.4s ease; 734 | -moz-transition: transform 0.4s ease, opacity 0.4s ease; 735 | -ms-transition: transform 0.4s ease, opacity 0.4s ease; 736 | -o-transition: transform 0.4s ease, opacity 0.4s ease; 737 | } 738 | div.datedropper.picker-fxs ul.pick .pick-arw { 739 | -webkit-transition: transform 0.2s ease, opacity 0.2s ease; 740 | -moz-transition: transform 0.2s ease, opacity 0.2s ease; 741 | -ms-transition: transform 0.2s ease, opacity 0.2s ease; 742 | -o-transition: transform 0.2s ease, opacity 0.2s ease; 743 | } 744 | div.datedropper.picker-fxs ul.pick .pick-arw i { 745 | -webkit-transition: right 0.2s ease, left 0.2s ease; 746 | -moz-transition: right 0.2s ease, left 0.2s ease; 747 | -ms-transition: right 0.2s ease, left 0.2s ease; 748 | -o-transition: right 0.2s ease, left 0.2s ease; 749 | } 750 | div.datedropper.picker-fxs .pick-lg { 751 | -webkit-transition: max-height 0.8s cubic-bezier(1, -0.55, 0.2, 1.37); 752 | -moz-transition: max-height 0.8s cubic-bezier(1, -0.55, 0.2, 1.37); 753 | -ms-transition: max-height 0.8s cubic-bezier(1, -0.55, 0.2, 1.37); 754 | -o-transition: max-height 0.8s cubic-bezier(1, -0.55, 0.2, 1.37); 755 | } 756 | div.datedropper.picker-fxs .pick-lg .pick-lg-b li:before { 757 | -webkit-transition: transform 0.2s ease; 758 | -moz-transition: transform 0.2s ease; 759 | -ms-transition: transform 0.2s ease; 760 | -o-transition: transform 0.2s ease; 761 | } 762 | div.datedropper.picker-fxs .pick-btns .pick-submit { 763 | -webkit-transition: top 0.2s ease, box-shadow 0.4s ease, background-color 0.4s ease; 764 | -moz-transition: top 0.2s ease, box-shadow 0.4s ease, background-color 0.4s ease; 765 | -ms-transition: top 0.2s ease, box-shadow 0.4s ease, background-color 0.4s ease; 766 | -o-transition: top 0.2s ease, box-shadow 0.4s ease, background-color 0.4s ease; 767 | } 768 | div.datedropper.picker-fxs .pick-btns .pick-btn { 769 | -webkit-transition: all 0.2s ease; 770 | -moz-transition: all 0.2s ease; 771 | -ms-transition: all 0.2s ease; 772 | -o-transition: all 0.2s ease; 773 | } 774 | @media only screen and (max-width: 480px) { 775 | div.datedropper.picker-fxs { 776 | -webkit-transition: opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease; 777 | -moz-transition: opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease; 778 | -ms-transition: opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease; 779 | -o-transition: opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease; 780 | } 781 | div.datedropper.picker-fxs ul.pick.pick-d, 782 | div.datedropper.picker-fxs .pick-lg { 783 | -webkit-transition: none; 784 | -moz-transition: none; 785 | -ms-transition: none; 786 | -o-transition: none; 787 | } 788 | } 789 | div.datedropper.vanilla { 790 | border-radius: 6px; 791 | width: 180px; 792 | } 793 | div.datedropper.vanilla .picker { 794 | border-radius: 6px; 795 | box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1); 796 | } 797 | div.datedropper.vanilla .pick-l { 798 | border-bottom-left-radius: 6px; 799 | border-bottom-right-radius: 6px; 800 | } 801 | div.datedropper.vanilla:before, 802 | div.datedropper.vanilla .pick-submit, 803 | div.datedropper.vanilla .pick-lg-b .pick-sl:before, 804 | div.datedropper.vanilla .pick-m, 805 | div.datedropper.vanilla .pick-lg-h { 806 | background-color: #feac92; 807 | } 808 | div.datedropper.vanilla .pick-y.pick-jump, 809 | div.datedropper.vanilla .pick li span, 810 | div.datedropper.vanilla .pick-lg-b .pick-wke, 811 | div.datedropper.vanilla .pick-btn { 812 | color: #feac92; 813 | } 814 | div.datedropper.vanilla .picker, 815 | div.datedropper.vanilla .pick-l { 816 | background-color: #ffffff; 817 | } 818 | div.datedropper.vanilla .picker, 819 | div.datedropper.vanilla .pick-arw, 820 | div.datedropper.vanilla .pick-l { 821 | color: #9ed7db; 822 | } 823 | div.datedropper.vanilla .pick-m, 824 | div.datedropper.vanilla .pick-m .pick-arw, 825 | div.datedropper.vanilla .pick-lg-h, 826 | div.datedropper.vanilla .pick-lg-b .pick-sl, 827 | div.datedropper.vanilla .pick-submit { 828 | color: #faf7f4; 829 | } 830 | div.datedropper.vanilla.picker-tiny:before, 831 | div.datedropper.vanilla.picker-tiny .pick-m { 832 | background-color: #ffffff; 833 | } 834 | div.datedropper.vanilla.picker-tiny .pick-m, 835 | div.datedropper.vanilla.picker-tiny .pick-m .pick-arw { 836 | color: #9ed7db; 837 | } 838 | div.datedropper.leaf { 839 | border-radius: 6px; 840 | width: 180px; 841 | } 842 | div.datedropper.leaf .picker { 843 | border-radius: 6px; 844 | box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1); 845 | } 846 | div.datedropper.leaf .pick-l { 847 | border-bottom-left-radius: 6px; 848 | border-bottom-right-radius: 6px; 849 | } 850 | div.datedropper.leaf:before, 851 | div.datedropper.leaf .pick-submit, 852 | div.datedropper.leaf .pick-lg-b .pick-sl:before, 853 | div.datedropper.leaf .pick-m, 854 | div.datedropper.leaf .pick-lg-h { 855 | background-color: #1ecd80; 856 | } 857 | div.datedropper.leaf .pick-y.pick-jump, 858 | div.datedropper.leaf .pick li span, 859 | div.datedropper.leaf .pick-lg-b .pick-wke, 860 | div.datedropper.leaf .pick-btn { 861 | color: #1ecd80; 862 | } 863 | div.datedropper.leaf .picker, 864 | div.datedropper.leaf .pick-l { 865 | background-color: #fefff2; 866 | } 867 | div.datedropper.leaf .picker, 868 | div.datedropper.leaf .pick-arw, 869 | div.datedropper.leaf .pick-l { 870 | color: #528971; 871 | } 872 | div.datedropper.leaf .pick-m, 873 | div.datedropper.leaf .pick-m .pick-arw, 874 | div.datedropper.leaf .pick-lg-h, 875 | div.datedropper.leaf .pick-lg-b .pick-sl, 876 | div.datedropper.leaf .pick-submit { 877 | color: #fefff2; 878 | } 879 | div.datedropper.leaf.picker-tiny:before, 880 | div.datedropper.leaf.picker-tiny .pick-m { 881 | background-color: #fefff2; 882 | } 883 | div.datedropper.leaf.picker-tiny .pick-m, 884 | div.datedropper.leaf.picker-tiny .pick-m .pick-arw { 885 | color: #528971; 886 | } 887 | div.datedropper.primary { 888 | border-radius: 6px; 889 | width: 180px; 890 | } 891 | div.datedropper.primary .picker { 892 | border-radius: 6px; 893 | box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1); 894 | } 895 | div.datedropper.primary .pick-l { 896 | border-bottom-left-radius: 6px; 897 | border-bottom-right-radius: 6px; 898 | } 899 | div.datedropper.primary:before, 900 | div.datedropper.primary .pick-submit, 901 | div.datedropper.primary .pick-lg-b .pick-sl:before, 902 | div.datedropper.primary .pick-m, 903 | div.datedropper.primary .pick-lg-h { 904 | background-color: #fd4741; 905 | } 906 | div.datedropper.primary .pick-y.pick-jump, 907 | div.datedropper.primary .pick li span, 908 | div.datedropper.primary .pick-lg-b .pick-wke, 909 | div.datedropper.primary .pick-btn { 910 | color: #fd4741; 911 | } 912 | div.datedropper.primary .picker, 913 | div.datedropper.primary .pick-l { 914 | background-color: #ffffff; 915 | } 916 | div.datedropper.primary .picker, 917 | div.datedropper.primary .pick-arw, 918 | div.datedropper.primary .pick-l { 919 | color: #4d4d4d; 920 | } 921 | div.datedropper.primary .pick-m, 922 | div.datedropper.primary .pick-m .pick-arw, 923 | div.datedropper.primary .pick-lg-h, 924 | div.datedropper.primary .pick-lg-b .pick-sl, 925 | div.datedropper.primary .pick-submit { 926 | color: #ffffff; 927 | } 928 | div.datedropper.primary.picker-tiny:before, 929 | div.datedropper.primary.picker-tiny .pick-m { 930 | background-color: #ffffff; 931 | } 932 | div.datedropper.primary.picker-tiny .pick-m, 933 | div.datedropper.primary.picker-tiny .pick-m .pick-arw { 934 | color: #4d4d4d; 935 | } 936 | div.datedropper .null { 937 | -webkit-transition: none; 938 | -moz-transition: none; 939 | -ms-transition: none; 940 | -o-transition: none; 941 | } 942 | -------------------------------------------------------------------------------- /datedropper.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | var 3 | // CSS EVENT DETECT 4 | csse = { 5 | t : 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 6 | a : 'webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend' 7 | }, 8 | // I18N 9 | i18n = { 10 | 'en' : { 11 | name : 'English', 12 | gregorian : false, 13 | months : { 14 | short: [ 15 | 'Jan', 16 | 'Feb', 17 | 'Mar', 18 | 'Apr', 19 | 'May', 20 | 'June', 21 | 'July', 22 | 'Aug', 23 | 'Sept', 24 | 'Oct', 25 | 'Nov', 26 | 'Dec' 27 | ], 28 | full : [ 29 | 'January', 30 | 'February', 31 | 'March', 32 | 'April', 33 | 'May', 34 | 'June', 35 | 'July', 36 | 'August', 37 | 'September', 38 | 'October', 39 | 'November', 40 | 'December' 41 | ] 42 | }, 43 | weekdays : { 44 | short : [ 45 | 'S', 46 | 'M', 47 | 'T', 48 | 'W', 49 | 'T', 50 | 'F', 51 | 'S' 52 | ], 53 | full : [ 54 | 'Sunday', 55 | 'Monday', 56 | 'Tuesday', 57 | 'Wednesday', 58 | 'Thursday', 59 | 'Friday', 60 | 'Saturday' 61 | ] 62 | } 63 | }, 64 | 'ka' : { 65 | name : 'Georgian', 66 | gregorian : false, 67 | months : { 68 | short: [ 69 | 'იან', 70 | 'თებ', 71 | 'მარტ', 72 | 'აპრ', 73 | 'მაი', 74 | 'ივნ', 75 | 'ივლ', 76 | 'აგვ', 77 | 'სექტ', 78 | 'ოქტ', 79 | 'ნოემბ', 80 | 'დეკ' 81 | ], 82 | full : [ 83 | 'იანვარი', 84 | 'თებერვალი', 85 | 'მარტი', 86 | 'აპრილი', 87 | 'მაისი', 88 | 'ივნისი', 89 | 'ივლისი', 90 | 'აგვისტო', 91 | 'სექტემბერი', 92 | 'ოქტომბერი', 93 | 'ნოემბერი', 94 | 'დეკემბერი' 95 | ] 96 | }, 97 | weekdays : { 98 | short : [ 99 | 'კვ', 100 | 'ორ', 101 | 'სამ', 102 | 'ოთხ', 103 | 'ხუთ', 104 | 'პარ', 105 | 'შაბ' 106 | ], 107 | full : [ 108 | 'კვირა', 109 | 'ორშაბათი', 110 | 'სამშაბათი', 111 | 'ოთხშაბათი', 112 | 'ხუთშაბათი', 113 | 'პარასკევი', 114 | 'შაბათი' 115 | ] 116 | } 117 | },// 118 | 'it' : { 119 | name : 'Italiano', 120 | gregorian : true, 121 | months : { 122 | short: [ 123 | 'Gen', 124 | 'Feb', 125 | 'Mar', 126 | 'Apr', 127 | 'Mag', 128 | 'Giu', 129 | 'Lug', 130 | 'Ago', 131 | 'Set', 132 | 'Ott', 133 | 'Nov', 134 | 'Dic' 135 | ], 136 | full : [ 137 | 'Gennaio', 138 | 'Febbraio', 139 | 'Marzo', 140 | 'Aprile', 141 | 'Maggio', 142 | 'Giugno', 143 | 'Luglio', 144 | 'Agosto', 145 | 'Settembre', 146 | 'Ottobre', 147 | 'Novembre', 148 | 'Dicembre' 149 | ] 150 | }, 151 | weekdays : { 152 | short : [ 153 | 'D', 154 | 'L', 155 | 'M', 156 | 'M', 157 | 'G', 158 | 'V', 159 | 'S' 160 | ], 161 | full : [ 162 | 'Domenica', 163 | 'Lunedì', 164 | 'Martedì', 165 | 'Mercoledì', 166 | 'Giovedì', 167 | 'Venerdì', 168 | 'Sabato' 169 | ] 170 | } 171 | }, 172 | 'fr' : { 173 | name : 'Français', 174 | gregorian : true, 175 | months : { 176 | short: [ 177 | 'Jan', 178 | 'Fév', 179 | 'Mar', 180 | 'Avr', 181 | 'Mai', 182 | 'Jui', 183 | 'Jui', 184 | 'Aoû', 185 | 'Sep', 186 | 'Oct', 187 | 'Nov', 188 | 'Déc' 189 | ], 190 | full : [ 191 | 'Janvier', 192 | 'Février', 193 | 'Mars', 194 | 'Avril', 195 | 'Mai', 196 | 'Juin', 197 | 'Juillet', 198 | 'Août', 199 | 'Septembre', 200 | 'Octobre', 201 | 'Novembre', 202 | 'Décembre' 203 | ] 204 | }, 205 | weekdays : { 206 | short : [ 207 | 'D', 208 | 'L', 209 | 'M', 210 | 'M', 211 | 'J', 212 | 'V', 213 | 'S' 214 | ], 215 | full : [ 216 | 'Dimanche', 217 | 'Lundi', 218 | 'Mardi', 219 | 'Mercredi', 220 | 'Jeudi', 221 | 'Vendredi', 222 | 'Samedi' 223 | ] 224 | } 225 | }, 226 | 'zh' : { 227 | name : '中文', 228 | gregorian : true, 229 | months : { 230 | short: [ 231 | '一月', 232 | '二月', 233 | '三月', 234 | '四月', 235 | '五月', 236 | '六月', 237 | '七月', 238 | '八月', 239 | '九月', 240 | '十月', 241 | '十一月', 242 | '十二月' 243 | ], 244 | full : [ 245 | '一月', 246 | '二月', 247 | '三月', 248 | '四月', 249 | '五月', 250 | '六月', 251 | '七月', 252 | '八月', 253 | '九月', 254 | '十月', 255 | '十一月', 256 | '十二月' 257 | ] 258 | }, 259 | weekdays : { 260 | short : [ 261 | '天', 262 | '一', 263 | '二', 264 | '三', 265 | '四', 266 | '五', 267 | '六' 268 | ], 269 | full : [ 270 | '星期天', 271 | '星期一', 272 | '星期二', 273 | '星期三', 274 | '星期四', 275 | '星期五', 276 | '星期六' 277 | ] 278 | } 279 | }, 280 | 'ar' : { 281 | name : 'العَرَبِيَّة', 282 | gregorian : false, 283 | months : { 284 | short: [ 285 | 'جانفي', 286 | 'فيفري', 287 | 'مارس', 288 | 'أفريل', 289 | 'ماي', 290 | 'جوان', 291 | 'جويلية', 292 | 'أوت', 293 | 'سبتمبر', 294 | 'أكتوبر', 295 | 'نوفمبر', 296 | 'ديسمبر' 297 | ], 298 | full : [ 299 | 'جانفي', 300 | 'فيفري', 301 | 'مارس', 302 | 'أفريل', 303 | 'ماي', 304 | 'جوان', 305 | 'جويلية', 306 | 'أوت', 307 | 'سبتمبر', 308 | 'أكتوبر', 309 | 'نوفمبر', 310 | 'ديسمبر' 311 | ] 312 | }, 313 | weekdays : { 314 | short : [ 315 | 'S', 316 | 'M', 317 | 'T', 318 | 'W', 319 | 'T', 320 | 'F', 321 | 'S' 322 | ], 323 | full : [ 324 | 'الأحد', 325 | 'الإثنين', 326 | 'الثلثاء', 327 | 'الأربعاء', 328 | 'الخميس', 329 | 'الجمعة', 330 | 'السبت' 331 | ] 332 | } 333 | }, 334 | 'fa' : { 335 | name : 'فارسی', 336 | gregorian : false, 337 | months : { 338 | short: [ 339 | 'ژانویه', 340 | 'فووریه', 341 | 'مارچ', 342 | 'آپریل', 343 | 'می', 344 | 'جون', 345 | 'جولای', 346 | 'آگوست', 347 | 'سپتامبر', 348 | 'اکتبر', 349 | 'نوامبر', 350 | 'دسامبر' 351 | ], 352 | full : [ 353 | 'ژانویه', 354 | 'فووریه', 355 | 'مارچ', 356 | 'آپریل', 357 | 'می', 358 | 'جون', 359 | 'جولای', 360 | 'آگوست', 361 | 'سپتامبر', 362 | 'اکتبر', 363 | 'نوامبر', 364 | 'دسامبر' 365 | ] 366 | }, 367 | weekdays : { 368 | short : [ 369 | 'S', 370 | 'M', 371 | 'T', 372 | 'W', 373 | 'T', 374 | 'F', 375 | 'S' 376 | ], 377 | full : [ 378 | 'یکشنبه', 379 | 'دوشنبه', 380 | 'سه شنبه', 381 | 'چهارشنبه', 382 | 'پنج شنبه', 383 | 'جمعه', 384 | 'شنبه' 385 | ] 386 | } 387 | }, 388 | 'hu' : { 389 | name : 'Hungarian', 390 | gregorian : true, 391 | months : { 392 | short: [ 393 | "jan", 394 | "feb", 395 | "már", 396 | "ápr", 397 | "máj", 398 | "jún", 399 | "júl", 400 | "aug", 401 | "sze", 402 | "okt", 403 | "nov", 404 | "dec" 405 | ], 406 | full : [ 407 | "január", 408 | "február", 409 | "március", 410 | "április", 411 | "május", 412 | "június", 413 | "július", 414 | "augusztus", 415 | "szeptember", 416 | "október", 417 | "november", 418 | "december" 419 | ] 420 | }, 421 | weekdays : { 422 | short : [ 423 | 'v', 424 | 'h', 425 | 'k', 426 | 's', 427 | 'c', 428 | 'p', 429 | 's' 430 | ], 431 | full : [ 432 | 'vasárnap', 433 | 'hétfő', 434 | 'kedd', 435 | 'szerda', 436 | 'csütörtök', 437 | 'péntek', 438 | 'szombat' 439 | ] 440 | } 441 | }, 442 | 'gr' : { 443 | name : 'Ελληνικά', 444 | gregorian : true, 445 | months : { 446 | short: [ 447 | "Ιαν", 448 | "Φεβ", 449 | "Μάρ", 450 | "Απρ", 451 | "Μάι", 452 | "Ιούν", 453 | "Ιούλ", 454 | "Αύγ", 455 | "Σεπ", 456 | "Οκτ", 457 | "Νοέ", 458 | "Δεκ" 459 | ], 460 | full : [ 461 | "Ιανουάριος", 462 | "Φεβρουάριος", 463 | "Μάρτιος", 464 | "Απρίλιος", 465 | "Μάιος", 466 | "Ιούνιος", 467 | "Ιούλιος", 468 | "Αύγουστος", 469 | "Σεπτέμβριος", 470 | "Οκτώβριος", 471 | "Νοέμβριος", 472 | "Δεκέμβριος" 473 | ] 474 | }, 475 | weekdays : { 476 | short : [ 477 | 'Κ', 478 | 'Δ', 479 | 'Τ', 480 | 'Τ', 481 | 'Π', 482 | 'Π', 483 | 'Σ' 484 | ], 485 | full : [ 486 | 'Κυριακή', 487 | 'Δευτέρα', 488 | 'Τρίτη', 489 | 'Τετάρτη', 490 | 'Πέμπτη', 491 | 'Παρασκευή', 492 | 'Σάββατο' 493 | ] 494 | } 495 | }, 496 | 'es' : { 497 | name : 'Español', 498 | gregorian : true, 499 | months : { 500 | short: [ 501 | "Ene", 502 | "Feb", 503 | "Mar", 504 | "Abr", 505 | "May", 506 | "Jun", 507 | "Jul", 508 | "Ago", 509 | "Sep", 510 | "Oct", 511 | "Nov", 512 | "Dic" 513 | ], 514 | full : [ 515 | "Enero", 516 | "Febrero", 517 | "Marzo", 518 | "Abril", 519 | "Mayo", 520 | "Junio", 521 | "Julio", 522 | "Agosto", 523 | "Septiembre", 524 | "Octubre", 525 | "Noviembre", 526 | "Diciembre" 527 | ] 528 | }, 529 | weekdays : { 530 | short : [ 531 | 'D', 532 | 'L', 533 | 'M', 534 | 'X', 535 | 'J', 536 | 'V', 537 | 'S' 538 | ], 539 | full : [ 540 | 'Domingo', 541 | 'Lunes', 542 | 'Martes', 543 | 'Miércoles', 544 | 'Jueves', 545 | 'Viernes', 546 | 'Sábado' 547 | ] 548 | } 549 | }, 550 | 'da' : { 551 | name : 'Dansk', 552 | gregorian : true, 553 | months : { 554 | short: [ 555 | "jan", 556 | "feb", 557 | "mar", 558 | "apr", 559 | "maj", 560 | "jun", 561 | "jul", 562 | "aug", 563 | "sep", 564 | "okt", 565 | "nov", 566 | "dec" 567 | ], 568 | full : [ 569 | "januar", 570 | "februar", 571 | "marts", 572 | "april", 573 | "maj", 574 | "juni", 575 | "juli", 576 | "august", 577 | "september", 578 | "oktober", 579 | "november", 580 | "december" 581 | ] 582 | }, 583 | weekdays : { 584 | short : [ 585 | 's', 586 | 'm', 587 | 't', 588 | 'o', 589 | 't', 590 | 'f', 591 | 'l' 592 | ], 593 | full : [ 594 | 'søndag', 595 | 'mandag', 596 | 'tirsdag', 597 | 'onsdag', 598 | 'torsdag', 599 | 'fredag', 600 | 'lørdag' 601 | ] 602 | } 603 | }, 604 | 'de' : { 605 | name : 'Deutsch', 606 | gregorian : true, 607 | months : { 608 | short: [ 609 | "Jan", 610 | "Feb", 611 | "Mär", 612 | "Apr", 613 | "Mai", 614 | "Jun", 615 | "Jul", 616 | "Aug", 617 | "Sep", 618 | "Okt", 619 | "Nov", 620 | "Dez" 621 | ], 622 | full : [ 623 | "Januar", 624 | "Februar", 625 | "März", 626 | "April", 627 | "Mai", 628 | "Juni", 629 | "Juli", 630 | "August", 631 | "September", 632 | "Oktober", 633 | "November", 634 | "Dezember" 635 | ] 636 | }, 637 | weekdays : { 638 | short : [ 639 | 'S', 640 | 'M', 641 | 'D', 642 | 'M', 643 | 'D', 644 | 'F', 645 | 'S' 646 | ], 647 | full : [ 648 | 'Sonntag', 649 | 'Montag', 650 | 'Dienstag', 651 | 'Mittwoch', 652 | 'Donnerstag', 653 | 'Freitag', 654 | 'Samstag' 655 | ] 656 | } 657 | }, 658 | 'nl' : { 659 | name : 'Nederlands', 660 | gregorian : true, 661 | months : { 662 | short: [ 663 | "jan", 664 | "feb", 665 | "maa", 666 | "apr", 667 | "mei", 668 | "jun", 669 | "jul", 670 | "aug", 671 | "sep", 672 | "okt", 673 | "nov", 674 | "dec" 675 | ], 676 | full : [ 677 | "januari", 678 | "februari", 679 | "maart", 680 | "april", 681 | "mei", 682 | "juni", 683 | "juli", 684 | "augustus", 685 | "september", 686 | "oktober", 687 | "november", 688 | "december" 689 | ] 690 | }, 691 | weekdays : { 692 | short : [ 693 | 'z', 694 | 'm', 695 | 'd', 696 | 'w', 697 | 'd', 698 | 'v', 699 | 'z' 700 | ], 701 | full : [ 702 | 'zondag', 703 | 'maandag', 704 | 'dinsdag', 705 | 'woensdag', 706 | 'donderdag', 707 | 'vrijdag', 708 | 'zaterdag' 709 | ] 710 | } 711 | }, 712 | 'pl' : { 713 | name : 'język polski', 714 | gregorian : true, 715 | months : { 716 | short: [ 717 | "sty", 718 | "lut", 719 | "mar", 720 | "kwi", 721 | "maj", 722 | "cze", 723 | "lip", 724 | "sie", 725 | "wrz", 726 | "paź", 727 | "lis", 728 | "gru" 729 | ], 730 | full : [ 731 | "styczeń", 732 | "luty", 733 | "marzec", 734 | "kwiecień", 735 | "maj", 736 | "czerwiec", 737 | "lipiec", 738 | "sierpień", 739 | "wrzesień", 740 | "październik", 741 | "listopad", 742 | "grudzień" 743 | ] 744 | }, 745 | weekdays : { 746 | short : [ 747 | 'n', 748 | 'p', 749 | 'w', 750 | 'ś', 751 | 'c', 752 | 'p', 753 | 's' 754 | ], 755 | full : [ 756 | 'niedziela', 757 | 'poniedziałek', 758 | 'wtorek', 759 | 'środa', 760 | 'czwartek', 761 | 'piątek', 762 | 'sobota' 763 | ] 764 | } 765 | }, 766 | 'pt' : { 767 | name : 'Português', 768 | gregorian : true, 769 | months : { 770 | short: [ 771 | "Janeiro", 772 | "Fevereiro", 773 | "Março", 774 | "Abril", 775 | "Maio", 776 | "Junho", 777 | "Julho", 778 | "Agosto", 779 | "Setembro", 780 | "Outubro", 781 | "Novembro", 782 | "Dezembro" 783 | ], 784 | full : [ 785 | "Janeiro", 786 | "Fevereiro", 787 | "Março", 788 | "Abril", 789 | "Maio", 790 | "Junho", 791 | "Julho", 792 | "Agosto", 793 | "Setembro", 794 | "Outubro", 795 | "Novembro", 796 | "Dezembro" 797 | ] 798 | }, 799 | weekdays : { 800 | short : [ 801 | "D", 802 | "S", 803 | "T", 804 | "Q", 805 | "Q", 806 | "S", 807 | "S" 808 | ], 809 | full : [ 810 | "Domingo", 811 | "Segunda", 812 | "Terça", 813 | "Quarta", 814 | "Quinta", 815 | "Sexta", 816 | "Sábado" 817 | ] 818 | } 819 | }, 820 | 'si' : { 821 | name : 'Slovenščina', 822 | gregorian : true, 823 | months : { 824 | short: [ 825 | "jan", 826 | "feb", 827 | "mar", 828 | "apr", 829 | "maj", 830 | "jun", 831 | "jul", 832 | "avg", 833 | "sep", 834 | "okt", 835 | "nov", 836 | "dec" 837 | ], 838 | full : [ 839 | "januar", 840 | "februar", 841 | "marec", 842 | "april", 843 | "maj", 844 | "junij", 845 | "julij", 846 | "avgust", 847 | "september", 848 | "oktober", 849 | "november", 850 | "december" 851 | ] 852 | }, 853 | weekdays : { 854 | short : [ 855 | 'n', 856 | 'p', 857 | 't', 858 | 's', 859 | 'č', 860 | 'p', 861 | 's' 862 | ], 863 | full : [ 864 | 'nedelja', 865 | 'ponedeljek', 866 | 'torek', 867 | 'sreda', 868 | 'četrtek', 869 | 'petek', 870 | 'sobota' 871 | ] 872 | } 873 | }, 874 | 'uk' : { 875 | name : 'українська мова', 876 | gregorian : true, 877 | months : { 878 | short: [ 879 | "січень", 880 | "лютий", 881 | "березень", 882 | "квітень", 883 | "травень", 884 | "червень", 885 | "липень", 886 | "серпень", 887 | "вересень", 888 | "жовтень", 889 | "листопад", 890 | "грудень" 891 | ], 892 | full : [ 893 | "січень", 894 | "лютий", 895 | "березень", 896 | "квітень", 897 | "травень", 898 | "червень", 899 | "липень", 900 | "серпень", 901 | "вересень", 902 | "жовтень", 903 | "листопад", 904 | "грудень" 905 | ] 906 | }, 907 | weekdays : { 908 | short : [ 909 | 'н', 910 | 'п', 911 | 'в', 912 | 'с', 913 | 'ч', 914 | 'п', 915 | 'с' 916 | ], 917 | full : [ 918 | 'неділя', 919 | 'понеділок', 920 | 'вівторок', 921 | 'середа', 922 | 'четвер', 923 | 'п\'ятниця', 924 | 'субота' 925 | ] 926 | } 927 | }, 928 | 'ru' : { 929 | name : 'русский язык', 930 | gregorian : true, 931 | months : { 932 | short: [ 933 | "январь", 934 | "февраль", 935 | "март", 936 | "апрель", 937 | "май", 938 | "июнь", 939 | "июль", 940 | "август", 941 | "сентябрь", 942 | "октябрь", 943 | "ноябрь", 944 | "декабрь" 945 | ], 946 | full : [ 947 | "январь", 948 | "февраль", 949 | "март", 950 | "апрель", 951 | "май", 952 | "июнь", 953 | "июль", 954 | "август", 955 | "сентябрь", 956 | "октябрь", 957 | "ноябрь", 958 | "декабрь" 959 | ] 960 | }, 961 | weekdays : { 962 | short : [ 963 | 'в', 964 | 'п', 965 | 'в', 966 | 'с', 967 | 'ч', 968 | 'п', 969 | 'с' 970 | ], 971 | full : [ 972 | 'воскресенье', 973 | 'понедельник', 974 | 'вторник', 975 | 'среда', 976 | 'четверг', 977 | 'пятница', 978 | 'суббота' 979 | ] 980 | } 981 | }, 982 | 'tr' : { 983 | name : 'Türkçe', 984 | gregorian : true, 985 | months : { 986 | short: [ 987 | "Oca", 988 | "Şub", 989 | "Mar", 990 | "Nis", 991 | "May", 992 | "Haz", 993 | "Tem", 994 | "Ağu", 995 | "Eyl", 996 | "Eki", 997 | "Kas", 998 | "Ara" 999 | ], 1000 | full : [ 1001 | "Ocak", 1002 | "Şubat", 1003 | "Mart", 1004 | "Nisan", 1005 | "Mayıs", 1006 | "Haziran", 1007 | "Temmuz", 1008 | "Ağustos", 1009 | "Eylül", 1010 | "Ekim", 1011 | "Kasım", 1012 | "Aralık" 1013 | ] 1014 | }, 1015 | weekdays : { 1016 | short : [ 1017 | 'P', 1018 | 'P', 1019 | 'S', 1020 | 'Ç', 1021 | 'P', 1022 | 'C', 1023 | 'C' 1024 | ], 1025 | full : [ 1026 | 'Pazar', 1027 | 'Pazartesi', 1028 | 'Sali', 1029 | 'Çarşamba', 1030 | 'Perşembe', 1031 | 'Cuma', 1032 | 'Cumartesi' 1033 | ] 1034 | } 1035 | }, 1036 | 'ko' : { 1037 | name : '조선말', 1038 | gregorian : true, 1039 | months : { 1040 | short: [ 1041 | "1월", 1042 | "2월", 1043 | "3월", 1044 | "4월", 1045 | "5월", 1046 | "6월", 1047 | "7월", 1048 | "8월", 1049 | "9월", 1050 | "10월", 1051 | "11월", 1052 | "12월" 1053 | ], 1054 | full : [ 1055 | "1월", 1056 | "2월", 1057 | "3월", 1058 | "4월", 1059 | "5월", 1060 | "6월", 1061 | "7월", 1062 | "8월", 1063 | "9월", 1064 | "10월", 1065 | "11월", 1066 | "12월" 1067 | ] 1068 | }, 1069 | weekdays : { 1070 | short : [ 1071 | '일', 1072 | '월', 1073 | '화', 1074 | '수', 1075 | '목', 1076 | '금', 1077 | '토' 1078 | ], 1079 | full : [ 1080 | '일요일', 1081 | '월요일', 1082 | '화요일', 1083 | '수요일', 1084 | '목요일', 1085 | '금요일', 1086 | '토요일' 1087 | ] 1088 | } 1089 | }, 1090 | 'fi' : { 1091 | name : 'suomen kieli', 1092 | gregorian : true, 1093 | months : { 1094 | short: [ 1095 | "Tam", 1096 | "Hel", 1097 | "Maa", 1098 | "Huh", 1099 | "Tou", 1100 | "Kes", 1101 | "Hei", 1102 | "Elo", 1103 | "Syy", 1104 | "Lok", 1105 | "Mar", 1106 | "Jou" 1107 | ], 1108 | full : [ 1109 | "Tammikuu", 1110 | "Helmikuu", 1111 | "Maaliskuu", 1112 | "Huhtikuu", 1113 | "Toukokuu", 1114 | "Kesäkuu", 1115 | "Heinäkuu", 1116 | "Elokuu", 1117 | "Syyskuu", 1118 | "Lokakuu", 1119 | "Marraskuu", 1120 | "Joulukuu" 1121 | ] 1122 | }, 1123 | weekdays : { 1124 | short : [ 1125 | 'S', 1126 | 'M', 1127 | 'T', 1128 | 'K', 1129 | 'T', 1130 | 'P', 1131 | 'L' 1132 | ], 1133 | full : [ 1134 | 'Sunnuntai', 1135 | 'Maanantai', 1136 | 'Tiistai', 1137 | 'Keskiviikko', 1138 | 'Torstai', 1139 | 'Perjantai', 1140 | 'Lauantai' 1141 | ] 1142 | } 1143 | }, 1144 | 'vi':{ 1145 | name:'Tiếng việt', 1146 | gregorian:false, 1147 | months:{ 1148 | short:[ 1149 | 'Th.01', 1150 | 'Th.02', 1151 | 'Th.03', 1152 | 'Th.04', 1153 | 'Th.05', 1154 | 'Th.06', 1155 | 'Th.07', 1156 | 'Th.08', 1157 | 'Th.09', 1158 | 'Th.10', 1159 | 'Th.11', 1160 | 'Th.12' 1161 | ], 1162 | full:[ 1163 | 'Tháng 01', 1164 | 'Tháng 02', 1165 | 'Tháng 03', 1166 | 'Tháng 04', 1167 | 'Tháng 05', 1168 | 'Tháng 06', 1169 | 'Tháng 07', 1170 | 'Tháng 08', 1171 | 'Tháng 09', 1172 | 'Tháng 10', 1173 | 'Tháng 11', 1174 | 'Tháng 12' 1175 | ] 1176 | }, 1177 | weekdays:{ 1178 | short:[ 1179 | 'CN', 1180 | 'T2', 1181 | 'T3', 1182 | 'T4', 1183 | 'T5', 1184 | 'T6', 1185 | 'T7' 1186 | ], 1187 | full:[ 1188 | 'Chủ nhật', 1189 | 'Thứ hai', 1190 | 'Thứ ba', 1191 | 'Thứ tư', 1192 | 'Thứ năm', 1193 | 'Thứ sáu', 1194 | 'Thứ bảy' 1195 | ] 1196 | } 1197 | } 1198 | }, 1199 | 1200 | // MAIN VARS 1201 | 1202 | pickers = {}, 1203 | picker = null, 1204 | picker_ctrl = false, 1205 | pick_dragged = null, 1206 | pick_drag_offset = null, 1207 | pick_drag_temp = null, 1208 | 1209 | // CHECK FUNCTIONS 1210 | 1211 | is_click = false, 1212 | is_ie = function() { 1213 | var 1214 | n = navigator.userAgent.toLowerCase(); 1215 | return (n.indexOf('msie') != -1) ? parseInt(n.split('msie')[1]) : false; 1216 | }, 1217 | is_touch = function() { 1218 | if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) 1219 | return true; 1220 | else 1221 | return false; 1222 | }, 1223 | is_fx_mobile = function() { 1224 | if(picker&&pickers[picker.id].fx&&!pickers[picker.id].fxmobile) { 1225 | if($(window).width()<480) 1226 | picker.element.removeClass('picker-fxs'); 1227 | else 1228 | picker.element.addClass('picker-fxs') 1229 | } 1230 | }, 1231 | is_jumpable = function() { 1232 | if( pickers[picker.id].jump >= pickers[picker.id].key.y.max - pickers[picker.id].key.y.min ) 1233 | return false; 1234 | else 1235 | return true; 1236 | }, 1237 | is_locked = function() { 1238 | var 1239 | unix_current = get_unix(get_current_full()), 1240 | unix_today = get_unix(get_today_full()); 1241 | 1242 | if(pickers[picker.id].lock) { 1243 | if(pickers[picker.id].lock=='from') { 1244 | if(unix_current| t |