A JavaScript date picker

When developing a web form where you want the user to type in a date, you will have to validate the input so that it is on a form that fits the system needs. This will require the user to understand which format to use and it will require the system to validate properly and to give feedback if the format was wrong. This is not a very good solution and it does not look that good either. A neat solution is to use a date picker instead. This way the user can't make a mistake and it will be very easy to use.

I found this solution made by Julian Robichaux, the host of nsftools.com. He is a very talented developer and if you browse his site you will find lots of good free stuff to use. His date picker came in handy to use for me and I will explain how it works and how to install it here.

We have a text field in which we want to put a date chosen by the user and it has to be on a specific format. First we set the text field to be disabled so that you can not add any text to it. By pressing the button "Select date" a date dialog opens from which the user can choose a date. When clicking on the date it is pasted on a specific predefined form into the text field. This is done by using a JavaScript function which allows for different formats, which can be read more about in the JavaScript comments. Go ahead and try, click the button below!



Add this css-file and this JavaScript-file to the head section of your web page.
After that all you need is this little piece of code and you're on:

<input name="theDate" id="publishDate" disabled="disabled"> <input value="Select date" onclick="displayDatePicker('theDate', false, 'ymd', '-');" type="button">

See more information about the datepicker on nsftools.com.