Thursday, May 16, 2013

How to use datepicker using Jquery

Before using any from Jquery you have to add .js file your project, then drag and drop that .js file to your page. It looks like below
<script src="../js/jquery-1.9.1.js" type="text/javascript"></script> 
Then add core,widget,datepicker js file to your wedsite and your page.
  Now take a textbox in your page and call datapicker function.You have to add CSS file for feel good below those are shown in red color

 Follow the code below


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

No comments:

Post a Comment