update date range picker

This commit is contained in:
James Cole 2017-08-10 19:55:23 +02:00
parent c0c5ced6ad
commit db500e911c
No known key found for this signature in database
GPG Key ID: C16961E655E74B5E
2 changed files with 190 additions and 340 deletions

View File

@ -1,213 +1,141 @@
.daterangepicker { .daterangepicker {
position: absolute; position: absolute;
color: inherit; color: inherit;
background: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
width: 278px; width: 278px;
padding: 4px; padding: 4px;
margin-top: 1px; margin-top: 1px;
top: 100px; top: 100px;
left: 20px; left: 20px;
/* Calendars */ /* Calendars */ }
} .daterangepicker:before, .daterangepicker:after {
.daterangepicker:before, .daterangepicker:after {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
border-bottom-color: rgba(0, 0, 0, 0.2); border-bottom-color: rgba(0, 0, 0, 0.2);
content: ''; content: ''; }
} .daterangepicker:before {
.daterangepicker:before {
top: -7px; top: -7px;
border-right: 7px solid transparent; border-right: 7px solid transparent;
border-left: 7px solid transparent; border-left: 7px solid transparent;
border-bottom: 7px solid #ccc; border-bottom: 7px solid #ccc; }
} .daterangepicker:after {
.daterangepicker:after {
top: -6px; top: -6px;
border-right: 6px solid transparent; border-right: 6px solid transparent;
border-bottom: 6px solid #fff; border-bottom: 6px solid #fff;
border-left: 6px solid transparent; border-left: 6px solid transparent; }
} .daterangepicker.opensleft:before {
right: 9px; }
.daterangepicker.opensleft:before { .daterangepicker.opensleft:after {
right: 9px; right: 10px; }
} .daterangepicker.openscenter:before {
.daterangepicker.opensleft:after {
right: 10px;
}
.daterangepicker.openscenter:before {
left: 0; left: 0;
right: 0; right: 0;
width: 0; width: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto; }
} .daterangepicker.openscenter:after {
.daterangepicker.openscenter:after {
left: 0; left: 0;
right: 0; right: 0;
width: 0; width: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto; }
} .daterangepicker.opensright:before {
left: 9px; }
.daterangepicker.opensright:before { .daterangepicker.opensright:after {
left: 9px; left: 10px; }
} .daterangepicker.dropup {
margin-top: -5px; }
.daterangepicker.opensright:after { .daterangepicker.dropup:before {
left: 10px; top: initial;
} bottom: -7px;
border-bottom: initial;
.daterangepicker.dropup { border-top: 7px solid #ccc; }
margin-top: -5px; .daterangepicker.dropup:after {
} top: initial;
bottom: -6px;
.daterangepicker.dropup:before { border-bottom: initial;
top: initial; border-top: 6px solid #fff; }
bottom: -7px; .daterangepicker.dropdown-menu {
border-bottom: initial;
border-top: 7px solid #ccc;
}
.daterangepicker.dropup:after {
top: initial;
bottom: -6px;
border-bottom: initial;
border-top: 6px solid #fff;
}
.daterangepicker.dropdown-menu {
max-width: none; max-width: none;
z-index: 3001; z-index: 3001; }
} .daterangepicker.single .ranges, .daterangepicker.single .calendar {
float: none; }
.daterangepicker.single .ranges, .daterangepicker.single .calendar { .daterangepicker.show-calendar .calendar {
float: none; display: block; }
} .daterangepicker .calendar {
.daterangepicker.show-calendar .calendar {
display: block;
}
.daterangepicker .calendar {
display: none; display: none;
max-width: 270px; max-width: 270px;
margin: 4px; margin: 4px; }
} .daterangepicker .calendar.single .calendar-table {
border: none; }
.daterangepicker .calendar.single .calendar-table { .daterangepicker .calendar th, .daterangepicker .calendar td {
border: none; white-space: nowrap;
} text-align: center;
min-width: 32px; }
.daterangepicker .calendar th, .daterangepicker .calendar td { .daterangepicker .calendar-table {
white-space: nowrap;
text-align: center;
min-width: 32px;
}
.daterangepicker .calendar-table {
border: 1px solid #fff; border: 1px solid #fff;
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
background: #fff; background-color: #fff; }
} .daterangepicker table {
.daterangepicker table {
width: 100%; width: 100%;
margin: 0; margin: 0; }
} .daterangepicker td, .daterangepicker th {
.daterangepicker td, .daterangepicker th {
text-align: center; text-align: center;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 4px; border-radius: 4px;
border: 1px solid transparent; border: 1px solid transparent;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer; }
} .daterangepicker td.available:hover, .daterangepicker th.available:hover {
background-color: #eee;
.daterangepicker td.available:hover, .daterangepicker th.available:hover { border-color: transparent;
background-color: #eee; color: inherit; }
border-color: transparent; .daterangepicker td.week, .daterangepicker th.week {
color: inherit; font-size: 80%;
} color: #ccc; }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
.daterangepicker td.week, .daterangepicker th.week {
font-size: 80%;
color: #ccc;
}
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
background-color: #fff; background-color: #fff;
border-color: transparent; border-color: transparent;
color: #999; color: #999; }
} .daterangepicker td.in-range {
.daterangepicker td.in-range {
background-color: #ebf4f8; background-color: #ebf4f8;
border-color: transparent; border-color: transparent;
color: #000; color: #000;
border-radius: 0; border-radius: 0; }
} .daterangepicker td.start-date {
border-radius: 4px 0 0 4px; }
.daterangepicker td.start-date { .daterangepicker td.end-date {
border-radius: 4px 0 0 4px; border-radius: 0 4px 4px 0; }
} .daterangepicker td.start-date.end-date {
border-radius: 4px; }
.daterangepicker td.end-date { .daterangepicker td.active, .daterangepicker td.active:hover {
border-radius: 0 4px 4px 0;
}
.daterangepicker td.start-date.end-date {
border-radius: 4px;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #357ebd; background-color: #357ebd;
border-color: transparent; border-color: transparent;
color: #fff; color: #fff; }
} .daterangepicker th.month {
width: auto; }
.daterangepicker th.month { .daterangepicker td.disabled, .daterangepicker option.disabled {
width: auto;
}
.daterangepicker td.disabled, .daterangepicker option.disabled {
color: #999; color: #999;
cursor: not-allowed; cursor: not-allowed;
text-decoration: line-through; text-decoration: line-through; }
} .daterangepicker select.monthselect, .daterangepicker select.yearselect {
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
font-size: 12px; font-size: 12px;
padding: 1px; padding: 1px;
height: auto; height: auto;
margin: 0; margin: 0;
cursor: default; cursor: default; }
} .daterangepicker select.monthselect {
.daterangepicker select.monthselect {
margin-right: 2%; margin-right: 2%;
width: 56%; width: 56%; }
} .daterangepicker select.yearselect {
width: 40%; }
.daterangepicker select.yearselect { .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
width: 40%;
}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
width: 50px; width: 50px;
margin-bottom: 0; margin-bottom: 0; }
} .daterangepicker .input-mini {
.daterangepicker .input-mini {
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
color: #555; color: #555;
@ -217,202 +145,125 @@
vertical-align: middle; vertical-align: middle;
margin: 0 0 5px 0; margin: 0 0 5px 0;
padding: 0 6px 0 28px; padding: 0 6px 0 28px;
width: 100%; width: 100%; }
} .daterangepicker .input-mini.active {
border: 1px solid #08c;
.daterangepicker .input-mini.active { border-radius: 4px; }
border: 1px solid #08c; .daterangepicker .daterangepicker_input {
border-radius: 4px; position: relative; }
} .daterangepicker .daterangepicker_input i {
position: absolute;
.daterangepicker .daterangepicker_input { left: 8px;
position: relative; top: 8px; }
} .daterangepicker.rtl .input-mini {
.daterangepicker .daterangepicker_input i {
position: absolute;
left: 8px;
top: 8px;
}
.daterangepicker.rtl .input-mini {
padding-right: 28px; padding-right: 28px;
padding-left: 6px; padding-left: 6px; }
} .daterangepicker.rtl .daterangepicker_input i {
.daterangepicker.rtl .daterangepicker_input i {
left: auto; left: auto;
right: 8px; right: 8px; }
} .daterangepicker .calendar-time {
.daterangepicker .calendar-time {
text-align: center; text-align: center;
margin: 5px auto; margin: 5px auto;
line-height: 30px; line-height: 30px;
position: relative; position: relative;
padding-left: 28px; padding-left: 28px; }
} .daterangepicker .calendar-time select.disabled {
color: #ccc;
.daterangepicker .calendar-time select.disabled { cursor: not-allowed; }
color: #ccc;
cursor: not-allowed;
}
.ranges { .ranges {
font-size: 11px; font-size: 11px;
float: none; float: none;
margin: 4px; margin: 4px;
text-align: left; text-align: left; }
} .ranges ul {
.ranges ul {
list-style: none; list-style: none;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
width: 100%; width: 100%; }
} .ranges li {
.ranges li {
font-size: 13px; font-size: 13px;
background: #f5f5f5; background-color: #f5f5f5;
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
border-radius: 4px; border-radius: 4px;
color: #08c; color: #08c;
padding: 3px 12px; padding: 3px 12px;
margin-bottom: 8px; margin-bottom: 8px;
cursor: pointer; cursor: pointer; }
} .ranges li:hover {
background-color: #08c;
.ranges li:hover { border: 1px solid #08c;
background: #08c; color: #fff; }
border: 1px solid #08c; .ranges li.active {
color: #fff; background-color: #08c;
} border: 1px solid #08c;
color: #fff; }
.ranges li.active {
background: #08c;
border: 1px solid #08c;
color: #fff;
}
/* Larger Screen Styling */ /* Larger Screen Styling */
@media (min-width: 564px) { @media (min-width: 564px) {
.daterangepicker { .daterangepicker {
width: auto; width: auto; }
}
.daterangepicker .ranges ul { .daterangepicker .ranges ul {
width: 160px; width: 160px; }
}
.daterangepicker.single .ranges ul { .daterangepicker.single .ranges ul {
width: 100%; width: 100%; }
}
.daterangepicker.single .calendar.left { .daterangepicker.single .calendar.left {
clear: none; clear: none; }
}
.daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar { .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar {
float: left; float: left; }
}
.daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar { .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar {
float: right; float: right; }
}
.daterangepicker.ltr { .daterangepicker.ltr {
direction: ltr; direction: ltr;
text-align: left; text-align: left; }
} .daterangepicker.ltr .calendar.left {
.daterangepicker.ltr .calendar.left {
clear: left; clear: left;
margin-right: 0; margin-right: 0; }
} .daterangepicker.ltr .calendar.left .calendar-table {
border-right: none;
.daterangepicker.ltr .calendar.left .calendar-table { border-top-right-radius: 0;
border-right: none; border-bottom-right-radius: 0; }
border-top-right-radius: 0; .daterangepicker.ltr .calendar.right {
border-bottom-right-radius: 0; margin-left: 0; }
} .daterangepicker.ltr .calendar.right .calendar-table {
border-left: none;
.daterangepicker.ltr .calendar.right { border-top-left-radius: 0;
margin-left: 0; border-bottom-left-radius: 0; }
} .daterangepicker.ltr .left .daterangepicker_input {
padding-right: 12px; }
.daterangepicker.ltr .calendar.right .calendar-table { .daterangepicker.ltr .calendar.left .calendar-table {
border-left: none; padding-right: 12px; }
border-top-left-radius: 0; .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
border-bottom-left-radius: 0; float: left; }
}
.daterangepicker.ltr .left .daterangepicker_input {
padding-right: 12px;
}
.daterangepicker.ltr .calendar.left .calendar-table {
padding-right: 12px;
}
.daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
float: left;
}
.daterangepicker.rtl { .daterangepicker.rtl {
direction: rtl; direction: rtl;
text-align: right; text-align: right; }
} .daterangepicker.rtl .calendar.left {
.daterangepicker.rtl .calendar.left {
clear: right; clear: right;
margin-left: 0; margin-left: 0; }
} .daterangepicker.rtl .calendar.left .calendar-table {
border-left: none;
.daterangepicker.rtl .calendar.left .calendar-table { border-top-left-radius: 0;
border-left: none; border-bottom-left-radius: 0; }
border-top-left-radius: 0; .daterangepicker.rtl .calendar.right {
border-bottom-left-radius: 0; margin-right: 0; }
} .daterangepicker.rtl .calendar.right .calendar-table {
border-right: none;
.daterangepicker.rtl .calendar.right { border-top-right-radius: 0;
margin-right: 0; border-bottom-right-radius: 0; }
} .daterangepicker.rtl .left .daterangepicker_input {
padding-left: 12px; }
.daterangepicker.rtl .calendar.right .calendar-table { .daterangepicker.rtl .calendar.left .calendar-table {
border-right: none; padding-left: 12px; }
border-top-right-radius: 0; .daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
border-bottom-right-radius: 0;
}
.daterangepicker.rtl .left .daterangepicker_input {
padding-left: 12px;
}
.daterangepicker.rtl .calendar.left .calendar-table {
padding-left: 12px;
}
.daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
text-align: right; text-align: right;
float: right; float: right; } }
}
}
@media (min-width: 730px) { @media (min-width: 730px) {
.daterangepicker .ranges { .daterangepicker .ranges {
width: auto; width: auto; }
} .daterangepicker.ltr .ranges {
float: left; }
.daterangepicker.ltr .ranges { .daterangepicker.rtl .ranges {
float: left; float: right; }
} .daterangepicker .calendar.left {
clear: none !important; } }
.daterangepicker.rtl .ranges {
float: right;
}
.daterangepicker .calendar.left {
clear: none !important;
}
}

View File

@ -1,11 +1,10 @@
/** /*
* @version: 2.1.24 * daterangepicker.js
* @author: Dan Grossman http://www.dangrossman.info/ * Copyright (c) 2017 thegrumpydictator@gmail.com
* @copyright: Copyright (c) 2012-2016 Dan Grossman. All rights reserved. * This software may be modified and distributed under the terms of the Creative Commons Attribution-ShareAlike 4.0 International License.
* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php *
* @website: https://www.improvely.com/ * See the LICENSE file for details.
*/ */ollow the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
// Follow the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
(function (root, factory) { (function (root, factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
// AMD. Make globaly available as well // AMD. Make globaly available as well