hi..
Look at thi example...
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"
Screenshot
That’s all you need to do to apply the DateTimePicker jQuery plugin in ASP.Net GridView control.
Fetching the Dates Server Side
Below is how you can fetch the dates that the user has submitted by looping through the rows of the GridView Control
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
}
}