Make a Beautiful Date Picker from a Textbox using JQuery

Date picker is a good tool, which produce a calendar when you click on the concerned date holder textbox. The calendar picks current date of server. In This tutoial, I am using JQuery library named JQurey UI which can be downloaded from the jquery official website.

http://jqueryui.com

The final product looks like below:

jquery-datepicker-tipsmoon

First of all create a html file using any html editor (I have used Dreamweaver8) and save it with any name like “datepicker.html” .

 

<style>
.form_wrapper {
position:relative;
 top:0px;
 left:0px;
 width:500px;
 height:500px;

}
.label1{
     width:200px;
     height:25px;
     background-color: #DBE1EA;
     display:inline-block;
     border: 1px solid #ddd;
     border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
	position: relative;
	text-align:center;
	font-size:12px;
	color: #666666;
}

.form input{
   border-radius: 4px;
    -webkit-border-radius: 4px;
	 -moz-border-radius: 4px;
	 width:200px;
     height:25px;
     border: 1px solid #ddd;
     outline: none;

-webkit-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
transition: all 0.40s ease-in-out;
-o-transition: all 0.40s ease-in-out;

}

.form input:focus {

 border-color: #0099FF;
 box-shadow: 0 0 15px #0099FF;
 -webkit-box-shadow: 0 0 15px #0099FF;
 -moz-box-shadow: 0 0 15px #0099FF;

}


</style>

 

Now make a new file name “app.js” and add following code in it. This file is necessary to run Jquery. It passes the division tag id to js script. And this file will be linked to “datepicker.html”.

// app.js

$(function() {

$( "#dt1" ).datepicker({ dateFormat: "dd/mm/yy" });
 $( "#dt2" ).datepicker({ dateFormat: "dd/mm/yy" });
   $( "#dt3" ).datepicker({ dateFormat: "dd/mm/yy" });

		   });



 

You have a jquery source file i.e. “jquery-2.0.3.min.js” in the same folder as “datepicker.html”. And you will get two files from jqueryui website . It is “jquery-ui.css” and “jquery-ui.min.js”. these files and “app.js”, all must be the same folder. Now add following code in the datepicker.html file in head section.

<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery-2.0.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="app.js"></script>

Now add a following code in datepicker.html to create a form and its input textbox fields into the body tag for holding date.

<body >

<div >  <h1 style=" margin-left:15%;"> Date Picker Demo </h1> </div>
<div class="form_wrapper">
<form class="form" method="post" name="myform"   >

<div style="position:absolute; left:100px; top:30px;"><label style="width:150px; height:40px;line-height:40px;"  class="label1" >Date</label></div>


<div style="position:absolute; left:100px; top:80px;"> <input style=" text-align:center; font-size:20px; font-weight:bold; height:50px; width:150px;" type="text"    name="dt1" id="dt1"  /></div>


<div style="position:absolute; left:100px; top:150px;"> <input style=" text-align:center; font-size:20px; font-weight:bold; height:50px; width:150px;" type="text"    name="dt2" id="dt2" /></div>


<div style="position:absolute; left:100px; top:220px;"> <input style=" text-align:center; font-size:20px; font-weight:bold; height:50px; width:150px;" type="text"   name="dt3" id="dt3" /></div>


</form>

</div>
</body>

The complete code for datepicker.html will be look like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Datepicker Demo-Hosttuner</title>
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery-2.0.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="app.js"></script>


<style>
.form_wrapper {
position:relative;
 top:0px;
 left:0px;
 width:500px;
 height:500px;

}
.label1{
     width:200px;
     height:25px;
     background-color: #DBE1EA;
     display:inline-block;
     border: 1px solid #ddd;
     border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
	position: relative;
	text-align:center;
	font-size:12px;
	color: #666666;
}

.form input{
   border-radius: 4px;
    -webkit-border-radius: 4px;
	 -moz-border-radius: 4px;
	 width:200px;
     height:25px;
     border: 1px solid #ddd;
     outline: none;

-webkit-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
transition: all 0.40s ease-in-out;
-o-transition: all 0.40s ease-in-out;

}

.form input:focus {

 border-color: #0099FF;
 box-shadow: 0 0 15px #0099FF;
 -webkit-box-shadow: 0 0 15px #0099FF;
 -moz-box-shadow: 0 0 15px #0099FF;

}


</style>

</head>

<body >

<div >  <h1 style=" margin-left:15%;"> Date Picker Demo </h1> </div>
<div class="form_wrapper">
<form class="form" method="post" name="myform"   >

<div style="position:absolute; left:100px; top:30px;"><label style="width:150px; height:40px;line-height:40px;"  class="label1" >Date</label></div>


<div style="position:absolute; left:100px; top:80px;"> <input style=" text-align:center; font-size:20px; font-weight:bold; height:50px; width:150px;" type="text"    name="dt1" id="dt1"  /></div>


<div style="position:absolute; left:100px; top:150px;"> <input style=" text-align:center; font-size:20px; font-weight:bold; height:50px; width:150px;" type="text"    name="dt2" id="dt2" /></div>


<div style="position:absolute; left:100px; top:220px;"> <input style=" text-align:center; font-size:20px; font-weight:bold; height:50px; width:150px;" type="text"   name="dt3" id="dt3" /></div>


</form>

</div>
</body>
</html>

Finally we have date picker in html using jQuery and ready to run. when you click in textbox filed a calendar will appear and you can select a date and it will appear your desired format as you have given in the app.js file. If you have any question about the tutorial you can ask in comments section.

 

Leave a Reply

Your email address will not be published. Required fields are marked *