Add frontend assets and plugin bundles
Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
This commit is contained in:
133
assets/plugins/bootstrap-daterangepicker/examples.html
Normal file
133
assets/plugins/bootstrap-daterangepicker/examples.html
Normal file
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr" lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>A date range picker for Twitter Bootstrap</title>
|
||||
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.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/1.8.1/jquery.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">
|
||||
|
||||
<h4>Simple Date Picker</h4>
|
||||
<div class="well">
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="reservation">Reservation dates:</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on"><i class="glyphicon glyphicon-calendar icon-calendar"></i></span><input type="text" style="width: 200px" name="reservation" id="reservation" value="03/18/2013 - 03/23/2013" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('#reservation').daterangepicker();
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<h4>Simple Date & Time Picker</h4>
|
||||
<div class="well">
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="reservationtime">Reservation dates:</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on"><i class="glyphicon glyphicon-calendar icon-calendar"></i></span>
|
||||
<input type="text" style="width: 300px" name="reservation" id="reservationtime" 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'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<h4>Options Usage Example</h4>
|
||||
|
||||
<div class="well" style="overflow: auto">
|
||||
|
||||
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
|
||||
<i class="glyphicon glyphicon-calendar icon-calendar icon-large"></i>
|
||||
<span></span> <b class="caret"></b>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('#reportrange').daterangepicker(
|
||||
{
|
||||
startDate: moment().subtract('days', 29),
|
||||
endDate: moment(),
|
||||
minDate: '01/01/2012',
|
||||
maxDate: '12/31/2014',
|
||||
dateLimit: { days: 60 },
|
||||
showDropdowns: true,
|
||||
showWeekNumbers: true,
|
||||
timePicker: false,
|
||||
timePickerIncrement: 1,
|
||||
timePicker12Hour: true,
|
||||
ranges: {
|
||||
'Today': [moment(), moment()],
|
||||
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
|
||||
'Last 7 Days': [moment().subtract('days', 6), moment()],
|
||||
'Last 30 Days': [moment().subtract('days', 29), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
|
||||
},
|
||||
opens: 'left',
|
||||
buttonClasses: ['btn btn-default'],
|
||||
applyClass: 'btn-small btn-primary',
|
||||
cancelClass: 'btn-small',
|
||||
format: 'MM/DD/YYYY',
|
||||
separator: ' to ',
|
||||
locale: {
|
||||
applyLabel: 'Submit',
|
||||
fromLabel: 'From',
|
||||
toLabel: 'To',
|
||||
customRangeLabel: 'Custom Range',
|
||||
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
|
||||
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
firstDay: 1
|
||||
}
|
||||
},
|
||||
function(start, end) {
|
||||
console.log("Callback has been called!");
|
||||
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
|
||||
}
|
||||
);
|
||||
//Set the initial state of the picker label
|
||||
$('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user