Date Time Picker 1.9
Why I wrote my date time picker?
There are so many free javascript based date time picker out there, why do I need to do it on my own?
  1. I've tried fews of them, none of them fullfill 100% of my requirements.
  2. I want something that very simple to use which I need only ONE javascript(.js) file and I can run it with one line of code in my web application.
  3. I need something more flexibile which I can easily change the calendar color, date and time formats.
Instead of spend any more time searching around, I wrote it my own.
Download sample
Click that big download button to download My Date Time Picker 1.9 with sample HTML page. The version 1.9 is enhanced by Bert van der Burg of Netherlands. Thanks Bert!
There are users who request for a datetimepicker that will fire onchange event. Hence, I had also spent a little of my time to create another version that will fire onchange event when user click on any date. Click here to download the sample.
Demo / Showcase
  1. Date (MM-dd-yyyy)
    Pick a date
    HTML code:-
    <input id="demo1" type="text" size="25"><a href="javascript:NewCal('demo1','mmddyyyy')"><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)
    Pick a date
    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)
    Pick a date
    HTML code:-
    <input id="demo3" type="text" size="25"><a href="javascript:NewCal('demo3','ddmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

  4. Date & Time(24-Hour) (yyyy-MMM-dd HH:mm:ss)
    Pick a date
    HTML code:-
    <input id="demo4" type="text" size="25"><a href="javascript:NewCal('demo4','yyyymmmdd',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

  5. If you don't like dropdown list year selector, here is another option.
    Date & Time(24-Hour) (MM-dd-yyyy HH:mm:ss)
    Pick a date
    HTML code:-
    <input id="demo5" type="text" size="25"><a href="javascript:NewCal('demo5','mmddyyyy',true,24,'arrow')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

  6. You are now able to hide seconds(s) in time format
    Date & Time(24-Hour) (MM-dd-yyyy HH:mm)
    Pick a date
    HTML code:-
    <input id="demo6" type="text" size="25"><a href="javascript:NewCal('demo6','mmddyyyy',true,24,'arrow',true)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
  7. Pick a date
    HTML code:-
    <input id="demo7" type="text" size="25"><a href="javascript:NewCal('demo7','mmddyyyy',true,24,'dropdown',true)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

  8. Hide seconds with 12 hour format
    Pick a date
    HTML code:-
    <input id="demo8" type="text" size="25"><a href="javascript:NewCal('demo8','mmddyyyy',true,12,'dropdown',true)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
What are the features?
  1. Supported 6 Date formats and 2 time formats.
  2. Allow users to choose preferred month/year scroller. (Arrow|DropDown)
  3. Allow users to customize if to place preceding zero for date and month.
  4. Allow users to customize color of elements in the calendar easily.
  5. Allow users to set any character as date separator.
  6. Allows users to choose if Monday or Sunday as first day of a week.
  7. Free of charge.
Guide
  1. I would suggest you download the sample above then you'll have the javascript file(DateTimePicker.js) to try on.
  2. Place DateTimePicker.js file in your page directory or subdirectory.
  3. Make a reference to DateTimePicker.js in your HTML page header. Assume that DateTimePicker.js is in the same diretory with your html file.
    Example: <script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
  4. Create a textbox for user to enter date/time value. Make sure you assign an unique id to your textbox.
    Example:<input id="demo4" type="text" size="25">
  5. Create a hyperlink, image with hyperlink or a button to run javascript. In this case I will create a hyperlink with a tiny calendar icon to call my DateTime Picker.
    Pick a date
    <input id="demo4" type="text" size="25"><a href="javascript:NewCal('demo99','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
    Specify appropriate parameters for NewCal function.
    NewCal([textbox id],[date format],[show time in calendar?],[time mode (12,24)?],[Year Scroller Type])
    [Year Scroller Type] can be either 'Arrow' or 'DropDown'. The default Year scroller type will be in Drop Down List form if you don't specify any argument.
    important:
    a. You must enclose textbox id and date format with single quote(').
    b. Don't insert date separator in between of date format such as dd-MM-yyyy.
  6. 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,yyyyMMdd and yyyyMMMdd.
    • 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.
    • Month-Year Scroller Type (optional) ['arrow' or 'dropdown']
    • Hide Seconds? - (optional) [true or false] - Do you want to hide seconds in your "time"? If 'true', seconds will be hidden.
  7. In version 1.7, you are free to set if Monday or Sunday to be the first day of a week. To make Monday as first of a week, make sure the "MondayFirstDay" flag under configurable parameters section of javascript file is set to "true". The default value of "MondayFirstDay" flag is "false" (First day of a week is Sunday).
Supported Date Time format
Date Formats
Date Separator is configurable.
  1. dd/MM/yyyy
  2. dd/MMM/yyyy
  3. MMM/dd/yyyy
  4. MM/dd/yyyy
  5. yyyy/MM/dd
  6. yyyy/MMM/dd
Time Formats
Supports with and without seconds(s) in time for version 1.8 and above.
  1. hh:MM:ss (AM/PM) - 12 Hour Mode
  2. HH:MM:ss - 24 Hour Mode
Customize your own and have fun!
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 MthSelColor="#cc0033";//color of font of Month selector if "MonthSelector" is "arrow".(Added in version 1.1)
var ThemeBg="";//Background image of Calendar window.
var PrecedeZero=true;//Preceding zero of Date or Month. [true|false] (Added in version 1.6)
var MondayFirstDay=false;//true:Use Monday as first day; false:Sunday as first day. [true|false] (Added in version 1.7)
//end Configurable parameters
Sample of customized Calendar
Calendar with sea theme... 		sea theme Calendar
Release History
DateVersionDescriptions
29.Nov.2003 1.0 First Release.
18.Dec.2003 1.1 Allow user to customise month selector. It can be either in "Drop Down List" form or "Arrow" form. Support Mozilla Firebird.
19.Dec.2003 1.5 Modified "Arrow" type Month/Year scroller, supports date format in yyyy/mm/dd or yyyy/mmm/dd.
30.Dec.2003 1.6 Preceding zero added to date and month of dd/MM/yyyy,MM/dd/yyyy or yyy/MM/dd formats. If you like to turn off this feature, please set "PrecedeZero" flag to "false". "PrecedeZero" is one of the configurable parameters in datetimepicker.js file
05.Feb.2004 1.7 Only today's date or existing textbox's date will be highlighted. Users allowed to set to if Monday or Sunday to be first day of a week.
10.Feb.2004 1.7.1 Bug fixed. Monday cell will not be highlighted if Monday is set to be first day of the week
15.Mar.2004 1.7.2 Improvement. Accept single digit hour value. Hour value must be in 2 digits in the previous version.
Bug Fixed. Calendar does not remember AM or PM in the previous version.
15.May.2004 1.7.3 Bug Fixed. The calendar window will be focused even when you invoke Date Time picker subsequently before you close the previous calendar.
9.Aug.2004 1.8 Improvement. Allow users to hide seconds(s) in any time format. Calendar able to parse existing date time even datetimeper is configured without date separator.
10.Aug.2004 1.8.1 Bug fixed. Version 1.8 does not interpret the existing minutes correctly.
12.Aug.2004 1.8.2 Support Opera 7.54
6.Aug.2006 1.8.3 Fine tune width of pop-up window and calendar cell to support Firefox 1.5.0.6
12.Jan.2008 1.9 Enhanced by Bert van der Burg (Netherlands).
Fixed HTML terminating bug. Drop down mode now allows you to drop down both Months and Years. Tested with IE6, IE7 and Firefox 2 and it appears to work without generating W3C or javascript errors.
tested browsers