Javascript Date Time Picker 2.0 (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:
Create a textbox for user to enter date/time value. Make sure you assign an unique id to your textbox.
Example:
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.

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] , [Display time in calendar (true | false)] , [Time mode (12 | 24)] , [Navigation ('Arrow' | 'DropDown')] , [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 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.0 with sample HTML page.