April 28, 2011

Using jQuery DateTime Picker to select date and time

There are so many JavaScript / jQuery plugins available for showing both date and time in one picker. Its is quiet easy rather than you add two images one for date and other for time. JavaScript date time picker is easily available on Here

First of all I am going to tell you how to integrate this into your webpage. Below example would help you to do so.

------------------------
Process Life Cycle :
-----------------------------

Select time according to need then click on specified date then complete DateTime will show in TextBox then save this value to database using SQL database type "DateTime"

-----------------------
Code Integration :
-----------------------

Then i modified code according to need Here's the HMTL code.


  1. Download JavaScript file and add it to Head tag of page (Get javascript file from below website Javascript name: My Date Time Picker | Creator: TengYong Ng  | Website: http://www.rainforestnet.com)
  2. Then add these lines into body tag

<div>


        <asp:TextBox ID="txtDate" runat="server" Width="150px" MaxLength="25"></asp:TextBox>
        <a href="javascript: NewCssCal('ctl00_HomeContent_Wizard1_txtDate','mmmddyyyy','arrow',true,12,false)">
            <img src="../../Images/cal.gif" width="16" height="16" alt="Pick a date"></a>
</div>