Completing a Simple Date Picker with JavaScript and CSS - Adding the datestring
(Page 3 of 4 )
Finally, we need to put datestring into the text field in the form. This is really simple; all we need is the following line of code:
document.getElementById("datebox").value = datestring;
You'll need to add an ID attribute to the text field in the HTML file, but that's pretty much it. To finish things off, you can call a function that closes the datepicker once the text field has received the date string:
hidePicker();
Creating the function that closes the calendar div is just as easy as it was to create the function that shows it, all that needs to be changed is the style to impose:
function hidePicker() {
document.getElementById("picker").style.display = "none";
}
You might want to add some additional styling to the text field holding the date string at this point; maybe shortening it and centering the text within it. You could also add some default text to the text field in the form by adding a value attribute of "DD/MM/YYYY." Also, after writing all of the code for the datepicker, we don't really want visitors just typing their date into the text field. To prevent the visitor from up updating the text box manually, you can add the disabled="disabled" attribute. One final attribute you can add to the text input is a title to tell the visitor to use the calendar icon. Something along the lines of; title="Click the calendar to open a datepicker" should suffice.
Next: Finishing up >>
More JavaScript Articles
More By Dan Wellman
