jmontoyaa
9 years ago
parent
2cb9fe84fb
commit
3608c51a01
@ -1,303 +0,0 @@ |
|||||||
/*! |
|
||||||
* Stylesheet for the Date Range Picker, for use with Bootstrap 2.x |
|
||||||
* |
|
||||||
* Copyright 2013-2015 Dan Grossman ( http://www.dangrossman.info ) |
|
||||||
* Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php |
|
||||||
* |
|
||||||
* Built for http://www.improvely.com |
|
||||||
*/ |
|
||||||
|
|
||||||
.daterangepicker.dropdown-menu { |
|
||||||
max-width: none; |
|
||||||
z-index: 3000; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar { |
|
||||||
float: left; |
|
||||||
margin: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar, |
|
||||||
.daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar { |
|
||||||
float: right; |
|
||||||
margin: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges { |
|
||||||
width: 160px; |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges .range_inputs>div { |
|
||||||
float: left; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges .range_inputs>div:nth-child(2) { |
|
||||||
padding-left: 11px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar { |
|
||||||
display: none; |
|
||||||
max-width: 250px; |
|
||||||
} |
|
||||||
.daterangepicker.show-calendar .calendar { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar.single .calendar-date { |
|
||||||
border: none; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar th, .daterangepicker .calendar td { |
|
||||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; |
|
||||||
white-space: nowrap; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .daterangepicker_start_input label, |
|
||||||
.daterangepicker .daterangepicker_end_input label { |
|
||||||
color: #333; |
|
||||||
font-size: 11px; |
|
||||||
margin-bottom: 2px; |
|
||||||
text-transform: uppercase; |
|
||||||
text-shadow: 1px 1px 0 #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges input { |
|
||||||
font-size: 11px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges ul { |
|
||||||
list-style: none; |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges li { |
|
||||||
font-size: 13px; |
|
||||||
background: #f5f5f5; |
|
||||||
border: 1px solid #f5f5f5; |
|
||||||
color: #08c; |
|
||||||
padding: 3px 12px; |
|
||||||
margin-bottom: 8px; |
|
||||||
-webkit-border-radius: 5px; |
|
||||||
-moz-border-radius: 5px; |
|
||||||
border-radius: 5px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { |
|
||||||
background: #08c; |
|
||||||
border: 1px solid #08c; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar-date { |
|
||||||
border: 1px solid #ddd; |
|
||||||
padding: 4px; |
|
||||||
border-radius: 4px; |
|
||||||
background: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar-time { |
|
||||||
text-align: center; |
|
||||||
margin: 8px auto 0 auto; |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker { |
|
||||||
position: absolute; |
|
||||||
background: #fff; |
|
||||||
top: 100px; |
|
||||||
left: 20px; |
|
||||||
padding: 4px; |
|
||||||
margin-top: 1px; |
|
||||||
-webkit-border-radius: 4px; |
|
||||||
-moz-border-radius: 4px; |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensleft:before { |
|
||||||
position: absolute; |
|
||||||
top: -7px; |
|
||||||
right: 9px; |
|
||||||
display: inline-block; |
|
||||||
border-right: 7px solid transparent; |
|
||||||
border-bottom: 7px solid #ccc; |
|
||||||
border-left: 7px solid transparent; |
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensleft:after { |
|
||||||
position: absolute; |
|
||||||
top: -6px; |
|
||||||
right: 10px; |
|
||||||
display: inline-block; |
|
||||||
border-right: 6px solid transparent; |
|
||||||
border-bottom: 6px solid #fff; |
|
||||||
border-left: 6px solid transparent; |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.openscenter:before { |
|
||||||
position: absolute; |
|
||||||
top: -7px; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
width: 0; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
display: inline-block; |
|
||||||
border-right: 7px solid transparent; |
|
||||||
border-bottom: 7px solid #ccc; |
|
||||||
border-left: 7px solid transparent; |
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.openscenter:after { |
|
||||||
position: absolute; |
|
||||||
top: -6px; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
width: 0; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
display: inline-block; |
|
||||||
border-right: 6px solid transparent; |
|
||||||
border-bottom: 6px solid #fff; |
|
||||||
border-left: 6px solid transparent; |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensright:before { |
|
||||||
position: absolute; |
|
||||||
top: -7px; |
|
||||||
left: 9px; |
|
||||||
display: inline-block; |
|
||||||
border-right: 7px solid transparent; |
|
||||||
border-bottom: 7px solid #ccc; |
|
||||||
border-left: 7px solid transparent; |
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensright:after { |
|
||||||
position: absolute; |
|
||||||
top: -6px; |
|
||||||
left: 10px; |
|
||||||
display: inline-block; |
|
||||||
border-right: 6px solid transparent; |
|
||||||
border-bottom: 6px solid #fff; |
|
||||||
border-left: 6px solid transparent; |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.dropup{ |
|
||||||
margin-top: -5px; |
|
||||||
} |
|
||||||
.daterangepicker.dropup:before{ |
|
||||||
top: initial; |
|
||||||
bottom:-7px; |
|
||||||
border-bottom: initial; |
|
||||||
border-top: 7px solid #ccc; |
|
||||||
} |
|
||||||
.daterangepicker.dropup:after{ |
|
||||||
top: initial; |
|
||||||
bottom:-6px; |
|
||||||
border-bottom: initial; |
|
||||||
border-top: 6px solid #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker table { |
|
||||||
width: 100%; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td, .daterangepicker th { |
|
||||||
text-align: center; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
-webkit-border-radius: 4px; |
|
||||||
-moz-border-radius: 4px; |
|
||||||
border-radius: 4px; |
|
||||||
cursor: pointer; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.off { |
|
||||||
color: #999; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.disabled, .daterangepicker option.disabled { |
|
||||||
color: #999; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.available:hover, .daterangepicker td.available.today, .daterangepicker th.available:hover { |
|
||||||
background: #eee; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.in-range { |
|
||||||
background: #ebf4f8; |
|
||||||
-webkit-border-radius: 0; |
|
||||||
-moz-border-radius: 0; |
|
||||||
border-radius: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.today.active, .daterangepicker td.active, .daterangepicker td.active:hover { |
|
||||||
background-color: #006dcc; |
|
||||||
background-image: -moz-linear-gradient(top, #0088cc, #0044cc); |
|
||||||
background-image: -ms-linear-gradient(top, #0088cc, #0044cc); |
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); |
|
||||||
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); |
|
||||||
background-image: -o-linear-gradient(top, #0088cc, #0044cc); |
|
||||||
background-image: linear-gradient(top, #0088cc, #0044cc); |
|
||||||
background-repeat: repeat-x; |
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); |
|
||||||
border-color: #0044cc #0044cc #002a80; |
|
||||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
|
||||||
color: #fff; |
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.week, .daterangepicker th.week { |
|
||||||
font-size: 80%; |
|
||||||
color: #ccc; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker select.monthselect, .daterangepicker select.yearselect { |
|
||||||
font-size: 12px; |
|
||||||
padding: 1px; |
|
||||||
height: auto; |
|
||||||
margin: 0; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker select.monthselect { |
|
||||||
margin-right: 2%; |
|
||||||
width: 56%; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker select.yearselect { |
|
||||||
width: 40%; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { |
|
||||||
width: 60px; |
|
||||||
margin-bottom: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker_start_input { |
|
||||||
float: left; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker_end_input { |
|
||||||
float: left; |
|
||||||
padding-left: 11px |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker th.month { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
@ -1,335 +0,0 @@ |
|||||||
/*! |
|
||||||
* Stylesheet for the Date Range Picker, for use with Bootstrap 3.x |
|
||||||
* |
|
||||||
* Copyright 2013-2015 Dan Grossman ( http://www.dangrossman.info ) |
|
||||||
* Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php |
|
||||||
* |
|
||||||
* Built for http://www.improvely.com |
|
||||||
*/ |
|
||||||
|
|
||||||
.daterangepicker.dropdown-menu { |
|
||||||
max-width: none; |
|
||||||
z-index: 3000; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar { |
|
||||||
float: left; |
|
||||||
margin: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar, |
|
||||||
.daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar { |
|
||||||
float: right; |
|
||||||
margin: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.single .ranges, .daterangepicker.single .calendar { |
|
||||||
float: none; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges { |
|
||||||
width: 160px; |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges .range_inputs>div { |
|
||||||
float: left; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges .range_inputs>div:nth-child(2) { |
|
||||||
padding-left: 11px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar { |
|
||||||
display: none; |
|
||||||
max-width: 270px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.show-calendar .calendar { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar.single .calendar-date { |
|
||||||
border: none; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar th, .daterangepicker .calendar td { |
|
||||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; |
|
||||||
white-space: nowrap; |
|
||||||
text-align: center; |
|
||||||
min-width: 32px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .daterangepicker_start_input label, |
|
||||||
.daterangepicker .daterangepicker_end_input label { |
|
||||||
color: #333; |
|
||||||
display: block; |
|
||||||
font-size: 11px; |
|
||||||
font-weight: normal; |
|
||||||
height: 20px; |
|
||||||
line-height: 20px; |
|
||||||
margin-bottom: 2px; |
|
||||||
text-shadow: #fff 1px 1px 0px; |
|
||||||
text-transform: uppercase; |
|
||||||
width: 74px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges input { |
|
||||||
font-size: 11px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges .input-mini { |
|
||||||
border: 1px solid #ccc; |
|
||||||
border-radius: 4px; |
|
||||||
color: #555; |
|
||||||
display: block; |
|
||||||
font-size: 11px; |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
vertical-align: middle; |
|
||||||
margin: 0 0 10px 0; |
|
||||||
padding: 0 6px; |
|
||||||
width: 74px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges ul { |
|
||||||
list-style: none; |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges li { |
|
||||||
font-size: 13px; |
|
||||||
background: #f5f5f5; |
|
||||||
border: 1px solid #f5f5f5; |
|
||||||
color: #08c; |
|
||||||
padding: 3px 12px; |
|
||||||
margin-bottom: 8px; |
|
||||||
-webkit-border-radius: 5px; |
|
||||||
-moz-border-radius: 5px; |
|
||||||
border-radius: 5px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { |
|
||||||
background: #08c; |
|
||||||
border: 1px solid #08c; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar-date { |
|
||||||
border: 1px solid #ddd; |
|
||||||
padding: 4px; |
|
||||||
border-radius: 4px; |
|
||||||
background: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker .calendar-time { |
|
||||||
text-align: center; |
|
||||||
margin: 8px auto 0 auto; |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker { |
|
||||||
position: absolute; |
|
||||||
background: #fff; |
|
||||||
top: 100px; |
|
||||||
left: 20px; |
|
||||||
padding: 4px; |
|
||||||
margin-top: 1px; |
|
||||||
-webkit-border-radius: 4px; |
|
||||||
-moz-border-radius: 4px; |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensleft:before { |
|
||||||
position: absolute; |
|
||||||
top: -7px; |
|
||||||
right: 9px; |
|
||||||
display: inline-block; |
|
||||||
border-right: 7px solid transparent; |
|
||||||
border-bottom: 7px solid #ccc; |
|
||||||
border-left: 7px solid transparent; |
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensleft:after { |
|
||||||
position: absolute; |
|
||||||
top: -6px; |
|
||||||
right: 10px; |
|
||||||
display: inline-block; |
|
||||||
border-right: 6px solid transparent; |
|
||||||
border-bottom: 6px solid #fff; |
|
||||||
border-left: 6px solid transparent; |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.openscenter:before { |
|
||||||
position: absolute; |
|
||||||
top: -7px; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
width: 0; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
display: inline-block; |
|
||||||
border-right: 7px solid transparent; |
|
||||||
border-bottom: 7px solid #ccc; |
|
||||||
border-left: 7px solid transparent; |
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.openscenter:after { |
|
||||||
position: absolute; |
|
||||||
top: -6px; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
width: 0; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
display: inline-block; |
|
||||||
border-right: 6px solid transparent; |
|
||||||
border-bottom: 6px solid #fff; |
|
||||||
border-left: 6px solid transparent; |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensright:before { |
|
||||||
position: absolute; |
|
||||||
top: -7px; |
|
||||||
left: 9px; |
|
||||||
display: inline-block; |
|
||||||
border-right: 7px solid transparent; |
|
||||||
border-bottom: 7px solid #ccc; |
|
||||||
border-left: 7px solid transparent; |
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.opensright:after { |
|
||||||
position: absolute; |
|
||||||
top: -6px; |
|
||||||
left: 10px; |
|
||||||
display: inline-block; |
|
||||||
border-right: 6px solid transparent; |
|
||||||
border-bottom: 6px solid #fff; |
|
||||||
border-left: 6px solid transparent; |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker.dropup{ |
|
||||||
margin-top: -5px; |
|
||||||
} |
|
||||||
.daterangepicker.dropup:before{ |
|
||||||
top: initial; |
|
||||||
bottom:-7px; |
|
||||||
border-bottom: initial; |
|
||||||
border-top: 7px solid #ccc; |
|
||||||
} |
|
||||||
.daterangepicker.dropup:after{ |
|
||||||
top: initial; |
|
||||||
bottom:-6px; |
|
||||||
border-bottom: initial; |
|
||||||
border-top: 6px solid #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker table { |
|
||||||
width: 100%; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td, .daterangepicker th { |
|
||||||
text-align: center; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
-webkit-border-radius: 4px; |
|
||||||
-moz-border-radius: 4px; |
|
||||||
border-radius: 4px; |
|
||||||
cursor: pointer; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.off { |
|
||||||
color: #999; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.disabled, .daterangepicker option.disabled { |
|
||||||
color: #999; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.available:hover, .daterangepicker td.available.today, .daterangepicker th.available:hover { |
|
||||||
background: #eee; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.in-range { |
|
||||||
background: #ebf4f8; |
|
||||||
-webkit-border-radius: 0; |
|
||||||
-moz-border-radius: 0; |
|
||||||
border-radius: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.start-date { |
|
||||||
-webkit-border-radius: 4px 0 0 4px; |
|
||||||
-moz-border-radius: 4px 0 0 4px; |
|
||||||
border-radius: 4px 0 0 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.end-date { |
|
||||||
-webkit-border-radius: 0 4px 4px 0; |
|
||||||
-moz-border-radius: 0 4px 4px 0; |
|
||||||
border-radius: 0 4px 4px 0; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.start-date.end-date { |
|
||||||
-webkit-border-radius: 4px; |
|
||||||
-moz-border-radius: 4px; |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.today.active, .daterangepicker td.active, .daterangepicker td.active:hover { |
|
||||||
background-color: #357ebd; |
|
||||||
border-color: #3071a9; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker td.week, .daterangepicker th.week { |
|
||||||
font-size: 80%; |
|
||||||
color: #ccc; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker select.monthselect, .daterangepicker select.yearselect { |
|
||||||
font-size: 12px; |
|
||||||
padding: 1px; |
|
||||||
height: auto; |
|
||||||
margin: 0; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker select.monthselect { |
|
||||||
margin-right: 2%; |
|
||||||
width: 56%; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker select.yearselect { |
|
||||||
width: 40%; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { |
|
||||||
width: 50px; |
|
||||||
margin-bottom: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker_start_input { |
|
||||||
float: left; |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker_end_input { |
|
||||||
float: left; |
|
||||||
padding-left: 11px |
|
||||||
} |
|
||||||
|
|
||||||
.daterangepicker th.month { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,272 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html dir="ltr" lang="en-US"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8" /> |
|
||||||
<title>A date range picker for Bootstrap</title> |
|
||||||
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> |
|
||||||
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> |
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css" /> |
|
||||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
|
||||||
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
|
||||||
<script type="text/javascript" src="moment.js"></script> |
|
||||||
<script type="text/javascript" src="daterangepicker.js"></script> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
|
|
||||||
<div class="container"> |
|
||||||
<div class="span12"> |
|
||||||
|
|
||||||
<h1>Usage Examples</h1> |
|
||||||
|
|
||||||
<hr /> |
|
||||||
|
|
||||||
<h4>Basic Date Range Picker</h4> |
|
||||||
<div class="well"> |
|
||||||
|
|
||||||
<form class="form-horizontal"> |
|
||||||
<fieldset> |
|
||||||
<div class="control-group"> |
|
||||||
<div class="controls"> |
|
||||||
<div class="input-prepend input-group"> |
|
||||||
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" style="width: 200px" name="reservation" id="reservation" class="form-control" value="03/18/2013 - 03/23/2013" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</fieldset> |
|
||||||
</form> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
$(document).ready(function() { |
|
||||||
$('#reservation').daterangepicker(null, function(start, end, label) { |
|
||||||
console.log(start.toISOString(), end.toISOString(), label); |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
<h4>Basic Single Date Picker</h4> |
|
||||||
<div class="well"> |
|
||||||
|
|
||||||
<form class="form-horizontal"> |
|
||||||
<fieldset> |
|
||||||
<div class="control-group"> |
|
||||||
<div class="controls"> |
|
||||||
<div class="input-prepend input-group"> |
|
||||||
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" style="width: 200px" name="birthday" id="birthday" class="form-control" value="03/18/2013" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</fieldset> |
|
||||||
</form> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
$(document).ready(function() { |
|
||||||
$('#birthday').daterangepicker({ singleDatePicker: true }, function(start, end, label) { |
|
||||||
console.log(start.toISOString(), end.toISOString(), label); |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
<h4>Date Range & Time Picker with 30 Minute Increments</h4> |
|
||||||
<div class="well"> |
|
||||||
|
|
||||||
<form class="form-horizontal"> |
|
||||||
<fieldset> |
|
||||||
<div class="control-group"> |
|
||||||
<label class="control-label" for="reservationtime">Choose your check-in and check-out times:</label> |
|
||||||
<div class="controls"> |
|
||||||
<div class="input-prepend input-group"> |
|
||||||
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span> |
|
||||||
<input type="text" style="width: 400px" name="reservation" id="reservationtime" class="form-control" value="08/01/2013 1:00 PM - 08/01/2013 1:30 PM" class="span4"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</fieldset> |
|
||||||
</form> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
$(document).ready(function() { |
|
||||||
$('#reservationtime').daterangepicker({ |
|
||||||
timePicker: true, |
|
||||||
timePickerIncrement: 30, |
|
||||||
format: 'MM/DD/YYYY h:mm A' |
|
||||||
}, function(start, end, label) { |
|
||||||
console.log(start.toISOString(), end.toISOString(), label); |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
<h4>Options Usage</h4> |
|
||||||
|
|
||||||
<div class="well" style="overflow: auto"> |
|
||||||
|
|
||||||
<button id="options1" class="btn btn-primary">Apply Option Set 1</button> |
|
||||||
|
|
||||||
<button id="options2" class="btn btn-primary">Apply Option Set 2</button> |
|
||||||
|
|
||||||
<button id="destroy" class="btn btn-primary">Remove DateRangePicker</button> |
|
||||||
|
|
||||||
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"> |
|
||||||
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> |
|
||||||
<span></span> <b class="caret"></b> |
|
||||||
</div> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
$(document).ready(function() { |
|
||||||
|
|
||||||
var cb = function(start, end, label) { |
|
||||||
console.log(start.toISOString(), end.toISOString(), label); |
|
||||||
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); |
|
||||||
//alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]"); |
|
||||||
}; |
|
||||||
|
|
||||||
var optionSet1 = { |
|
||||||
startDate: moment().subtract(29, 'days'), |
|
||||||
endDate: moment(), |
|
||||||
minDate: '01/01/2012', |
|
||||||
maxDate: '12/31/2015', |
|
||||||
dateLimit: { days: 60 }, |
|
||||||
showDropdowns: true, |
|
||||||
showWeekNumbers: true, |
|
||||||
timePicker: false, |
|
||||||
timePickerIncrement: 1, |
|
||||||
timePicker12Hour: true, |
|
||||||
ranges: { |
|
||||||
'Today': [moment(), moment()], |
|
||||||
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], |
|
||||||
'Last 7 Days': [moment().subtract(6, 'days'), moment()], |
|
||||||
'Last 30 Days': [moment().subtract(29, 'days'), moment()], |
|
||||||
'This Month': [moment().startOf('month'), moment().endOf('month')], |
|
||||||
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] |
|
||||||
}, |
|
||||||
opens: 'left', |
|
||||||
buttonClasses: ['btn btn-default'], |
|
||||||
applyClass: 'btn-sm btn-primary', |
|
||||||
cancelClass: 'btn-sm', |
|
||||||
format: 'MM/DD/YYYY', |
|
||||||
separator: ' to ', |
|
||||||
locale: { |
|
||||||
applyLabel: 'Submit', |
|
||||||
cancelLabel: 'Clear', |
|
||||||
fromLabel: 'From', |
|
||||||
toLabel: 'To', |
|
||||||
customRangeLabel: 'Custom', |
|
||||||
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'], |
|
||||||
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], |
|
||||||
firstDay: 1 |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
var optionSet2 = { |
|
||||||
startDate: moment().subtract(7, 'days'), |
|
||||||
endDate: moment(), |
|
||||||
opens: 'left', |
|
||||||
ranges: { |
|
||||||
'Today': [moment(), moment()], |
|
||||||
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], |
|
||||||
'Last 7 Days': [moment().subtract(6, 'days'), moment()], |
|
||||||
'Last 30 Days': [moment().subtract(29, 'days'), moment()], |
|
||||||
'This Month': [moment().startOf('month'), moment().endOf('month')], |
|
||||||
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
$('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY')); |
|
||||||
|
|
||||||
$('#reportrange').daterangepicker(optionSet1, cb); |
|
||||||
|
|
||||||
$('#reportrange').on('show.daterangepicker', function() { console.log("show event fired"); }); |
|
||||||
$('#reportrange').on('hide.daterangepicker', function() { console.log("hide event fired"); }); |
|
||||||
$('#reportrange').on('apply.daterangepicker', function(ev, picker) { |
|
||||||
console.log("apply event fired, start/end dates are " |
|
||||||
+ picker.startDate.format('MMMM D, YYYY') |
|
||||||
+ " to " |
|
||||||
+ picker.endDate.format('MMMM D, YYYY') |
|
||||||
); |
|
||||||
}); |
|
||||||
$('#reportrange').on('cancel.daterangepicker', function(ev, picker) { console.log("cancel event fired"); }); |
|
||||||
|
|
||||||
$('#options1').click(function() { |
|
||||||
$('#reportrange').data('daterangepicker').setOptions(optionSet1, cb); |
|
||||||
}); |
|
||||||
|
|
||||||
$('#options2').click(function() { |
|
||||||
$('#reportrange').data('daterangepicker').setOptions(optionSet2, cb); |
|
||||||
}); |
|
||||||
|
|
||||||
$('#destroy').click(function() { |
|
||||||
$('#reportrange').data('daterangepicker').remove(); |
|
||||||
}); |
|
||||||
|
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
<h4>Plays nicely with Bootstrap dropdowns</h4> |
|
||||||
|
|
||||||
<div class="well"> |
|
||||||
|
|
||||||
<div class="dropdown" style="display: inline-block;"> |
|
||||||
<a data-toggle="dropdown" class="btn btn-primary" href="#">Regular bootstrap dropdown</a> |
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> |
|
||||||
<li><a href="#">item</a></li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div id="reportrange2" class="btn" style="display: inline-block; background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"> |
|
||||||
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> |
|
||||||
<span></span> <b class="caret"></b> |
|
||||||
</div> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
$(document).ready(function() { |
|
||||||
$('#reportrange2 span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY')); |
|
||||||
$('#reportrange2').daterangepicker({ |
|
||||||
opens: 'center' |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
<h4>And also can drop "up"</h4> |
|
||||||
|
|
||||||
<div class="well"> |
|
||||||
|
|
||||||
<form class="form-horizontal"> |
|
||||||
<fieldset> |
|
||||||
<div class="control-group"> |
|
||||||
<div class="controls"> |
|
||||||
<div class="input-prepend input-group"> |
|
||||||
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" style="width: 200px" name="dropup" id="dropup" class="form-control" value="03/18/2013 - 03/23/2013" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</fieldset> |
|
||||||
</form> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
$(document).ready(function() { |
|
||||||
$('#dropup').daterangepicker({ |
|
||||||
drops:'up' |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</body> |
|
||||||
</html> |
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue