CODEWITHSUNDEEP
c#jqueryasp.netgridviewdatepicker
Mano Prathibhan C
Mano Prathibhan C

Reputation: 518

ASP.NET DatePicker not working inside GridView

I have a database table with person information that also has their Date of Birth. I'm using GridView to display the fields and also using Column edit and delete options. To edit date im using DatePicker as follows,

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home Page</title>
<link rel='stylesheet' type='text/css' href='Styles/Main.css'/>
<script type="text/javascript" src="Scripts/jquery-1.12.4.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#text_date').datepicker({
            dateFormat: 'dd-mm-yy',
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            changeYear: true,
            constrainInput: true,
            firstDay: 1,
            navigationAsDateFormat: true,
            showAnim: "fold",
            yearRange: "c-100:c+10",
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        });
    });
    $(document).ready(function () {
        $('#text_dateadd').datepicker({
            dateFormat: 'dd-mm-yy',
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            changeYear: true,
            constrainInput: true,
            firstDay: 1,
            navigationAsDateFormat: true,
            showAnim: "fold",
            yearRange: "c-100:c+10",
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        });
    });
</script>
</head>

Inside GridView within the Columns i have the following. Im using the footer area to insert new data into the GridView

<asp:TemplateField HeaderText="Date of Birth" SortExpression="DOB">
<EditItemTemplate>
    <asp:TextBox ID="text_date" CssClass="textbox" MaxLength="10" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:TextBox>    
</EditItemTemplate>
<ItemTemplate>
    <asp:Label ID="label_date" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
    <asp:TextBox ID="text_dateadd" CssClass="textbox" MaxLength="10" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>

But this is not working, I tried clicking on the text fields both within the EditItemTemplate and ItemTemplate but the calendar wont display. I tried it on a simple web page as below and it works,

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="text_date" CssClass="textbox" MaxLength="10" runat="server"></asp:TextBox>
    </div>
</form>

Within a normal div in a form the date picker works but in the above GridView it wont work.. am i doing something wrong? is it because of the Bind method? If so how can i solve that? I tried using div inside GridView also but it wont work.

EDIT

The below is the place where i placed my gridview. Im using my grid view within a cell of a table and i also have script manager and update panels

<asp:TableCell ColumnSpan="6" Width="100%" Height="100%" VerticalAlign="Middle" HorizontalAlign="Center">
    <asp:UpdatePanel ID="update_data" runat="server">
        <ContentTemplate>
            <asp:GridView></asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
<asp:/TableCell>

Upvotes: 4

Views: 5527

Answers (4)

Mano Prathibhan C
Mano Prathibhan C

Reputation: 518

SOLUTION

Finally got a solution.

The problem was not with the GridView, it was actually because of using AutoPostBack and UpdatePanel. It seems ASP.NET Ajax and JQuery cannot be used together normally. So there was a different solution for that as provided in this link Conflicts between ASP.NET UpdatePanel and JQuery

Three methods were provided there and for my application method 2 works fine where we have to add a function pageLoad() as below,

<script type="text/javascript">
    function pageLoad() {
        $(document).ready(function () {
            $('#text_date').datepicker({
                dateFormat: 'dd-mm-yy',
                inline: true,
                showOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                constrainInput: true,
                firstDay: 1,
                navigationAsDateFormat: true,
                showAnim: "fold",
                yearRange: "c-100:c+10",
                dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
            });
        });
    }
</script>

This works fine for all TextBox that have post backs and updates combined withDatePicker

Upvotes: 2

aditya srivastava
aditya srivastava

Reputation: 723

In this the TextBoxid will note work because GridView will change the id and add it on specific id with it actual TextBox Id So try this it will work 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home Page</title>
<link rel='stylesheet' type='text/css' href='Styles/Main.css'/>
<script type="text/javascript" src="Scripts/jquery-1.12.4.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.Add-text').datepicker({
            dateFormat: 'dd-mm-yy',
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            changeYear: true,
            constrainInput: true,
            firstDay: 1,
            navigationAsDateFormat: true,
            showAnim: "fold",
            yearRange: "c-100:c+10",
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        });
    });
    $(document).ready(function () {
        $('.Add-text-new').datepicker({
            dateFormat: 'dd-mm-yy',
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            changeYear: true,
            constrainInput: true,
            firstDay: 1,
            navigationAsDateFormat: true,
            showAnim: "fold",
            yearRange: "c-100:c+10",
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        });
    });
</script>
</head>

Inside GridView within the Columns i have just added new class to identify and jquery or javascript will now easily identify it.

<asp:TemplateField HeaderText="Date of Birth" SortExpression="DOB">
<EditItemTemplate>
    <asp:TextBox ID="text_date" CssClass="textbox Add-text" MaxLength="10" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:TextBox>    
</EditItemTemplate>
<ItemTemplate>
    <asp:Label ID="label_date" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
    <asp:TextBox ID="text_dateadd" CssClass="textbox Add-text-new" MaxLength="10" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>

enter image description here enter image description here

If any query ask me Thanks.

Upvotes: 7

Nitin Bourai
Nitin Bourai

Reputation: 458

Add a class on the Fields in asp.net as the ID will be dynamically created and will be changed in HTML. in place of $('#text_dateadd') use $('.dateadd')

Upvotes: 2

Manish Singh
Manish Singh

Reputation: 1004

Please check id of textbox because in gridview id has changed. check it view source.

Upvotes: 1

Related Questions