07 Mar 2011
CSS, HTML Files, JavaScript, PNG Images
Clean modern date picker for jQuery Framework. This plug-in is designed to work with any form that requires a date pick control with many features and simple installation.
jDatePick is very simple plug-in and it is not need any other library to work, except of the jQuery Framework. Optional if you like, you can use the easing library to add advanced easing animation.
Installation is simple and doesn’t require any special knowledge to use it. The only knowledge you have to know is basic HTML and basic jQuery Framework usage knowledge. The installation is divided in two parts. The first part is for the HTML and the second one for the jQuery.
In the head section of your page link first the CSS that comes with the plug-in and then after you have load your jQuery library, load optionally the easing library and then the jDatePick. After you have load all of the external parts of the plug-in in your page you have to create a div element that will act as a container for the jDatePick. Finally you have to setup the jQuery code that will create the plug-in.
The code in the head section of your page must look like the following code:
<html> <head> <title>You page title</title> <link href="path/to/your/jDatePick/directory/css/css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="path/to/jquery/framework/jquery.js"></script> <!-- OPTIONAL INCLUDE OF THE EASING LIBRARY --> <script type="text/javascript" src="path/to/easing/library/jquery.easing.x.x.js"></script> <script type="text/javascript" src="path/to/your/jDatePick/directory/jquery.jdatepick.js"></script> </head> <body> Code of the body goes here </body> </html>
The code in the body section of your page must looks like the following code:
... <body> Body content .... <div id="jDatePickContainer"></div> .... Body rest content </body> ...
Final step is to create the appropriate code to run the jDatePick plug-in. In the head section of your page, enter the following code before the closing head tag </head>.
.... head section code ..... <script type="text/javascript"> $(document).ready( function() { $('jDatePickContainer').jDataPick( { bgColor: '#FFF', dateOrder: 'dm