jquery popup datepicker


 

jquery popup datepicker

In this section ,you will learn to implement the date picker inside html page.

In this section ,you will learn to implement the date picker inside html page.

jQuery popup Date picker

In this section ,you will learn to implement the date picker inside html page. The output of the example code given below contains a  input box in which you have to enter date. But for this , you need not to actually enter through key board . When you click on input box , it will display a date picker box. You have to just select the correct date ,month & year. The input box automatically take the value as date.

datePicker.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Datepicker</title>
<style type="text/css">
@import "DatePicker/flora.datepick.css";
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="DatePicker/jquery.datepick.js">
</script>
<script type="text/javascript">
$(function() {
$('#popupDatepicker').datepick();

});
</script>
</head>
<body bgcolor="#ADFF2F">
<h1><font color="green">jQuery popup Date picker</font>
</h1>
<font color="green">
<p>Enter Date &nbsp;<input type="text" id="popupDatepicker">
</p>
</font>
</body>
</html>

OUTPUT

When you click inside input box :

Download Source Code

Click here to see demo

Ads