Menu
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>
676
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>
If any query ask me Thanks.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
