Javascript Date Time Picker - Get Started (Download)

JavaScript Date Time Picker

Get Started (Download)

1. First of all, Please Download a 12kb compressed file, "sample.zip". Extract the compressed file into your preferred directory.

2. Place "datetimepicker_css.js" file in your web page directory or subdirectory.

datetimepicker_css.js in your web directory

3. From version 2.0 onwards, Javascript Date Time Picker includes couples of small image files which have to be placed under "images" directory. (You may also choose not to use images file, please see "Configuration" section)

4. Make a reference to "datetimepicker_css.js" in your HTML page header. Assume that "datetimepicker_css.js" is in the same directory with your html file.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Javascript Date Time Picker Demo Page</title>
   <script src="datetimepicker_css.js"></script>
</head>
<body>

   <div style="text-align:center; margin:150px auto 100px auto;">
     <label for="demo1">Please enter a date here &gt;&gt; </label>
     <input type="Text" id="demo1" maxlength="25" size="25"/>
     <img src="images/cal.gif" onclick="javascript:NewCssCal('demo1')" style="cursor:pointer"/>
   </div>

</body>
</html>

5. Create a textbox for user to enter date/time value. Make sure you assign an unique element id to your textbox element. In my case, the unique element id is "demo1"

<input type="Text" id="demo1" maxlength="25" size="25"/>

6. Our objective is to make a Calendar appears to assist user to pick a Date whenever user click on a calendar icon. The calendar icon file ("cal.gif") is included in "sample.zip". What you need to do is to add an "onclick" event to call the JavasCript Calendar object.

<img src="images/cal.gif" onclick="javascript:NewCssCal('demo1')" style="cursor:pointer"/>

7. It is that easy. Check out the sample page here. If what you see in the sample page is fine for you, you are done. If not, you may want to find out how to configure JavaScript Date Time Picker. Click here.