Solved

JQuery Date Time picker not showing

Posted on 2016-08-02
29
93 Views
Last Modified: 2016-08-08
Hi,

I am new to JQuery.

I simply want to use a Jquery Date time picker to show when a control is clicked but I am having difficulty and I am not sure why.

The one I am using is:

http://trentrichardson.com/examples/timepicker/


The Errors I am getting are either:

ErrOR
error

My code:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Transport Booking In System</title>

  <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>

        <!-- Fav  -->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon/">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon"/>

         

    
    
<script language="javascript" type="text/javascript">

      $(document).ready(function () {

          $('#date_foo').datetimepicker();

      });


  


function checkDate(sender,args)
{
    if (sender._selectedDate > new Date()) 
    {
        alert('You cannot select a day greater than today!');
        sender._selectedDate = new Date(); 
        sender._textbox.set_Value(sender._selectedDate.format(sender._format));
    }
}

function Validate(obj, objid)
{
    var table = document.getElementById('dgrInserts');
    var par = obj.parentNode; 
    while (par.nodeName.toLowerCase() != 'tr')
    { 
        par = par.parentNode; 
    } 

    var ddlCellOne = table.rows[par.rowIndex].cells[1];
    var ddlC = ddlCellOne.childNodes[0];
    
    var indexC = ddlC.selectedIndex;
    var valC = ddlC.options[indexC].value;
    
    var ddlCellThree = table.rows[par.rowIndex].cells[3];
    var ddlT = ddlCellThree.childNodes[0];
    
    var indexT = ddlT.selectedIndex;
    var valT = ddlT.options[indexT].value;
    
    if(valC == '' || valT == '')
    {
        alert('Please enter all fields');
        return false;
    }
    else
    {
        __doPostBack(objid, '');
    }
}

</script>
  
<style type="text/css">
    
.radcalendar .ajax__calendar_container 
{
    background-color:#fff;
    border:solid 1px #000;
    font-family:arial,helvetica,clean,sans-serif;
    cursor:default;
    width:205px;
    font-size:12px;
    text-align:center;
    padding:0px;
}

.radcalendar .ajax__calendar_body 
{
    height:136px;
    width:205px;
    position:relative;
    overflow:hidden;
}

.radcalendar .ajax__calendar_days, .radcalendar .ajax__calendar_months, .radcalendar .ajax__calendar_years 
{
    top:0px; 
    left:0px;
    height:136px;
    width:195px;    
    padding:5px;
    position:absolute;
    text-align:center;
}

.radcalendar .ajax__calendar_days table
{
    border-spacing:0;
    border-collapse:collapse;
    font:100% sans-serif;
    text-align:center;    
}

.radcalendar .ajax__calendar_header 
{
    padding-top:4px;
    background:url(header.gif) repeat-x; 
    height:21px;
}

.radcalendar .ajax__calendar_prev 
{
    margin-left:8px;
    margin-top:3px;
    display:block;
    cursor:pointer;
    float:left;
    background:url(prev.gif) no-repeat;
}

.radcalendar .ajax__calendar_next 
{
    margin-top:2px;
    margin-right:0px;
    display:block;
    cursor:pointer;
    float:right;
    background:url(next.gif) no-repeat;
}

.radcalendar .ajax__calendar_title 
{
    cursor:pointer;
    text-align:center;
    font-weight:600;
    font-size:11pt;
    color:#fff;
    font-family:Arial;    
}

.radcalendar .ajax__calendar_footer, .radcalendar .ajax__calendar_today 
{
    display:none;
}

.radcalendar .ajax__calendar_dayname 
{
    padding-left:3px;
    padding-right:3px;
    margin-bottom:5px;
    margin-left:2px;
    margin-right:2px;
    text-align:center;
    font-weight:700;
    font-size:10pt;
    color:#000;
    border-bottom:solid 1px #a6a6a6;
}

.radcalendar .ajax__calendar_day, .radcalendar .ajax__calendar_month, .radcalendar .ajax__calendar_year
{
    padding:0px;
    color:#000;
    text-align:center;  
    padding:0pt 2px;
}

.radcalendar .ajax__calendar_hover .ajax__calendar_day, .radcalendar .ajax__calendar_hover .ajax__calendar_month, .radcalendar .ajax__calendar_hover .ajax__calendar_year
{
    color:#0066cc;
}

.radcalendar .ajax__calendar_other .ajax__calendar_day, .radcalendar .ajax__calendar_other .ajax__calendar_year
{
    color:#a6a6a6;   
}

.radcalendar .ajax__calendar_active .ajax__calendar_day
{
	background-color: #C7C7C7;
    color:#0066cc;   
}
 
 
  .div-left{
    float:left;
    padding-left:0px;
}
.div-right{
    float:right;
    padding-right:0px;
}
.footer-container{
    height:40px;
    max-width:60%;
    
    
}
.footer {
    height:30px;
    line-height:30px;
    
}
.footer li {
    list-style-type:none;
    float:left;
    padding-left:0px;
}
.footer a {
    text-decoration:none;
    
}
.footer li:nth-child(1) {
    text-decoration:none;
    height:30px;
    display:block;
    
   
    padding-right: 0px;
}


 
    
</style>


</head>
<body>

<input type="text" id="date_foo" value="">

    <form id="form1" runat="server">
    <asp:ScriptManager ID="scmPage" runat="server">
        <Services>
            <asp:ServiceReference Path="TrailerService.asmx" />
        </Services>
    </asp:ScriptManager>
    
    

      <div class="footer-container">
    <div class="div-left">
      <ul class="footer">
        <li>Trailer System</li>
      </ul>
    </div>
    <div class="div-right">
      <ul class="footer">
        
        <li>  <asp:Image ID="Image1" runat="server" ImageUrl="Resources/metsa_wood_3.png" 
                Height="43px" Width="53px" /></li>
       </ul>
     </div>
   </div>
   
  <br />

    <div>
        <div style="float:left; width:450px;">
            <asp:Label ID="lblDisp" runat="server" Text="Display Date: " Font-Bold="true" Font-Size="Larger" /><asp:TextBox ID="tbDate" runat="server" Font-Bold="true" Font-Size="Larger" /><asp:ImageButton ID="imgDate" runat="server" ImageUrl="calendar.png" style="margin:2px;" /><cc1:CalendarExtender ID="ccDate" runat="server" CssClass="radcalendar" PopupButtonID="imgDate" TargetControlID="tbDate" Enabled="True" Format="dd/MM/yyyy" OnClientDateSelectionChanged="checkDate" />&nbsp;&nbsp;&nbsp;<asp:Button ID="btSearch" runat="server" Text="Search" OnClick="btSearch_Click" />
        </div><div style="float:left; width:200px; text-align:center;"><asp:Label ID="lblGetDate" runat="server" Font-Bold="true" /></div><div style="float:left; width:200px;"><asp:Button ID="btUpdate" runat="server" Text="Update Changed Fields" OnClick="btUpdate_Click" /></div>
        <br /><br />
        <div style="margin:20px;">
            <asp:GridView ID="dgrInserts" runat="server" AllowSorting="true" AutoGenerateColumns="False" DataKeyNames="Contracter, Bay, Trailer, DriverName" CellPadding="4" ForeColor="#333333" GridLines="None" DataSourceID="sqlInserts" OnRowDataBound="dgrInserts_DataBound">
                <RowStyle BackColor="#EFF3FB" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <HeaderStyle BackColor="#8fd400" Font-Bold="True" ForeColor="White" />
                <EditRowStyle BackColor="#2461BF" />
                <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:TemplateField HeaderText="Reg Number In"><ItemTemplate><asp:TextBox ID="tbReg" runat="server" Text='<%# Eval("RegistrationIn") %>' Width="70px" /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Driver/Contractor"><ItemTemplate><asp:DropDownList ID="ddlContractor" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlContractor_SelectedIndexChanged" AppendDataBoundItems="true"><asp:ListItem Text="Please select..." Value="" /></asp:DropDownList></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Drivers Name"><ItemTemplate><asp:TextBox ID="tbDriverName" runat="server" Text='<%# Eval("DriverName") %>' Width="70px" /></ItemTemplate></asp:TemplateField>
                
                <asp:TemplateField HeaderText="Remarks"><ItemTemplate><asp:TextBox ID="tbRemarks" runat="server" Text='<%# Eval("Remarks") %>' /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Trailer" SortExpression="Trailer"><ItemTemplate><asp:DropDownList ID="ddlTrailer" runat="server" Width="120px" AppendDataBoundItems="true"><asp:ListItem Text="Please select..." Value="" /></asp:DropDownList><asp:TextBox ID="tbTrailer" runat="server"  Width="50px"/></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Bay"><ItemTemplate><asp:DropDownList ID="ddlBay" runat="server" /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Checked In?" SortExpression="TimeIn"><ItemTemplate><asp:CheckBox ID="cbTimeIn" runat="server" AutoPostBack="true" OnClick="return Validate(this, this.id);" OnCheckedChanged="cbIn_CheckedChanged" />&nbsp;<asp:Label ID="lblTimeIn" runat="server" Text='<%# Eval("TimeIn") %>' /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Reg Number Out"><ItemTemplate><asp:TextBox ID="tbRegOut" runat="server" Text='<%# Eval("RegistrationOut") %>' Width="70px" /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Checked Out?"><ItemTemplate><asp:CheckBox ID="cbTimeOut" runat="server" AutoPostBack="true" OnCheckedChanged="cbOut_CheckedChanged" />&nbsp;<asp:Label ID="lblTimeOut" runat="server" Text='<%# Eval("TimeOut") %>' /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Goods IN/OUT?"><ItemTemplate>IN<asp:CheckBox ID="cbGoodsIn" runat="server" /><asp:Label ID="lblGoodsINDateTime" runat="server" Text='<%# Eval("GoodsINDateTime") %>' /> OUT<asp:CheckBox ID="cbGoodsOut" runat="server" AutoPostBack="true" OnCheckedChanged="cbOut_CheckedChanged" /><asp:Label ID="lblGoodsOutDateTime" runat="server" Text='<%# Eval("GoodsOutDateTime") %>' />&nbsp;<asp:HiddenField ID="hidID" runat="server" Value='<%# Eval("ID") %>' /></ItemTemplate></asp:TemplateField>
            
            </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="sqlInserts" runat="server" ConnectionString="<%$ ConnectionStrings:TeklogixConnectionString %>" SelectCommand="SELECT ID, RegistrationIn, Contracter, Remarks, Trailer, Bay, TimeIn, TimeOut, RegistrationOut, DriverName, GoodsINDateTime, GoodsOutDateTime  FROM FF_tTransportBookingIn WHERE (TimeOut IS NULL) ORDER BY ID DESC">
            <SelectParameters>
                <asp:ControlParameter ControlID="hidDate" Name="Search" PropertyName="Value" />
            </SelectParameters>
            </asp:SqlDataSource>
            <asp:HiddenField ID="hidDate" runat="server" />
        </div>
    </div>
    <p>
        Connected to:
        <asp:HyperLink ID="HLConnectedTo" runat="server"></asp:HyperLink>
    </p>
    </form>
    
    <script language="javascript" type="text/javascript" src="js/vendor/jquery-1.11.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

</body>
</html>

Open in new window

0
Comment
Question by:SmashAndGrab
  • 15
  • 12
  • 2
29 Comments
 
LVL 35

Expert Comment

by:Kimputer
ID: 41738744
You didn't follow the guide (it's IN THE LINK you just posted!):

Requirements

You also need to include jQuery and jQuery UI with datepicker and slider wigits. You should include them in your page in the following order:

jQuery
jQueryUI (with datepicker and slider wigits)
Timepicker

I don't see any mentioning of jQueryUI in your code. Therefore, it won't work.
Fix it by following this link:
http://jqueryui.com/download/

Also, why use a jQuery version from 2014??
0
 

Author Comment

by:SmashAndGrab
ID: 41738789
Thanks.

As said - I am new to Jquery.. so its a learning curve for me :)

Think I have done all that you mentioned above..

Downloaded the Jquery and left everything selected.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Transport Booking In System</title>

  <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>

        <!-- Fav  -->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon/">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon"/>

       
     
    
<script language="javascript" type="text/javascript">


    $(document).ready(function () {

        $('#date_foo').datetimepicker();

    });

  


function checkDate(sender,args)
{
    if (sender._selectedDate > new Date()) 
    {
        alert('You cannot select a day greater than today!');
        sender._selectedDate = new Date(); 
        sender._textbox.set_Value(sender._selectedDate.format(sender._format));
    }
}

function Validate(obj, objid)
{
    var table = document.getElementById('dgrInserts');
    var par = obj.parentNode; 
    while (par.nodeName.toLowerCase() != 'tr')
    { 
        par = par.parentNode; 
    } 

    var ddlCellOne = table.rows[par.rowIndex].cells[1];
    var ddlC = ddlCellOne.childNodes[0];
    
    var indexC = ddlC.selectedIndex;
    var valC = ddlC.options[indexC].value;
    
    var ddlCellThree = table.rows[par.rowIndex].cells[3];
    var ddlT = ddlCellThree.childNodes[0];
    
    var indexT = ddlT.selectedIndex;
    var valT = ddlT.options[indexT].value;
    
    if(valC == '' || valT == '')
    {
        alert('Please enter all fields');
        return false;
    }
    else
    {
        __doPostBack(objid, '');
    }
}

</script>
  
<style type="text/css">
    
.radcalendar .ajax__calendar_container 
{
    background-color:#fff;
    border:solid 1px #000;
    font-family:arial,helvetica,clean,sans-serif;
    cursor:default;
    width:205px;
    font-size:12px;
    text-align:center;
    padding:0px;
}

.radcalendar .ajax__calendar_body 
{
    height:136px;
    width:205px;
    position:relative;
    overflow:hidden;
}

.radcalendar .ajax__calendar_days, .radcalendar .ajax__calendar_months, .radcalendar .ajax__calendar_years 
{
    top:0px; 
    left:0px;
    height:136px;
    width:195px;    
    padding:5px;
    position:absolute;
    text-align:center;
}

.radcalendar .ajax__calendar_days table
{
    border-spacing:0;
    border-collapse:collapse;
    font:100% sans-serif;
    text-align:center;    
}

.radcalendar .ajax__calendar_header 
{
    padding-top:4px;
    background:url(header.gif) repeat-x; 
    height:21px;
}

.radcalendar .ajax__calendar_prev 
{
    margin-left:8px;
    margin-top:3px;
    display:block;
    cursor:pointer;
    float:left;
    background:url(prev.gif) no-repeat;
}

.radcalendar .ajax__calendar_next 
{
    margin-top:2px;
    margin-right:0px;
    display:block;
    cursor:pointer;
    float:right;
    background:url(next.gif) no-repeat;
}

.radcalendar .ajax__calendar_title 
{
    cursor:pointer;
    text-align:center;
    font-weight:600;
    font-size:11pt;
    color:#fff;
    font-family:Arial;    
}

.radcalendar .ajax__calendar_footer, .radcalendar .ajax__calendar_today 
{
    display:none;
}

.radcalendar .ajax__calendar_dayname 
{
    padding-left:3px;
    padding-right:3px;
    margin-bottom:5px;
    margin-left:2px;
    margin-right:2px;
    text-align:center;
    font-weight:700;
    font-size:10pt;
    color:#000;
    border-bottom:solid 1px #a6a6a6;
}

.radcalendar .ajax__calendar_day, .radcalendar .ajax__calendar_month, .radcalendar .ajax__calendar_year
{
    padding:0px;
    color:#000;
    text-align:center;  
    padding:0pt 2px;
}

.radcalendar .ajax__calendar_hover .ajax__calendar_day, .radcalendar .ajax__calendar_hover .ajax__calendar_month, .radcalendar .ajax__calendar_hover .ajax__calendar_year
{
    color:#0066cc;
}

.radcalendar .ajax__calendar_other .ajax__calendar_day, .radcalendar .ajax__calendar_other .ajax__calendar_year
{
    color:#a6a6a6;   
}

.radcalendar .ajax__calendar_active .ajax__calendar_day
{
	background-color: #C7C7C7;
    color:#0066cc;   
}
 
 
  .div-left{
    float:left;
    padding-left:0px;
}
.div-right{
    float:right;
    padding-right:0px;
}
.footer-container{
    height:40px;
    max-width:60%;
    
    
}
.footer {
    height:30px;
    line-height:30px;
    
}
.footer li {
    list-style-type:none;
    float:left;
    padding-left:0px;
}
.footer a {
    text-decoration:none;
    
}
.footer li:nth-child(1) {
    text-decoration:none;
    height:30px;
    display:block;
    
   
    padding-right: 0px;
}


 
    
</style>


</head>
<body>

<input type="text" id="date_foo" value="">

    <form id="form1" runat="server">
    <asp:ScriptManager ID="scmPage" runat="server">
        <Services>
            <asp:ServiceReference Path="TrailerService.asmx" />
        </Services>
    </asp:ScriptManager>
    
    

      <div class="footer-container">
    <div class="div-left">
      <ul class="footer">
        <li>Trailer System</li>
      </ul>
    </div>
    <div class="div-right">
      <ul class="footer">
        
        <li>  <asp:Image ID="Image1" runat="server" ImageUrl="Resources/metsa_wood_3.png" 
                Height="43px" Width="53px" /></li>
       </ul>
     </div>
   </div>
   
  <br />

    <div>
        <div style="float:left; width:450px;">
            <asp:Label ID="lblDisp" runat="server" Text="Display Date: " Font-Bold="true" Font-Size="Larger" /><asp:TextBox ID="tbDate" runat="server" Font-Bold="true" Font-Size="Larger" /><asp:ImageButton ID="imgDate" runat="server" ImageUrl="calendar.png" style="margin:2px;" /><cc1:CalendarExtender ID="ccDate" runat="server" CssClass="radcalendar" PopupButtonID="imgDate" TargetControlID="tbDate" Enabled="True" Format="dd/MM/yyyy" OnClientDateSelectionChanged="checkDate" />&nbsp;&nbsp;&nbsp;<asp:Button ID="btSearch" runat="server" Text="Search" OnClick="btSearch_Click" />
        </div><div style="float:left; width:200px; text-align:center;"><asp:Label ID="lblGetDate" runat="server" Font-Bold="true" /></div><div style="float:left; width:200px;"><asp:Button ID="btUpdate" runat="server" Text="Update Changed Fields" OnClick="btUpdate_Click" /></div>
        <br /><br />
        <div style="margin:20px;">
            <asp:GridView ID="dgrInserts" runat="server" AllowSorting="true" AutoGenerateColumns="False" DataKeyNames="Contracter, Bay, Trailer, DriverName" CellPadding="4" ForeColor="#333333" GridLines="None" DataSourceID="sqlInserts" OnRowDataBound="dgrInserts_DataBound">
                <RowStyle BackColor="#EFF3FB" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <HeaderStyle BackColor="#8fd400" Font-Bold="True" ForeColor="White" />
                <EditRowStyle BackColor="#2461BF" />
                <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:TemplateField HeaderText="Reg Number In"><ItemTemplate><asp:TextBox ID="tbReg" runat="server" Text='<%# Eval("RegistrationIn") %>' Width="70px" /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Driver/Contractor"><ItemTemplate><asp:DropDownList ID="ddlContractor" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlContractor_SelectedIndexChanged" AppendDataBoundItems="true"><asp:ListItem Text="Please select..." Value="" /></asp:DropDownList></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Drivers Name"><ItemTemplate><asp:TextBox ID="tbDriverName" runat="server" Text='<%# Eval("DriverName") %>' Width="70px" /></ItemTemplate></asp:TemplateField>
                
                <asp:TemplateField HeaderText="Remarks"><ItemTemplate><asp:TextBox ID="tbRemarks" runat="server" Text='<%# Eval("Remarks") %>' /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Trailer" SortExpression="Trailer"><ItemTemplate><asp:DropDownList ID="ddlTrailer" runat="server" Width="120px" AppendDataBoundItems="true"><asp:ListItem Text="Please select..." Value="" /></asp:DropDownList><asp:TextBox ID="tbTrailer" runat="server"  Width="50px"/></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Bay"><ItemTemplate><asp:DropDownList ID="ddlBay" runat="server" /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Checked In?" SortExpression="TimeIn"><ItemTemplate><asp:CheckBox ID="cbTimeIn" runat="server" AutoPostBack="true" OnClick="return Validate(this, this.id);" OnCheckedChanged="cbIn_CheckedChanged" />&nbsp;<asp:Label ID="lblTimeIn" runat="server" Text='<%# Eval("TimeIn") %>' /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Reg Number Out"><ItemTemplate><asp:TextBox ID="tbRegOut" runat="server" Text='<%# Eval("RegistrationOut") %>' Width="70px" /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Checked Out?"><ItemTemplate><asp:CheckBox ID="cbTimeOut" runat="server" AutoPostBack="true" OnCheckedChanged="cbOut_CheckedChanged" />&nbsp;<asp:Label ID="lblTimeOut" runat="server" Text='<%# Eval("TimeOut") %>' /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Goods IN/OUT?"><ItemTemplate>IN<asp:CheckBox ID="cbGoodsIn" runat="server" AutoPostBack="true" OnCheckedChanged="cbGoodsIN_CheckedChanged" /><asp:Label ID="lblGoodsINDateTime" runat="server" Text='<%# Eval("GoodsINDateTime") %>' /> OUT<asp:CheckBox ID="cbGoodsOut" runat="server" AutoPostBack="true" OnCheckedChanged="cbGoodsOut_CheckedChanged" /><asp:Label ID="lblGoodsOutDateTime" runat="server" Text='<%# Eval("GoodsOutDateTime") %>' />&nbsp;<asp:HiddenField ID="hidID" runat="server" Value='<%# Eval("ID") %>' /></ItemTemplate></asp:TemplateField>
            
            </Columns>
            </asp:GridView>
            
            <!--
            SELECT ID, RegistrationIn, Contracter, Remarks, Trailer, Bay, TimeIn, TimeOut, RegistrationOut, DriverName, GoodsINDateTime, GoodsOutDateTime  FROM FF_tTransportBookingIn WHERE (TimeOut IS NULL) ORDER BY ID DESC
            -->

            <asp:SqlDataSource ID="sqlInserts" runat="server" ConnectionString="<%$ ConnectionStrings:TeklogixConnectionString %>" SelectCommand="SELECT ID, RegistrationIn, Contracter, Remarks, Trailer, Bay, TimeIn, TimeOut, RegistrationOut, DriverName, GoodsINDateTime, GoodsOutDateTime FROM FF_tTransportBookingIn WHERE ID =73764">
            <SelectParameters>
                <asp:ControlParameter ControlID="hidDate" Name="Search" PropertyName="Value" />
            </SelectParameters>
            </asp:SqlDataSource>
            <asp:HiddenField ID="hidDate" runat="server" />
        </div>
    </div>
    <p>
        Connected to:
        <asp:HyperLink ID="HLConnectedTo" runat="server"></asp:HyperLink>
    </p>
    </form>
    
    <script language="javascript" type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery-ui.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

</body>
</html>

Open in new window




Still getting an error?
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41738790
Can you post your code in jsfiddle to check with?

please add jQuery library as well to work normal jQuery function
<script language="javascript" type="text/javascript" src="js/vendor/jquery-1.11.1.min.js"></script>

Open in new window


@Kimputer is right, you must need to include required CSS/JS files to work external plugins!
0
 

Author Comment

by:SmashAndGrab
ID: 41738795
As far as I can see I have included everything?


The CSS..

  <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>


The script..

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('#date_foo').datetimepicker();
    });
</script>


The Jquery refernces:

   <script language="javascript" type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery-ui.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41738804
You have included
 
<script language="javascript" type="text/javascript" src="js/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script> 

Open in new window


Need to include like
<script language="javascript" type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script> 

Open in new window

0
 
LVL 35

Expert Comment

by:Kimputer
ID: 41738806
Please move the 3 jquery related script lines to BEFORE the first script reference is made. AND fix what post up here says obviously.
0
 

Author Comment

by:SmashAndGrab
ID: 41738826
Thanks.  

It pops up now.

With this code..


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Transport Booking In System</title>



        <!-- Fav  -->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon/">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon"/>
   
   
      <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>

    <script language="javascript" type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery-ui.min.js"></script>
   <script language="javascript" type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>  
     
   
<script language="javascript" type="text/javascript">


    $(document).ready(function () {

        $('#date_foo').datetimepicker();

    });

 


However, it appears to be not using the stylesheet?


no css
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41738840
also include "jquery-ui.min.css" to draw default styles

If you do not have, download from CDN
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css

CSS  files should like below
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41738847
Thanks Prakash!!   Thanks to both of you.

It worked!

So , I need to remember in the future to add the core componets of Jquery and the css.

A couple of questions:

1. Why sometimes is it better to put the SCRIPT referneces at the end of the document (before the closing </body> tag and other within the <head>?

2. When using this datetime picker - How do I default it to todays data and time?

3. What is the event that means the user has picked a date time?

Thanks

Stuart
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41738918
1. Why sometimes is it better to put the SCRIPT referneces at the end of the document (before the closing </body> tag and other within the <head>?
Answer: Javascript code which reflects to DOM should be added to <head> and which code does not affects could be put to the end of the page.

2. When using this datetime picker - How do I default it to todays data and time?
var currentDate = new Date();  
$("#mydate").datepicker("setDate",currentDate);

Open in new window

3. What is the event that means the user has picked a date time?
$(".date").datepicker({
  onSelect: function(dateText) {
    display("Selected date: " + dateText + "; input's current value: " + this.value);
  }
});
0
 

Author Comment

by:SmashAndGrab
ID: 41738933
Thanks for the information Prakash.

Is it possible to show the datetime picker when a checkbox is selected and to populate the date in label?

i.e.

1. ASP check box "cbTimeIn" is clicked and the datetime box appears.
2. When selected - it populates the label (lblTimeIn).


Have posted the entire data grid for reference..

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        
        $('#cbTimeIn').click(function () {
            $('#lblTimeIn').datetimepicker();
        });

        $("#cbTimeIn").datepicker({
            onSelect: function (dateText) {
                display("Selected date: " + dateText + "; input's current value: " + this.value);
            }
        });

    });
<script>






 <asp:GridView ID="dgrInserts" runat="server" AllowSorting="true" AutoGenerateColumns="False" DataKeyNames="Contracter, Bay, Trailer, DriverName" CellPadding="4" ForeColor="#333333" GridLines="None" DataSourceID="sqlInserts" OnRowDataBound="dgrInserts_DataBound">
                <RowStyle BackColor="#EFF3FB" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <HeaderStyle BackColor="#8fd400" Font-Bold="True" ForeColor="White" />
                <EditRowStyle BackColor="#2461BF" />
                <AlternatingRowStyle BackColor="White" />
            <Columns>
<asp:TemplateField HeaderText="Reg Number In"><ItemTemplate><asp:TextBox ID="tbReg" runat="server" Text='<%# Eval("RegistrationIn") %>' Width="70px" /></ItemTemplate></asp:TemplateField>


<asp:TemplateField HeaderText="Driver/Contractor"><ItemTemplate><asp:DropDownList ID="ddlContractor" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlContractor_SelectedIndexChanged" AppendDataBoundItems="true"><asp:ListItem Text="Please select..." Value="" /></asp:DropDownList></ItemTemplate></asp:TemplateField>



 <asp:TemplateField HeaderText="Drivers Name"><ItemTemplate><asp:TextBox ID="tbDriverName" runat="server" Text='<%# Eval("DriverName") %>' Width="70px" /></ItemTemplate></asp:TemplateField>
                

<asp:TemplateField HeaderText="Remarks"><ItemTemplate><asp:TextBox ID="tbRemarks" runat="server" Text='<%# Eval("Remarks") %>' /></ItemTemplate></asp:TemplateField>
 
<asp:TemplateField HeaderText="Trailer" SortExpression="Trailer"><ItemTemplate><asp:DropDownList ID="ddlTrailer" runat="server" Width="120px" AppendDataBoundItems="true"><asp:ListItem Text="Please select..." Value="" /></asp:DropDownList><asp:TextBox ID="tbTrailer" runat="server"  Width="50px"/></ItemTemplate></asp:TemplateField>
                
<asp:TemplateField HeaderText="Bay"><ItemTemplate><asp:DropDownList ID="ddlBay" runat="server" /></ItemTemplate></asp:TemplateField>
                
<asp:TemplateField HeaderText="Checked In?" SortExpression="TimeIn"><ItemTemplate><asp:CheckBox ID="cbTimeIn" runat="server" />&nbsp;<asp:Label ID="lblTimeIn" runat="server" Text='<%# Eval("TimeIn") %>' /></ItemTemplate></asp:TemplateField>


<asp:TemplateField HeaderText="Reg Number Out"><ItemTemplate><asp:TextBox ID="tbRegOut" runat="server" Text='<%# Eval("RegistrationOut") %>' Width="70px" /></ItemTemplate></asp:TemplateField>


<asp:TemplateField HeaderText="Checked Out?"><ItemTemplate><asp:CheckBox ID="cbTimeOut" runat="server" AutoPostBack="true" OnCheckedChanged="cbOut_CheckedChanged" />&nbsp;<asp:Label ID="lblTimeOut" runat="server" Text='<%# Eval("TimeOut") %>' /></ItemTemplate></asp:TemplateField>


 <asp:TemplateField HeaderText="Goods IN/OUT?"><ItemTemplate>IN<asp:CheckBox ID="cbGoodsIn" runat="server" AutoPostBack="true" OnCheckedChanged="cbGoodsIN_CheckedChanged" /><asp:Label ID="lblGoodsINDateTime" runat="server" Text='<%# Eval("GoodsINDateTime") %>' /> OUT<asp:CheckBox ID="cbGoodsOut" runat="server" AutoPostBack="true" OnCheckedChanged="cbGoodsOut_CheckedChanged" /><asp:Label ID="lblGoodsOutDateTime" runat="server" Text='<%# Eval("GoodsOutDateTime") %>' />&nbsp;<asp:HiddenField ID="hidID" runat="server" Value='<%# Eval("ID") %>' /></ItemTemplate></asp:TemplateField>
            
           
            

            </Columns>
            </asp:GridView>
         

Open in new window

0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41738960
Could you please try below modified script?
<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        
        $('#cbTimeIn').click(function () {
            $('#cbTimeIn').datetimepicker('show');
        });

        $("#cbTimeIn").datepicker({
            onSelect: function (dateText) {
                //display("Selected date: " + dateText + "; input's current value: " + this.value);
				$('#lblTimeIn').val(this.value)
            }
        });

    });
<script>

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41738980
Hi Parkesh,  

I tried the script and the popup didn't show.

:(
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41739038
Could you please describe it more? What type of error is coming?
or Could you please upload HTML generated code to JSFiddler to check with it?
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:SmashAndGrab
ID: 41739076
Hi Prakash,

Let me explain.

I am using a ASP GRIDVIEW:

GRID
The grid can bring back many lines of data from the database:

grid View


Here's what I need to do:

1. When the 'Checked IN' checkbox is clicked.  I would like the DataTime picker to appear.
checked in Checkbox
2. When the user has selected a date and time, I would like the value to appear in the label next to the Checked in checkbox.
DateTime to show only when it has been selected.

Hope this makes sense?

The only issue is that the GridView creates itself dynamically.
0
 

Author Comment

by:SmashAndGrab
ID: 41739249
Update:

I found a potential solution:

solution?
So using this method of using a class name, I created this..

<asp:TemplateField HeaderText="Checked Out?"><ItemTemplate><asp:CheckBox class="CheckedOut" ID="cbTimeOut" runat="server" AutoPostBack="true" OnCheckedChanged="cbOut_CheckedChanged" />&nbsp;

<asp:Label class="CheckOutLbl" ID="lblTimeOut" runat="server" Text='<%# Eval("TimeOut") %>' /></ItemTemplate></asp:TemplateField>
               

$(function () {
     
//’CheckedOut' is the name of the class on the checkbox control
//’CheckOutLbl’ is the name of the class for the label.


        $('.CheckedOut').on('click', function () {
            $('.CheckOutLbl').datetimepicker('show');
        });


    });


It almost looks like it is going to work but errors when I select the checkbox...

error.JPG
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41740200
Please find the below working code for checkbox click and label text change on date selection!

<h3>DateTime IN</h3>
<input id="cbTimeIn" type="checkbox" value="Checkbox" />
<label id="lblTimeIn">Current Label</label>
<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        
        $('#cbTimeIn').click(function () {
            $('#cbTimeIn').datetimepicker('show');
        });

        $("#cbTimeIn").datepicker({
            onSelect: function (dateText) {
                //display("Selected date: " + dateText + "; input's current value: " + this.value);
				$('#lblTimeIn').text(this.value); //change text value
				//$('#lblTimeIn').val(this.value); //change value //no need
				$('#lblTimeIn').attr('title',this.value); //change tooltip title value
            }
        });

    });
</script>

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41741912
Hi Prakash.

Thank you for this.

The only issue with this is that it does not work within a ASP.NET GridView.
I will keep this code however.

Thanks again.
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41741928
@SmashAndGrab,  Please check with the source code, what is rendered HTML code by GridView!

It might be "ID" of that checkbox differs.

To work for all checkboxes, you can give css class to checkbox and in script give it try with that class; and apply css class to label as well.

like:
<asp:CheckBox class="CheckedOut cbTimeIn" ID="cbTimeOut" runat="server" AutoPostBack="true" OnCheckedChanged="cbOut_CheckedChanged" />

Open in new window


and change in script from '#' to '.' for datepicker
...
        $('.cbTimeIn').click(function () {
            $('.cbTimeIn').datetimepicker('show');
        });
...
   

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41742320
Brilliant!!

Works.

I used this..

 $(document).ready(function () {

        $(".CheckIn").each(function () {
            $(this).datetimepicker({
                dateFormat: 'dd/mm/yy'
        });
    });



<asp:TextBox ID="tbCheckInTime" runat="server" class="CheckIn" OnClick="return Validate(this, this.id);" Text='<%# Eval("TimeIn") %>' AutoPostBack="true" OnTextChanged="cbIn_CheckedChanged" />

Open in new window



Final question with regards to this..

The textbox above has an ONTEXTCHANGED event.

Is there a way to trigger these AFTER the user has selected the 'DONE' button on the datetime picker?

TRIGGER EVENT ON DONE
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41742463
ONTEXTCHANGED event occurs if there is any change in textbox's value!!,

so on done button click, create event handler and put updated datatime into textbox, so it will fire ONTEXTCHANGED event automatically
0
 

Author Comment

by:SmashAndGrab
ID: 41742470
could you help me with the code plesase Prakesh?
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41742541
Can you please provide code to check with it?
0
 

Author Comment

by:SmashAndGrab
ID: 41742591
ok.

no problem.

The reason I need this is because I am validating some fields client side using a javascript.

Once they are validated - I would like the datetime popup to appear.

Does this make sense?


The ‘check IN’ field in the grid..

<asp:TextBox ID="tbCheckInTime" runat="server" class="CheckIn" OnClick="return Validate(this, this.id);" Text='<%# Eval("TimeIn") %>' AutoPostBack="true" OnTextChanged="cbIn_CheckedChanged" />


 It does 2 things when clicked…

1.      Runs your wanky little javascript validation function.
2.      Pops up the date time picker.



<script language="javascript" type="text/javascript">


    $(document).ready(function () {

        $(".CheckIn").each(function () {
            $(this).datetimepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (selectedDateTime) {
                    alert('horse balls');

                }
            });
        });
       



function Validate(obj, objid)
{
    var table = document.getElementById('dgrInserts');
    var par = obj.parentNode;
    while (par.nodeName.toLowerCase() != 'tr')
    {
        par = par.parentNode;
    }

    var ddlCellOne = table.rows[par.rowIndex].cells[1];
    var ddlC = ddlCellOne.childNodes[0];
   
    var indexC = ddlC.selectedIndex;
    var valC = ddlC.options[indexC].value;
   
    var ddlCellThree = table.rows[par.rowIndex].cells[4];
    var ddlT = ddlCellThree.childNodes[0];
   
    var indexT = ddlT.selectedIndex;
    var valT = ddlT.options[indexT].value;
   
    if(valC == '' || valT == '')
    {
        alert('Please enter all fields');
        return false;
    }
    else {

        __doPostBack(objid, '');

    }
}

</script>



Problem is…  It validates and allows the user to select a date which submits the form anyway.

So, options are..

1.      ONLY show the datetime picker after it has run the validation function.

OR

2.      Do the validation when the user selects the “DONE” on the datetime picker.
0
 
LVL 8

Expert Comment

by:Prakash Samariya
ID: 41742618
okay, as I understand you want datetime picker after validation finished! right?
If yes then please check below modification:

//something like
$(".CheckIn").each(function () {
	if(Validate(obj,param)) //your parameter
	{
		$(this).datetimepicker({
			dateFormat: 'dd/mm/yy',
			onSelect: function (selectedDateTime) {
				alert('horse balls');

			}
		});
	}
});

//OR

function Validate(obj, objid)
{
	....
	 if(valC == '' || valT == '')
	{
		alert('Please enter all fields');
		
		//call datepicker
		$('.cbTimeIn').datetimepicker('show');
		
		return false;
	}
	else {

		__doPostBack(objid, '');

	}
	...
}

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41742644
I used your top example...

   $(".CheckIn")
                .each(function () {

                    if (Validate(this, this.id)) //your parameter
                    {

                        $(this)
                            .datetimepicker({
                                dateFormat: 'dd/mm/yy',
                                onSelect: function(selectedDateTime) {
                                    alert('horse balls');
                                    // return Validate(this, this.id);

                                }


                            });
                    }
                });


There is a small issue however.   It seems when I run the page it is automatically triggering this when the page loads and not when the field is clicked?

Its stuck in a loop.
0
 

Author Comment

by:SmashAndGrab
ID: 41742678
I don't know why is it kicking this off on its own when the page loads?
No user input whatsoever.


function.JPG
0
 
LVL 8

Accepted Solution

by:
Prakash Samariya earned 500 total points
ID: 41743729
Hello, you can try as below datepickers event handler "beforeShow" and call validate function in it!
http://api.jqueryui.com/datepicker/#option-beforeShow

something like below:
...
.datetimepicker({
	....
	, beforeShow: function(input, inst) {
		if(!validate(input,input.id))
		{
			$(selector).datepicker('disable');
		}else
		{
			$(selector).datepicker('enable');
		}
	}
....

Open in new window


Please check datepicker documentation for better understanding!
http://api.jqueryui.com/datepicker/#event-beforeShow
1
 

Author Closing Comment

by:SmashAndGrab
ID: 41747376
Brilliant!  thank you.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now