Products
Services
Contact Us

Scripts: Javascript :: Forms :: Library Article #16

Developer's Section

Javascript PopUp Date Picker
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (1602)
Favorites:

Learn to install a simple window popup date picker for your forms

The following script creates a reliable popup date picker that can work with your forms on most browsers. (Remember: javascript is not always compatible with all browsers).For this script you are going to need datepicker.js and the 6 images included in the downloads section of this article.

Window Date Picker Example:

Select the ending date

Now Let's take a look at the code:

 Code Snippet 1

<!-- Include datepicker.js version:1.2 -->
<script language="JavaScript" src="datepickerfolder/datepicker.js"
type="text/javascript"></script>
<!-- Create a test form in this case testForm -->
<form name="testForm" method="POST" action="rer.html">

<!-- create the input field -->
<input name="simpledate" type="text" size="15" maxlength="15" />
<!-- create datepicker button -->
<!-- make sure you configure the parameters correctly:-->
<!-- parameter 1: yourFormName.YourDateFieldName -->
<!-- parameter 2: yourFormName.YourDateFieldName.datefieldvalue -->
<!-- parameter 3: date format in this case MM/DD/YYYY -->
<!-- parameter 4: path to the directory where the images are -->
 <a href="javascript:show_calendar('testForm.simpledate', 
  'testForm.simpledate.value', 'MM/DD/YYYY', 
  'imagespath/');"

  onmouseover="window.status='Date Picker';return true;" 

  onmouseout="window.status='';return true;" >

<img id="FromDateCal" src="imagespath/i_RO_Calendar.gif"
 border="0" alt="Select the ending date"></a>
</form>



Downloads
datepicker.js18.7 KB
b_next_month.gif0.3 KB
b_next_year.gif0.5 KB
b_prev_month.gif0.3 KB
b_prev_year.gif0.3 KB
b_sun.gif1 KB
i_RO_Calendar.gif1.1 KB
 

See other Scripts in Forms

 

Submit Your Scripts:

If you would like to have your Javascripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]