Description: Date Time Picker allows your visitors to easily input a date/time into a form field, by selecting it from a popup window. Supports output dates in various formats such as: dd/MM/yyyy, dd/MMM/yyyy, MM/dd/yyyy etc. An extremely versatile script.
Example:
1) Date (MM-dd-yyyy) 
HTML code: <input id="demo1" type="text" size="25"><a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
2) Date & Time(12-Hour) (dd-MMM-yyyy hh:mm:ss)
HTML code: <input id="demo2" type="text" size="25"><a href="javascript:NewCal('demo2','ddmmmyyyy',true,12)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
3) Date & Time(24-Hour) (dd-MM-yyyy HH:mm:ss)
HTML code: <input id="demo3" type="text" size="25"><a href="javascript:NewCal('demo3','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
Directions1. Download the following zip file, which contains the necessary files plus a demo. 2. Upload "DateTimePicker.js" and "cal.gif" contained within the above zip file to your web site.
3. In the <head> section of your webpage that will display the Date Picker, insert the below code:
<script language="javascript" type="text/javascript" src="datetimepicker.js">
//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com
</script>
4. Create the desired textboxes that will use the Date Time Picker. A sample textbox looks like://Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com
</script>
<input id="demo1" type="text" size="25"><a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
As seen above, enter a unique ID into each <input> tag (in this case, "demo1"), and inside function "NewCal()", pass this ID as its first parameter. Below describes NewCal() in detail:NewCal([textbox id],[date format],[show time in calendar?],[time mode (12,24)?]) a. You must enclose textbox id and date format with single quotes (').
b. Don't insert date separator in between of date format such as dd-MM-yyyy.
c. 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.
- 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.
The first step is to open DateTimePicker.js file itself and you'll find "configurable parameters" section at the header.
//Configurable parameters
var cnTop="200";//top coordinate of calendar window.
var cnLeft="500";//left coordinate of calendar window.
var WindowTitle ="DateTime Picker";//Date Time Picker title.
var WeekChar=2;//number of characters shown for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
var TimeMode=24;//default TimeMode value. 12 or 24
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 ThemeBg="";//Background image of Calendar window.
//end Configurable parameters
var cnTop="200";//top coordinate of calendar window.
var cnLeft="500";//left coordinate of calendar window.
var WindowTitle ="DateTime Picker";//Date Time Picker title.
var WeekChar=2;//number of characters shown for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
var TimeMode=24;//default TimeMode value. 12 or 24
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 ThemeBg="";//Background image of Calendar window.
//end Configurable parameters
0 comments:
Post a Comment