Sunday, 19 March 2017

How to add calendar date picker in html

                          Many times, while developing a website, we need to add Date field into our web page. An automatic generated date picker make it more user friendly and also improves the beauty of a web page.
                          In this post, we will see how to add calendar date picker in html web page.
                          Go through the following program code which uses Java Script to add datepicker to a webpage.


Program: (calender.html)


<html>
<head>
<title>Calender Sample Code</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>   
</head>

<body>

<form action="#" method="POST">
Event: <input type="text" name="subjectcode">
<br />
<br />

Date: <input type="text" name="date" id="datepicker" value="mm/dd/yyyy" onfocus="if(this.value==this.defaultValue) this.value='';" />
<br />
<br />

<input type="submit" value="Submit" />
</form>

</body>
</html>

Output:


No comments:

Post a comment