There are three ways to make a datepicker for your website.

 1. Using date as the type of an input
2. Datepicker widget from jQuery UI
3. Listing year, month and day in combo boxes

Lets explain these methods one by one.

Using Date as Type of Input

Lets start with using date as the type of an input. This is the simplest solution in making datepickers. You just use an input and use date as its type:

<input type=”date” name=”” id=”datepicker” />

Using this will enable a drop down calendar datepicker in the text box when the user clicks on it. The calendar looks like the image on the right. 

As you can see, the calendar has several built in functions. However, it is also very bare. It’s just plain white and it’s difficult to customize how it looks.

Datepicker Widget from jQuery UI

This one is better than the previous method. My girlfriend used this in a website for Van-van’s Tours – an online ticketing, reservation and payment system. 
The datepicker widget is made using jQuery. It is compatible with almost all browsers and can be customized to follow your website’s design.
Installation of jQuery Datepicker

The first step is to download the jQuery Datepicker widget. Before downloading, choose the theme that best follows your website colors and design.
Next, extract the contents of the zipped file to the folder of your website. There should now be 3 additional folders – js, development-bundle and css.
After that, copy the following code after the closing title tag.

<link href=”css/ui-lightness/jquery-ui-1.9.2.custom.css” rel=”stylesheet”>
<script src=”js/jquery-1.8.3.js”></script>
<script src=”js/jquery-ui-1.9.2.custom.js”></script>
<script>
$(function() {
$( “#datepicker” ).datepicker();
});
</script>

Finally, create an input and give it an id of datepicker. Just like this:

<input type=”text” id=”datepicker” />


Date Trappings

You can easily trap the dates that the user can use. For example, if you want to limit the date to 1 month and 10 days from now, you just replace the blue code above with this one:

$( “#datepicker” ).datepicker({ minDate: 0, maxDate: “+1M +10D” });

Using Combo Boxes

This is probably the simplest way to let your users pick a date. Facebook uses this.
The method is to use the select tag and having the years as the options. Two more combo boxes must be made for the month and date.
<select id=”year”>
<option>1990</option>
<option>1991</option>
<option>1993</option>
<option>1994</option>
</select>

Conclusion

Now, you already know three methods of making datepickers for your website. These datepickers have their advantages and disadvantages but I know for sure, they will be useful for your project. Have fun and please share. *_~