Date Time Picker

Date Time Picker 1.9

Here is one free javascript based date time picker out there,

CLICK here to download the sample. 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:
4. Create a textbox for user to enter date/time value. Make sure you assign an unique id to your textbox.

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.


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