Login





 
en
Login / Register

Shopping Cart

jDatePick





Product Details

Created

07 Mar 2011

Files included

, , ,

Software type

Layout

Keywords

, , , , ,

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.

Features

  1. Easy to install
  2. Not special code is required
  3. You can customize the background color
  4. You can specify name and id attributes for the hidden date field other than the originals
  5. Set us lower year the current year
  6. Setup the date divider
  7. Change the date format
  8. Support the easing library
  9. Plug-in size is only 8.29 KB

Requirements

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

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.

HTML Instalation

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