Lunarpages.com Web Hosting Lunarpages.com Web Hosting

How to implement date of birth picker in a web form

Web form is a web element which can accept data from a visitor of the website and send it to database. Some fields of a form are compulsory to type by a visitor, but some of them like date of birth or current date fields can be provided with a date picker calendar. We will get the information in the same way as all other visitors. That is why we can generate reports of our visitors easily by having uniform data.

I will explain how to implement a simple html form by using external java script and css files. We should write three types of files to demonstrate or implement this kind of form.

  1. Html or PHP file which holds a actual form
  2. Java script file which will give effect of displaying calendar when user places cursor in text field to enter his / her date of birth
  3. The CSS file which will give colorful effect to the calendar which displays as 2nd step
  4. All three files should be uploaded web server
  5. Give link to java script file and css file in the head section of html file. Then only html file can use these two files to get the required effect of displaying calendar when user clicks the text field.

I am writing code for html form, please copy this code and save as date.htm

<html>

<head>

<link rel=”stylesheet” href=”calendar.css”>

<script src=”calendar.js”></script>

<title>Untitled Document</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

</head>

<body>

<input>

<script>

calendar.set(“date”);

</script>

</body>

</html>

calendar.js and calendar.css files can be downloaded from my blog. Please ask me if you require. I will send you the link. Ask me any doubts regarding implementation of this type of form. I will try to explain oven online.

Demonstration of the date picker can be see from this url http://www.punarvasi.com/date.htm

Thanks

Raj

Tags: , ,

2 Responses to "How to implement date of birth picker in a web form"

Leave a Comment