javascript datetime picker

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">
        <asp:BoundField DataField="Name" HeaderText="Person" />
        <asp:TemplateField HeaderText="Date Of Birth">
                <asp:TextBox ID="txtDOB" runat="server" ReadOnly="true" class = "Calender" />
                <img src="calender.png" />
<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 () {
            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()"

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"

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

Related Posts Plugin for WordPress, Blogger...