[Home] [Javascript Date Time Picker] [Crystal Reports Exporter] [News Scroller] [Discussion] [Write to me]

Javascript Date Time Picker 2.1 (CSS Version)

A new start

Year 2009 is a new start for my little Javascript Date Time Picker, it has been around since November of 2003.

Well, it has been free since then too. Let me again make it very clear here, This piece of Javascript code is completely free! I don't care if you are using it for personal or even commercial. The ONLY condition which you have to fulfill is the header part of this javascript remain as it is.

So, what's so new about this Javascript Date Time Picker?

The Calender is no longer in Pop Up window. It is now fully in CSS form. That is something that I wanted to do quite some time but I did has the time to do it. This great improvement was contributed by Yvan Lavoie of Québec, Canada. Thanks Yvan!

Please see more examples in the Demo Page

Tailor the Calendar to your needs

If you need my assistance to tailor the calendar to your needs at a cost, feel free to write to me.

Some features highlights

Fully CSS - Kiss Popup Window Goodbye!
Rich Date and Time Format - Supported 6 Date formats and 2 time formats.
Two Navigation Styles - Allow users to choose preferred month/year scroller. (Arrow|DropDown)
Preceding Zero - Allow users to customize if to place preceding zero for date and month.
Colour your calendar - Allow users to customize color of elements in the calendar easily.
Date Separator - Allow users to set any character as Date Separator.
Sunday or Monday First - Allows users to choose if Monday or Sunday as first day of a week.
Multilingual - Allow users to configure Calendar in different languages.

How to use ?

I would suggest you download the sample below, you'll then have the javascript file(datetimepicker_css.js) to try on.
Place "DateTimePicker_css.js" file in your page directory or subdirectory.
From version 2.0 onward, Javascript Date Time Picker include some small images files which has to be placed under "images" directory. (You may also choose not to use images file, please see "Customize your own and have fun" section)
Make a reference to DateTimePicker_Css.js in your HTML page header. Assume that DateTimePicker_Css.js is in the same diretory with your html file.
Example:
<script type="text/javascript" src="datetimepicker_css.js"></script>
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">
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.

<input id="demo1" type="text" size="25">
<a href="javascript:NewCssCal('demo1')">
<img src="images/cal.gif" width="16" height="16" alt="Pick a date"></a>

Parameters that you can use

There are couple of parameters that you can use to make your date picker / date time picker according to your needs.

The One and Only Mandatory parameter is "Textbox Unique ID"

NewCssCal([Textbox Unique ID] , [Date format] , [Navigation ('Arrow' | 'DropDown')] , [Display time in calendar (true | false)] , [Time mode(12 | 24)] , [Hide Seconds (true | false)] ])

Optional parameters and their default value

Parameters	Default Value	Possible value
[Date Format]	MMddyyyy	ddMMyyyy, ddMMMyyyy, MMddyyyy, MMMddyyyy, yyyyMMdd, yyyyMMMdd
[Navigation]	'DropDown'	'DropDown' or 'Arrow'
[Display time in calendar]	false	true or false
[Time mode]	24	12 or 24
[Hide Seconds]	false	true of false

Please see more examples in the Demo Page

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 SpanBorderColor = "#cdcdcd";//span border color
var SpanBgColor = "#cdcdcd";//span background color
var WeekChar=2;//number of characters shown for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
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 HoverColor="#E0FF38"; //color when mouse move over.
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)
var UseImageFiles = true;//Use image files with "arrows" and "close" button
//use the Month and Weekday in your preferred language.
var MonthName=["January", "February", "March", "April", "May", "June","July","August", "September", "October", "November", "December"];
var WeekDayName1=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var WeekDayName2=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
//end Configurable parameters

Download sample

Click that big download button to download Javascript Date Time Picker 2.1 with sample HTML page.

You are allowed to use this Javascript freely even for commercial. You don't need to pay me a single cent to use it but I would be very glad that you'll tell me about it.

There is only one condition when you use it. You mustn't change the header of the Javascript reads as follows:-

//Javascript name: My Date Time Picker
//Date created: 16-Nov-2003 23:19
//Creator: TengYong Ng
//Website: http://www.rainforestnet.com
//Copyright (c) 2003 TengYong Ng
//FileName: DateTimePicker_css.js
//Version: 2.1.1
//Note: Permission given to use and modify this script in ANY kind of applications
//if header lines are left unchanged.
//New Css style version added by Yvan Lavoie (Québec, Canada) 29-Jan-2009

Permission is granted to redistribute and modify this software under the terms of the GNU General Public License 3.0.

Release History

Date	Version	Descriptions
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
22.Mar.2009	2.0.0	Calendar in CSS, no longer in popup window.
18.Apr.2009	2.0.1	It now works in IE8
18.Jul.2009	2.0.2	Somehow it failed to work in IE8 at certain point of time, anyway, it works again. Thanks Olivier.
27.Oct.2009	2.0.3	Bug Fixed. Thanks Dom De Felice 1. When the text box displaying your date/time is disabled the calendar won't disappear (at least in Internet Explorer 8.0). 2. When changing the hour/minute and clicking on the "x": the date/time text box doesn't update. (This feature has been removed in 2.1 due to certain issue)
15.Nov.2009	2.1.0	Bug Fixed. Thanks Oliver Spata 1. CSS fixes (like using 'width' without 'px') 2. The table cells for the days now have a mouseover effect, and the arrow buttons of the time input fields now behave like Spinners from Java, meaning you can keep the mouse pressed instead of having to click repeatedly. Oliver also fixed the dragging which was not working with Internet Explorer, However, still not perfected in IE8.
16.Nov.2009	2.1.1	The problem with version 2.1.0 was the date time picker will fill a value when you hit the close button without selecting any date. So, I've got to change it back in the way when nothing is to be filled in the text field when no date is click. You can now configure Start Year and End Year with parameters at the header.