• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 363
  • Last Modified:

JQuery Date Time picker not showing

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
SmashAndGrab
Asked:
SmashAndGrab
  • 15
  • 12
  • 2
1 Solution
 
KimputerCommented:
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
 
SmashAndGrabAuthor Commented:
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
 
Prakash SamariyaIT ProfessionalCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
SmashAndGrabAuthor Commented:
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
 
Prakash SamariyaIT ProfessionalCommented:
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
 
KimputerCommented:
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
 
SmashAndGrabAuthor Commented:
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
 
Prakash SamariyaIT ProfessionalCommented:
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
 
SmashAndGrabAuthor Commented:
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
 
Prakash SamariyaIT ProfessionalCommented:
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
 
SmashAndGrabAuthor Commented:
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
 
Prakash SamariyaIT ProfessionalCommented:
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
 
SmashAndGrabAuthor Commented:
Hi Parkesh,  

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

:(
0
 
Prakash SamariyaIT ProfessionalCommented:
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
 
SmashAndGrabAuthor Commented:
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
 
SmashAndGrabAuthor Commented:
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
 
Prakash SamariyaIT ProfessionalCommented:
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
 
SmashAndGrabAuthor Commented:
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
 
Prakash SamariyaIT ProfessionalCommented:
@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
 
SmashAndGrabAuthor Commented:
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
 
Prakash SamariyaIT ProfessionalCommented:
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
 
SmashAndGrabAuthor Commented:
could you help me with the code plesase Prakesh?
0
 
Prakash SamariyaIT ProfessionalCommented:
Can you please provide code to check with it?
0
 
SmashAndGrabAuthor Commented:
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
 
Prakash SamariyaIT ProfessionalCommented:
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
 
SmashAndGrabAuthor Commented:
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
 
SmashAndGrabAuthor Commented:
I don't know why is it kicking this off on its own when the page loads?
No user input whatsoever.


function.JPG
0
 
Prakash SamariyaIT ProfessionalCommented:
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
 
SmashAndGrabAuthor Commented:
Brilliant!  thank you.
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 15
  • 12
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now