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