/*! * vue-datetime-local.js v1.0.19 * (c) 2017-2018 weifeiyue * Released under the MIT License. */ .datepicker { display: inline-block; position: relative; } .datepicker:before { content: ''; display: block; background: url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPjxwYXRoIGQ9Ik01NjQgMTgwLjJINDQ4Yy04LjMgMC0xNS02LjctMTUtMTVzNi43LTE1IDE1LTE1aDExNmM4LjIgMCAxNSA2LjcgMTUgMTVzLTYuOCAxNS0xNSAxNXoiIGZpbGw9IiM5ODk4OTgiLz48cGF0aCBkPSJNOTQ1IDk1Mi4ySDgxLjJjLTguMiAwLTE1LTYuNy0xNS0xNVYxNjIuOGMwLTguMyA2LjgtMTUgMTUtMTVIMjk0YzguMiAwIDE1IDYuNyAxNSAxNXMtNi44IDE1LTE1IDE1SDk2LjJ2NzQ0LjRIOTMwVjE3Ny44SDcxMy42Yy04LjMgMC0xNS02LjctMTUtMTVzNi43LTE1IDE1LTE1SDk0NWM4LjIgMCAxNSA2LjcgMTUgMTV2Nzc0LjRjMCA4LjMtNi44IDE1LTE1IDE1eiIgZmlsbD0iIzk4OTg5OCIvPjxwYXRoIGQ9Ik0zMzMuMyA1NTFIMjE2Yy04LjIgMC0xNS02LjgtMTUtMTVzNi44LTE1IDE1LTE1aDExNy4zYzguMyAwIDE1IDYuNiAxNSAxNXMtNi43IDE1LTE1IDE1em0yMzAuMyAwSDQ0Ni4zYy04LjMgMC0xNS02LjgtMTUtMTVzNi43LTE1IDE1LTE1aDExNy4zYzguMiAwIDE1IDYuNiAxNSAxNXMtNi44IDE1LTE1IDE1em0yMzAuMiAwSDY3Ni42Yy04LjMgMC0xNS02LjgtMTUtMTVzNi43LTE1IDE1LTE1aDExNy4yYzguMyAwIDE1IDYuNiAxNSAxNXMtNi43IDE1LTE1IDE1ek0zMzMuMyA3NDBIMjE2Yy04LjIgMC0xNS02LjgtMTUtMTVzNi44LTE1IDE1LTE1aDExNy4zYzguMyAwIDE1IDYuNiAxNSAxNXMtNi43IDE1LTE1IDE1em0yMzAuMyAwSDQ0Ni4zYy04LjMgMC0xNS02LjgtMTUtMTVzNi43LTE1IDE1LTE1aDExNy4zYzguMiAwIDE1IDYuNiAxNSAxNXMtNi44IDE1LTE1IDE1em0yMzAuMiAwSDY3Ni42Yy04LjMgMC0xNS02LjgtMTUtMTVzNi43LTE1IDE1LTE1aDExNy4yYzguMyAwIDE1IDYuNiAxNSAxNXMtNi43IDE1LTE1IDE1ek0zNzAuOCAyNTguNmMtOC4zIDAtMTUtNi43LTE1LTE1Vjg2LjhjMC04LjIgNi43LTE1IDE1LTE1czE1IDYuOCAxNSAxNXYxNTYuOGMwIDguMy02LjcgMTUtMTUgMTV6bTI3MC4yIDBjLTguMyAwLTE1LTYuNy0xNS0xNVY4Ni44YzAtOC4yIDYuNy0xNSAxNS0xNXMxNSA2LjggMTUgMTV2MTU2LjhjMCA4LjMtNi43IDE1LTE1IDE1ek05NDUgMzcyLjJIODEuMmMtOC4yIDAtMTUtNi43LTE1LTE1czYuOC0xNSAxNS0xNUg5NDVjOC4yIDAgMTUgNi43IDE1IDE1cy02LjggMTUtMTUgMTV6IiBmaWxsPSIjOTg5ODk4Ii8+PC9zdmc+') no-repeat 50% 50%; } .datepicker-close, .datepicker:before { position: absolute; width: 34px; height: 100%; top: 0; right: 0; } .datepicker-close { display: none; cursor: pointer; } .datepicker-close:before { display: block; content: ''; position: absolute; width: 16px; height: 16px; left: 50%; top: 50%; margin-left: -8px; margin-top: -8px; text-align: center; background: #ccc; color: #fff; border-radius: 50%; background: #ccc url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==') no-repeat 50% 50%; } .datepicker__clearable:hover:before { display: none; } .datepicker__clearable:hover .datepicker-close { display: block; } .datepicker-close:hover:before { background-color: #afafaf; } .datepicker > input { color: #666; transition: all 0.2s ease; border: 1px solid #e5e5e5; height: 34px; box-sizing: border-box; outline: 0; padding: 0 34px 0 12px; font-size: 14px; width: 100%; user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; } .datepicker > input.focus { border-color: #3bb4f2; -webkit-box-shadow: 0 0 5px rgba(59, 180, 242, 0.3); box-shadow: 0 0 5px rgba(59, 180, 242, 0.3); } .datepicker > input:disabled { cursor: not-allowed; background-color: #ebebe4; border-color: #e5e5e5; -webkit-box-shadow: none; box-shadow: none; } .datepicker-popup { position: absolute; transition: all 0.2s ease; opacity: 1; transform: scaleY(1); transform-origin: center top; font-size: 12px; background: #fff; border: 1px solid #d9d9d9; box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2); margin-top: 2px; outline: 0; padding: 5px; overflow: hidden; z-index: 999; } .datepicker-inline { position: relative; margin-top: 0; } .datepicker-range { min-width: 325px; } .datepicker-range .datepicker-popup { width: 403px; } .datepicker-bottom { float: left; width: 100%; text-align: right; } .datepicker-btn { padding: 5px 10px; background: #1284e7; color: #fff; border-radius: 2px; display: inline-block; cursor: pointer; } .datepicker-anim-enter-active { transform-origin: 0 0; animation: datepicker-anim-in 0.2s cubic-bezier(0.23, 1, 0.32, 1); } .datepicker-anim-leave-active { transform-origin: 0 0; animation: datepicker-anim-out 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06); } .datepicker__buttons { display: block; text-align: right; } .datepicker__buttons button { display: inline-block; font-size: 13px; border: none; cursor: pointer; margin: 10px 0 0 5px; padding: 5px 15px; color: #fff; } .datepicker__buttons .datepicker__button-select { background: #1284e7; } .datepicker__buttons .datepicker__button-cancel { background: #666; } @keyframes datepicker-anim-in { 0% { opacity: 0; transform: scaleY(0.8); } to { opacity: 1; transform: scaleY(1); } } @keyframes datepicker-anim-out { 0% { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(0.8); } } .calendar { float: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .calendar + .calendar { border-left: 1px solid #eaeaea; margin-left: 5px; padding-left: 5px; } .calendar-head { line-height: 34px; height: 34px; text-align: center; position: relative; } .calendar-head a { color: #666; font-weight: 700; cursor: pointer; display: inline-block; text-align: center; position: absolute; padding: 0 5px; font-size: 16px; } .calendar-head a:hover { color: #1284e7; } .calendar-head .calendar-month-select, .calendar-head .calendar-year-select { font-size: 12px; padding: 0 2px; position: relative; } .calendar-prev-decade-btn, .calendar-prev-year-btn { left: 6px; } .calendar-prev-month-btn { left: 24px; } .calendar-next-decade-btn, .calendar-next-year-btn { right: 6px; } .calendar-next-month-btn { right: 24px; } .calendar-body { position: relative; width: 196px; height: 196px; } .calendar-days { width: 100%; height: 100%; } .calendar-date, .calendar-week { font-weight: 400; width: 14.28%; height: 14.28%; text-align: center; box-sizing: border-box; overflow: hidden; float: left; } .calendar-date:before, .calendar-week:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .calendar-date { cursor: pointer; } .calendar-date-out { color: #ccc; } .calendar-date-on, .calendar-date:hover { background: #eaf8fe; } .calendar-date-selected, .calendar-date-selected:hover { color: #fff; font-weight: 700; background: #1284e7; } .calendar-date-disabled { cursor: not-allowed !important; color: #bcbcbc !important; background: #f3f3f3 !important; } .calendar-foot { margin-top: 5px; } .calendar-hour { display: inline-block; border: 1px solid #e6e5e5; color: #9e9e9e; } .calendar-hour a { display: inline-block; padding: 2px 4px; cursor: pointer; } .calendar-hour a.on, .calendar-hour a:hover { color: #1284e7; } .calendar-hours, .calendar-minutes, .calendar-months, .calendar-seconds, .calendar-years { width: 100%; height: 100%; position: absolute; background: #fff; left: 0; top: 0; } .calendar-months a, .calendar-years a { width: 33.33%; height: 25%; } .calendar-hours a { width: 20%; height: 20%; } .calendar-minutes a, .calendar-seconds a { width: 16.66%; height: 10%; } .calendar-title { margin-top: -30px; height: 30px; line-height: 30px; background: #fff; text-align: center; font-weight: 700; }