While creating form , we mostly require date field and if it is dynamic it gets more easy to select date. By using jQuery date format in forms, we will be able to change the format of the date by selecting any one from the given formats.

This blog posts will show you how to add date picker along with multiple formats. All this can be possible just by including jQuery UI to your HTML form as follows:

<!------------ Including  jQuery Date UI with CSS -------------->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js">
</script>

In our example, when user focus on input field by clicking on it or using tab key,   below jQuery code popups calender for choosing date, another field in our form allows user to select desired date format.

$(function(){
$( "#datepicker" ).datepicker();
//Pass the user selected date format
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $(this).val() );
});
});

Just watch our live demo or go through our codes and download it to use to make it work.

For more learning, our complete HTML and jQuery code is given below:

HTML File: cal.html

Given below our HTML codes to create simple form with Date input and select format fields.

<!doctype html>
<html>
<head>
<title>jQuery Datepicker UI Example - Demo Preview</title>
<meta name="robots" content="noindex, nofollow"/>
<!------------ Including jQuery Date UI with CSS -------------->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<!-- jQuery Code executes on Date Format option ----->
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h2>jQuery Datepicker UI Example Form</h2>
<div class="main">
<form action="" method="post">
<label>Name :</label>
<input type="text" name="sname" id="Name"/>
<label>Date Of Birth :</label>
<input type="text" name="selected_date" id="datepicker"/>
<label>Select Date Format :</label>
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yyyy</option>
<option value="dd/mm/yy">dd/mm/yyyy</option>
<option value="yy-mm-dd">ISO 8601 - yyyy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yyyy</option>
<option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - 'day' d 'of' MM 'in the year' yyyy</option>
</select>
<input type="submit" id="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>

jQuery File: script.js

This file contains jQuery functions to  popup calender on focus of date input field.

$(document).ready(function() {
// Datepicker Popups calender to Choose date.
$(function() {
$("#datepicker").datepicker();
// Pass the user selected date format.
$("#format").change(function() {
$("#datepicker").datepicker("option", "dateFormat", $(this).val());
});
});
});

CSS file: style.css

Styling HTML elements.

/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
select{
width::80%;
border:3px solid rgb(200, 200, 207);
height:42px;
padding:5px;
border-radius:3px;
margin:5px 10px 20px 35px;
}
input[type=text]{
width:76%;
border:3px solid rgb(200, 200, 207);
height:23px;
padding:5px;
border-radius:3px;
margin:5px 10px 20px 35px;
}
input[type=submit]{
width:80%;
border:3px solid rgb(200, 200, 207);
height:42px;
padding:5px;
border-radius:3px;
margin:10px 10px 20px 35px;
border:1px solid green;
}
label{
margin-left:35px;
font-family: 'Droid Serif', serif;
}
.container{
width:960px;
margin:50px auto;
}
.main{
float:left;
width:355px;
height:350px;
box-shadow:1px 1px 12px gray;
padding-top:30px;
}
h2{
width:370px;
text-align:center;
font-family: 'Droid Serif', serif;
}

Conclusion: Through above example it becomes easy to add date input in forms. Hope you like it, Keep reading our other blogs.