Javascript Date Time Picker - File Level

JavaScript Date Time Picker

File Level

Instance Level configuration allows you choose how you want it every time you call "NewCssCal" function. On the other hand, file level configuration applies to all "NewCssCal" instances in a web page.

File Level parameters are hidden in the JavaScript file, open the JavaScript file "datetimepicker_css.js" with your preferred text editor.

You will be able to find a block of variables in the first one hundred lines of code started with "Configurable parameters - start" and ended with "Configurable parameters - end".

A set of configurable parameters

What circled in purple are parameters that you can customize to suit your own needs. The first half are color parameters that you can set and the other half are non-color parameters that you can play around with.

What appeared in the picture may not be what you have downloaded. As the program evolves, parameters might be added or removed, the picture above is only for illustration purpose.

//Configurable parameters - start
var SpanBorderColor = "#000000";//Calendar border color
var MonthYearColor = "#cc0033"; //Font Color of Month and Year in Calendar header.
var WeekHeadColor = "#18861B"; //Background Color in Week header
var SundayColor = "#C0F64F"; //Background color of Sunday
var SaturdayColor = "#C0F64F"; //Background color of Saturday
var WeekDayColor = "#FFEDA6"; //Background color of weekdays
var TodayColor = "#ffbd35"; //Background color of today
var SelDateColor = "#8DD53C"; //Backgrond color of selected date in textbox
var YrSelColor = "#cc0033"; //color of font of Month-Year selector.Applies only for Arrow navigation
var HoverColor = "#E0FF38"; //color of cell background when mouse move over
var DisableColor = "#999966"; //color of disabled cell
var CalBgColor = "#FFFFFF"; //Background color of Calendar window not cell

var StartYear = 1940; //First selectable year
var EndYear = 5; //The offset last year of pickable date.If current year is 2011, the last year that still picker will be 2016 (2011+5)
var WeekChar = 2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed
var DateSeparator = "-";//Date Separator, you can change it to "/" as you wish
var ShowLongMonth = true;//Show long month name in Calendar header. example: "January"
var ShowMonthYear = true;//Show Month and Year in Calendar header.Not applicable for Arrow navigation
var PrecedeZero = true;//Preceding zero in date format
var MondayFirstDay = true;//true:Use Monday as first day; false:Sunday as first day. [true|false]
var UseImageFiles = true;//Use image files with "arrows" and "close" button
var imageFilesPath = "images/";//Path of date time picker image files relative to HTML page
//Configurable parameters - end

Besides customizing the appearance of the calendar, language of the calendar is also not hard coded. You can change the Month and Week name to your preferred language.

You may just locate the global array variable "MonthName", "WeekDayName1" and "WeekDayName2" and replace it in your own language.

//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"];

I tried as much as I can to explain the purpose of the parameter by tailing a comment on each of the variable. If you still do not understand or you happen to detect a bug, please email us.