Bootstrap and datepicker
HTML
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<div class="input-group date col-md-3 pull-right" data-date-format="dd-mm-yyyy" data-date="12-04-2015">
<input id="loggingDatePicker" class="form-control" type="text" value="12-04-2015" size="14" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div...
JavaScript
$(document).ready(function() {
if (typeof $('#loggingDatePicker').datepicker !== 'undefined')
{
var currentDate = new Date();
$('#loggingDatePicker').datepicker(
{
format: 'dd-mm-yyyy',
autoclose: false
});
$('#loggingDatePicker').datepicker('setValue', currentDate).datepicker('update');
}
});
// On page select initialize functions
setTimeout(function()
{
FilterLoggingTable();
}, 1000);
// On logging Date picker change call searchLoggingLevel
$("#loggingDatePicker").on("changeDate", function ()
{
FilterLoggingTable();
});
// On logging input (Logging level) change call searchLoggingLevel
$("#loggingInputs").on("change", function ()
{
FilterLoggingTable();
});
function FilterLoggingTable()
{
// Check the value from the select box and filter out table data based on value selected
if ($("#loggingInputs").val() != null || $("#loggingDatePicker").val() != null)
{
var searchLoggingText = document.getElementById("loggingInputs").value.trim();
if (document.getElementById("loggingDatePicker") != null)
{
var searchLoggingDate = document.getElementById("loggingDatePicker").value.trim();
}
}
// Check to see GetServerLogging name is an available function
if (typeof GetServerLogging == 'function')
{
GetServerLogging(searchLoggingText, searchLoggingDate);
}
// Calls search logging function 2.5 seconds after page is ready
setTimeout(function ()
{
$("tr:not(:has(>th))").show().filter(function ()
{
var tableRowElement = this;
var tableRowTextFound, dateSelectedFound;
tableRowTextFound = (tableRowElement.textContent || tableRowElement.innerText || '').indexOf((searchLoggingText || "")) == -1;
dateSelectedFound =...