Hello again great experts.
Our users can search for calls in a variety of ways.
One of those ways is to select a date range between start date and time and end date and time.
However, for some reason, the only way to select date and time is by entering them into the textbox. This is not an ideal way we want to do this because it is going to cause data inconsistency.
My question is whether you guys can please tell me why the calendar icon for start date and end date are not clickable?
Sorry for the long code but I am posting them hoping to see if I am using the jQuery library incorrectly.
Many thanks in advance.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Microlog</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge, IE=8, IE=9, IE=10, IE11,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen"
href="style/bootstrap-datetimepicker.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
</script>
<script type="text/javascript">
var timer;
$(".add-on").click(function () {
timer = self.setInterval("clock()", 1000);
});
</script>
<script type="text/javascript">
$(function () {
var inputSelector = "input[type=text]";
$(document).on("change blur keyup input", inputSelector, function (e) {
var validInputs = $(inputSelector).filter(function (index, element) {
if (element.value.length >= 3) {
document.getElementById("btnSubmit").disabled = false;
}
});
});
});
function clock() {
if (document.getElementById("date_start").value != undefined && document.getElementById("date_start").value.length >= 3) {
document.getElementById("btnSubmit").disabled = false;
clearInterval(timer);
}
if (document.getElementById("date_end").value != undefined && document.getElementById("date_end").value.length >= 3) {
document.getElementById("btnSubmit").disabled = false;
clearInterval(timer);
}
}
</script>
</head>
<body>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<form id="form1" runat="server">
<img src="images/ucoMicrologBanner.png" style="width:100%;" alt="" />
<div id="imgsrc" class="nav-justified">
<span class="Center" style="font-size: 1.5em;">Search by one or more of the fields below.</span><br />
<table class="Center" runat="server">
<tr id="row_0" class="evenRow">
<th>UUID</th>
<th>Call List ID</th>
<th>Phone Number</th>
<th>Start Date</th>
<th>End Date</th>
<th>Call Type</th>
</tr>
<tr id="row_1" class="oddRow">
<td>
<asp:TextBox id="suuid" style="width:150px;" class="form-control" runat="server" />
</td>
<td>
<asp:TextBox id="caller_list_id" style="width:150px;" class="form-control" runat="server" />
</td>
<td>
<asp:TextBox id="phonenumber" style="width:150px;" class="form-control" runat="server" />
</td>
<td style="white-space:nowrap;">
<div id="date_start1" class="input-append date">
<asp:TextBox ID="date_start" Style="width: 150px;" class="form-control" runat="server" />
<span class="add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#date_start1').datetimepicker({
format: 'yyyy-MM-dd hh:mm:ss'
});
})
</script>
</td>
<td style="white-space:nowrap;">
<div id="date_end1" class="input-append date">
<asp:TextBox ID="date_end" Style="width: 150px;" class="form-control" runat="server" />
<span class="add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#date_end1').datetimepicker({
format: 'yyyy-MM-dd hh:mm:ss'
});
})
</script>
</td>
<td>
<asp:DropDownList id="call_type" runat="server">
<asp:ListItem SELECTED="True" value="">All</asp:ListItem>
<asp:ListItem value="0" Text="0 ">Unknown</asp:ListItem>
<asp:ListItem value="1" Text="1">Outbound Progressive</asp:ListItem>
<asp:ListItem value="2" Text="2">Outbound Predictive</asp:ListItem>
<asp:ListItem value="3" Text="4">Inbound</asp:ListItem>
<asp:ListItem value="4" Text="8">Blaster</asp:ListItem>
<asp:ListItem value="5" Text="16">Personal Inbound</asp:ListItem>
<asp:ListItem value="6" Text="32">Nailin</asp:ListItem>
<asp:ListItem value="7" Text="64">External Transfer</asp:ListItem>
<asp:ListItem value="8" Text="128">PBX Outbound</asp:ListItem>
<asp:ListItem value="9" Text="256">PBX Inbound</asp:ListItem>
<asp:ListItem value="10" Text="512">Snoop</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
<p><asp:GridView id="gvCustomers" runat="server" Class="Center" AllowPaging="true" AutoGenerateColumns="False" style="font-size:0.8125em;" OnPageIndexChanging="OnPageIndexChanging" PageSize="10" EmptyDataText="This report contains no data." OnRowDataBound="gvCustomers_RowDataBound" OnDataBound="OnDataBound">
<columns>
<asp:BoundField HeaderText="Dialed Phone Number" DataField="phone_number" />
<asp:BoundField HeaderText="Caller ID" DataField="callerid" />
<asp:BoundField HeaderText="Call List ID" DataField="call_list_id" />
<asp:BoundField HeaderText="Start Time" DataField="startttime" />
<asp:BoundField HeaderText="Connect Time" DataField="connecttime" />
<asp:BoundField HeaderText="End Time" DataField="endtime" />
<asp:BoundField HeaderText="Duration" DataField="duration" />
<asp:BoundField HeaderText="Full Duration" DataField="fullduration" />
<asp:BoundField HeaderText="Campaign Name" DataField="campName" />
<asp:BoundField HeaderText="Queue Name" DataField="queueName" />
<asp:BoundField HeaderText="Call Type" DataField="call_type" />
<asp:BoundField HeaderText="Employee" DataField="employee" />
<asp:BoundField HeaderText="ISDN Cause Code" DataField="cause_code" />
<asp:BoundField HeaderText="Disposition" DataField="call_termination_type" />
<asp:BoundField HeaderText="Telephony Server" DataField="telephonyservers" />
<asp:BoundField HeaderText="Trunk Name" DataField="trunk_name" />
<asp:BoundField HeaderText="UUID" DataField="uuid" />
<asp:TemplateField HeaderText="Recording">
<ItemTemplate>
<asp:HyperLink runat="server" id="HyperLink1"
NavigateUrl='<%#String.Format("http://server/Archives/{1}/snoop_{0}.wav", Eval("uuid"), Eval("telephonyservers")) %>'
Enabled='<%# RecordingExists(Eval("uuid", "{0}"), Eval("telephonyservers", "{0}")) %>' ToolTip='<%# If(RecordingExists(Eval("uuid", "{0}"), Eval("telephonyservers", "{0}")), "Play recording", "No audio found") %>' Target="_blank" Text="Listen" />
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField HeaderText="Details" DataNavigateUrlFields="uuid" DataNavigateUrlFormatString="qpcdr_details.aspx?uuid={0}" Text="Show Details" />
</columns>
</asp:GridView>
<br />
<p><asp:Label ID="lblTotal" runat="server" class="Center" />
</p>
<div style="text-align: center;">
<asp:Button runat="server" id="btnSubmit" style="width:120px;padding: 0; border:0;border-width:thin; background-color:#78BE02 !important;color: #333; height:30px; border-style:solid;" Text="Generate Report" OnClick="btnSubmit_Click" Enabled="false" />
<asp:Button runat="server" id="btnExport" style="width:120px;padding: 0; border: 0;border-width:thin;background-color:#78BE02 !important;color: #333; height:30px; border-style:solid;" Text="Export to CSV" OnClick="btnExport_Click" UseSubmitBehavior="false" />
<asp:Button runat="server" id="btnReset" style="width:120px;padding: 0; border: 0;border-width:thin;background-color:#78BE02 !important;color: #333; height:30px; border-style:solid;" Text="Clear" OnClick="btnReset_Click" UseSubmitBehavior="false" />
</div>
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="images/loader.gif" alt="" />
</div>
</div>
</form>
</body>
</html>
