Javascript Date Time Picker - Instance Level

JavaScript Date Time Picker

Instance Level

From "Get Started" page, we knew that we just need to call JavaScript function "NewCssCal('demo1')" to invoke the Calendar and you can subsequently pick a date to fill the input textbox.

"demo1" being the input textbox element id.

<input type="Text" id="demo1" maxlength="25" size="25"/>
<img src="images/cal.gif" onclick="javascript:NewCssCal('demo1')" style="cursor:pointer"/>

The main JavaScript function "NewCssCal" has more than one argument.

NewCssCal(
[Textbox element ID] ,
[Date format] ,
[Navigation pattern] ,
[Display time in calendar] ,
[Time mode] ,
[Show Seconds] ,
[Enable future date or past date]
)

Remember! The ONLY Mandatory argument is "Text element ID". The rest of arguments will fallback to default value if unspecified.

Arguments Default Possible values
[Textbox element ID]
[Date Format] MMddyyyy 'ddMMyyyy' or 'ddMMMyyyy' or 'MMddyyyy' or 'MMMddyyyy' or 'yyyyMMdd' or 'yyyyMMMdd'
[Navigation pattern]* 'dropdown' 'dropdown' or 'arrow'
[Display time in calendar] false true or false
[Time mode] 24 12 or 24
[Show Seconds] false true of false
[Enable future date or past date only] all dates are enabled 'future' or 'past'

* The arguments set of "NewCssCal" are pretty much self-explanatory except "Navigation pattern". JavaScript Date Time Picker is providing two options for user to choose "Month" and "Year" in the Calendar.

Arrow Type Month-Year Navigation

If you what you expecting from your user is smaller range of date between months or one or two years. You can recommended to use arrow type navigation as it is more intuitive.

Typical application : Hotel reservation, Appointment making.

Arrow type date time picker Arrow type date picker

Drop Down Month-Year Navigation

Drop down navigation allows user to "hyper" jump between years. You can go back to the calendar of 10 years ago with just two clicks, you can't do that with arrow type navigation.

Typical application: Birth Date.

Dropdown type date time picker Dropdown type date picker