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.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 <input type="text" id="popupDatepicker"> </p> </font> </body> </html> |
OUTPUT
When you click inside input box :