locked
Having problem with jQuery date format. Please help! RRS feed

  • Question

  • User1216627406 posted

    I saw this solution here provided by YongQing which was exactly what I am looking for:

    https://forums.asp.net/t/2157093.aspx?Data+and+Time+calender

    I tried to adopt it to suit our needs but is not working for me.

    Can someone please help?

    <!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="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" />
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
       <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    
        <style type="text/css">
            body
            {
                font-family: Arial;
                font-size: 10pt;
            }
            table
            {
                border: 1px solid #ccc;
                border-collapse: collapse;
                background-color: #fff;
            }
            table th
            {
                background-color: #B8DBFD;
                color: #333;
                font-weight: bold;
            }
            table th, table td
            {
                padding: 5px;
                border: 1px solid #ccc;
            }
            table, table table td
            {
                border: 0px solid #ccc;
            }
        </style>
        <style type="text/css">
            .modal
            {
                ;
                top: 0;
                left: 0;
                background-color: black;
                z-index: 99;
                opacity: 0.8;
                filter: alpha(opacity=80);
                -moz-opacity: 0.8;
                min-height: 100%;
                width: 100%;
            }
            .loading
            {
                font-family: Arial;
                font-size: 10pt;
                border: 5px solid #67CFF5;
                width: 200px;
                height: 100px;
                display: none;
                ;
                background-color: White;
                z-index: 999;
            }
        </style>
        <style type="text/css">
           .aspNetDisabled {
                padding-top: 10px;
                padding-right: 20px;
                padding-bottom: 10px;
                padding-left: 10px;
                width: 100%;
                height: 100%;
                background-color: #CF585A !important;
                color: #D8D8D8;
              }
        </style>
    
        <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').on("submit", function () {
                ShowProgress();
            });
    
        </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;
                        }
                    });
                });
            });
        </script>
    
    </head>
    <body>
        <script type="text/javascript"
            src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script>
        <script type="text/javascript"
            src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
            $('#date_start').datetimepicker({
                format: 'yyyy/MM/dd hh:mm:ss', 
            });
        </script>
       <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;">
    				<asp:TextBox id="date_start" style="width:150px;" class="form-control input-append date" runat="server" />
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
    		 </td>
    
    			<td>
    			  <asp:TextBox id="date_end" style="width:150px;" class="form-control alignleft" runat="server" />
                  <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('date_end','yyyyMMdd','dropdown',true,'24',true)" style="cursor:pointer;"/> 
    		 </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://servername/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>

    When I click on it, it does nothing.

    I have tried f12 to see what could be revealed as the issue but no errors are seen on the console.

    Thanks in advance

    Wednesday, June 26, 2019 7:08 PM

Answers

  • User665608656 posted

    Hi simflex,

    According to your code you provided, I found that you put the JS that triggered the datetimepicker on the top of your page content.

    Because your page is executed sequentially, the dom of HTML is not loaded at the head of the page. The object cannot be retrieved, so it is invalid.

    I recommend that you put your JS that triggered the datetimepicker event at the end of the page, that is, when all the contents of the DOM tree are loaded, you execute this JS, just like the reply in my previous link you provided.

    Or you can put your JS event in the page load event like below:

    <script type="text/javascript">
            $(function () {
                $('#date_start').datetimepicker({
                    format: 'yyyy/MM/dd hh:mm:ss',
                });
            })
        </script>

    In addition,based on your code, you should delete this bootstrap reference 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    , which will casue problems with calendar selection, because it conflicts with the boostrap files you quoted earlier.

    And you could better change your date_start textbox into the case provided by the official website like this:

     <div id="date_start" class="input-append date">
                                <asp:TextBox ID="TextBox1" Style="width: 150px;" class="form-control" runat="server" />
                                <span class="add-on">
                                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                </span>
                            </div>

    Here is the result of modified code:

     

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 27, 2019 1:41 AM

All replies

  • User665608656 posted

    Hi simflex,

    According to your code you provided, I found that you put the JS that triggered the datetimepicker on the top of your page content.

    Because your page is executed sequentially, the dom of HTML is not loaded at the head of the page. The object cannot be retrieved, so it is invalid.

    I recommend that you put your JS that triggered the datetimepicker event at the end of the page, that is, when all the contents of the DOM tree are loaded, you execute this JS, just like the reply in my previous link you provided.

    Or you can put your JS event in the page load event like below:

    <script type="text/javascript">
            $(function () {
                $('#date_start').datetimepicker({
                    format: 'yyyy/MM/dd hh:mm:ss',
                });
            })
        </script>

    In addition,based on your code, you should delete this bootstrap reference 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    , which will casue problems with calendar selection, because it conflicts with the boostrap files you quoted earlier.

    And you could better change your date_start textbox into the case provided by the official website like this:

     <div id="date_start" class="input-append date">
                                <asp:TextBox ID="TextBox1" Style="width: 150px;" class="form-control" runat="server" />
                                <span class="add-on">
                                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                </span>
                            </div>

    Here is the result of modified code:

     

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 27, 2019 1:41 AM
  • User1216627406 posted

    Thank you very much Yongqing.

    It worked.

    Thursday, June 27, 2019 5:02 PM