stackoom
  简体   繁体   中英

ASP.NET DatePicker not working inside GridView

 原文  2016-10-15 06:58:15  7   4    c#/ jquery/ asp.net/ gridview/ datepicker

Question

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>

4 answers

solution1
 4  2016-10-15 07:53:17

In this the TextBox id 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>

在此输入图像描述 在此输入图像描述

If any query ask me Thanks.

solution2
 1  2016-10-15 07:08:59

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

solution3
 1  2016-10-15 07:13:41

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')

solution4
 1 ACCPTED  2016-10-15 11:37:02

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 with DatePicker

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Asp.net buttons inside control inside gridview not working Boostrap Calender not working inside asp.net gridview? Update Progress not working inside Gridview in Asp.Net Gridview inside Datalist ASP.NET ASP.NET Listbox inside of gridview Checkbox checked inside asp.net GridView Modalpopupextender inside gridview in asp.net Populating a chart inside a GridView in ASP.NET asp.net DropDownList inside GridView Datepicker not working (ASP.NET MVC)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM