Jquery Datepicker is not working for a Textbox which is present inside another controls in asp.net

Question

3.67/5 (3 votes)

See more:

Hi,

In my project i am using Jquery Datepicker to select date from textbox, code is as follows:

XML

<head runat="server">
    <title>Untitled Page</title>
    <link href="Css/ui.css" rel="stylesheet" type="text/css" />

<script src="Jquery/jquery-1.6.2.min.js" type="text/javascript"></script>

<script src="Jquery/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script>
  $(document).ready(function() {
    $("#txtDate").datepicker();
  });
</script>

here "txtDate" is a Textbox which is present in Div element, for this Jquery is working well.

I am used the same Jquery & Css for another Textbox control which is present inside FooterTemplat of Gridview control, here i am not geting datepicker, not only here the Textbox which is present inside ContentPlaceHolder element also.

Please any body can explain me what my be resion and how to over come from this.

Thanks in Advance
Uday

Posted 13-Sep-11 2:52am

udaysimha

Updated 1-May-13 2:03am

Kenneth Haugland

v3

Add a Solution

3 solutions

Solution 3

XML

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>




    &lt;script src="Jquery_Date_Picker/jquery-ui.js" type="text/javascript">&lt;/script>

    &lt;script src="Jquery_Date_Picker/jquery-1.9.1.js" type="text/javascript">&lt;/script>


    &lt;title>Ajax Calendar Control&lt;/title>

    &lt;script type="text/javascript">
    function CheckDateEalier(sender,args) {
        if (sender._selectedDate < new Date()) {
             alert("You cannot select a day before today!");
             sender._selectedDate = new Date();
             // set the date back to the today
            sender._textbox.set_Value(sender._selectedDate.format(sender._format))
         }
     }
     function DisplayDateToday(sender, args) {
         if (sender._selectedDate == null) {
             sender._selectedDate = new Date();
         }
     }
    &lt;/script>





<asp:TextBox ID="txtDate" runat="server">
                    </asp:TextBox>
                &lt;/label>
                 <ajaxtoolkit:calendarextender runat="server" ID="calExtender1"
                                        TargetControlID="txtDate"/>
                                        <asp:ScriptManager ID="ScriptManager1" runat="server">
                    </asp:ScriptManager>
                <br />

Posted 13-Sep-13 0:40am

Anand sutar

Solution 2

XML

<link href="Styles/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="Scripts/datepicker.js" type="text/javascript"></script>
    <script src="Scripts/widgets.js" type="text/javascript"></script>
    <script src="Scripts/core.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[id$=txtDatepicker]").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>

 asp:textbox
<asp:TextBox  ID="txtDatepicker" runat="server" Text="mm/dd/yyyy"></asp:TextBox>

Posted 1-May-13 1:32am

Madhulika Satalkar

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sunasara Imdadhusen · Accepted Answer · 2011-09-13T03:18:00

Solution 1

Please use following

JavaScript

$(document).ready(function() {
    var textbox = '<%=txtDate.ClientID%>';
    $('#' + textbox ).datepicker();
  });

Please do let me know if you required more help for same.

Posted 13-Sep-11 3:18am

Sunasara Imdadhusen

Comments

Ali Al Omairi(Abu AlHassan) 13-Sep-11 10:36am

Good Answer, My friend ... Good Answer;

Member 10014770 15-Mar-14 0:10am

nice answer

Sunasara Imdadhusen 13-Sep-11 22:20pm

thank dear friend

udaysimha 16-Sep-11 4:51am

Hai Sunasara Imdadhuse, Thanks for your reply, but it showing an errror

"The name 'txtSFDate' does not exist in the current context"

Actually txtSFDate is avilable in current cotext.

see the code below for javascript:
<script>

$(document).ready(function() {
var textbox='<%= txtSFDate.ClientID %>';
$('#' + textbox).datepicker();
});
</script>

see code below for design:

<asp:TemplateField ItemStyle-HorizontalAlign="Center">

<HeaderTemplate >

Date</HeaderTemplate> <itemtemplate>

<%#Eval("SFInformationDate")%>

<edititemtemplate>

<asp:TextBox ID ="txtDate" runat ="server" Text ='<%#Eval("SFInformationDate")%>' >

<footertemplate>

<asp:TextBox ID="txtSFDate" runat="server">

Mastersev 6-Mar-12 2:47am

Thank you for the answer

brijesh vaidya 9-Jul-12 5:44am

thank you . it is saved a lot of time..
how to enable only specific dates in datepicker

whitemouse2100 14-Mar-13 23:27pm

Thank you for the answer