How To Create Date Time Picker In Html

Home / Free JavaScripts / Clocks, Calendars, And Timers / Here

Cut & Paste Date Time Picker

Description: Date Time Picker allows your visitors to easily input a date/time into a form field, by selecting it from a popup window. Supports output dates in various formats such as: dd/MM/yyyy, dd/MMM/yyyy, MM/dd/yyyy etc. An extremely versatile script.

Example:

1) Date (MM-dd-yyyy)

HTML code: <input id="demo1" type="text" size="25"><a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

2) Date & Time(12-Hour) (dd-MMM-yyyy hh:mm:ss)

HTML code: <input id="demo2" type="text" size="25"><a href="javascript:NewCal('demo2','ddmmmyyyy',true,12)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

3) Date & Time(24-Hour) (dd-MM-yyyy HH:mm:ss)

HTML code: <input id="demo3" type="text" size="25"><a href="javascript:NewCal('demo3','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

Directions

1. Download the following zip file, which contains the necessary files plus a demo.

2. Upload "DateTimePicker.js" and "cal.gif" contained within the above zip file to your web site.

3. In the <head> section of your webpage that will display the Date Picker, insert the below code:

//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com

</script>

4. Create the desired textboxes that will use the Date Time Picker. A sample textbox looks like:

As seen above, enter a unique ID into each <input> tag (in this case, "demo1"), and inside function "NewCal()", pass this ID as its first parameter. Below describes NewCal() in detail:

NewCal([textbox id],[date format],[show time in calendar?],[time mode (12,24)?])

a. You must enclose textbox id and date format with single quotes (').
b. Don't insert date separator in between of date format such as dd-MM-yyyy.
c. Parameters for "NewCal" function:

Textbox id (Mandatory)
Date format (optional) - If you don't specify date format, the default date format will be "dd-MM-yyyy". Other valid date formats for My Date Time Picker are: ddMMyyyy,MMddyyyy,ddMMMyyyy,MMMddyyyy.
Show time in calendar? (optional) [true or false] - Specify "true" if you would like to let user to pick a time. Default value is "false".
Time Mode (optional) [12 or 24] - Time shown in 12-hour or 24-hour format. Default is 24-hour format.

Customization

If you have little bit of javascript and html knowledge. You will be able to customize the calendar look by yourself.
The first step is to open DateTimePicker.js file itself and you'll find "configurable parameters" section at the header.

//Configurable parameters
var cnTop="200";//top coordinate of calendar window.
var cnLeft="500";//left coordinate of calendar window.
var WindowTitle ="DateTime Picker";//Date Time Picker title.
var WeekChar=2;//number of characters shown for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
var TimeMode=24;//default TimeMode value. 12 or 24

var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
var ShowMonthYear=true;//Show Month and Year in Calendar header.
var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
var WeekHeadColor="#0099CC";//Background Color in Week header.
var SundayColor="#6699FF";//Background color of Sunday.
var SaturdayColor="#CCCCFF";//Background color of Saturday.
var WeekDayColor="white";//Background color of weekdays.
var FontColor="blue";//color of font in Calendar day cell.
var TodayColor="#FFFF33";//Background color of today.
var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.
var YrSelColor="#cc0033";//color of font of Year selector.
var ThemeBg="";//Background image of Calendar window.
//end Configurable parameters