GridView Markup
To start with I have a simple GridView with 2 columns where the
first column is the name of the person and the second column is a TemplateField
with ReadOnly TextBox to enter select the Date and time of birth of the person.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Person" />
<asp:TemplateField HeaderText="Date Of Birth">
<ItemTemplate>
<asp:TextBox ID="txtDOB" runat="server" ReadOnly="true" class = "Calender" />
<img src="calender.png" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
You will notice I have made the TextBox that accepts the date
and time of birth ReadOnly. I have done so to prevent the users from typing the
text in the TextBox. I have also added class = "Calender" attribute to the TextBox so that I can
select the TextBox for dates using jQuery Selector
Finally there’s a button to Save the Records to the database.
Later in the article I’ll describe how to fetch the dates from the GridView
server side
Applying the DateTimePicker jQuery Plugin
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
<script type = "text/javascript">
$(document).ready(function () {
$(".Calender").dynDateTime({
showsTime: true,
ifFormat: "%Y/%m/%d
%H:%M",
daFormat: "%l;%M %p, %e
%m, %Y",
align: "BR",
electric: false,
singleClick: false,
displayArea: ".siblings('.dtcDisplayArea')",
button: ".next()"
});
});
</script>
You need to place the above script either on the page or the
MasterPage where you want apply the DateTimePicker plugin. This DateTimePicker
will automatically be applied to all TextBoxes who have attribute class = "Calender"
for more detail visit http://www.aspsnippets.com/Articles/DateTimePicker-in-ASP.Net-GridView-using-jQuery-DateTimePicker-Plugin.aspx
C#
protected void btnSave_Click(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
DateTime dob
= DateTime.Parse(Request.Form[row.FindControl("txtDOB").UniqueID]);
//Save the date to Database here
}
}
