jDatePick

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

Easy to install
Not special code is required
You can customize the background color
You can specify name and id attributes for the hidden date field other than the originals
Set us lower year the current year
Setup the date divider
Change the date format
Support the easing library
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: 'dmy',
                dateFieldName: 'hiddenFieldName',
                dateFieldID: 'hiddenFieldID',
                datePartSeperator: '/',
                stopCurrentYear: true,
                font: 3,
                speed: 500,
                easingMode: 'easeInQuart'
            }
        );
    }
);
</script>

If you have follow all of the above instructions your plug-in probably will be ready to work.

Plugin options

The jDatePick comes with a number o optional settings you can use to customize the way it works. The list of the available options is the following:

bgColor: Changing the plug-in background color. Valid values are the html color names, such us “red”, “blue”, “coral”, “darkgray” and so on. You can also use hexadecimal notation in the form of “#000” or “#000000”.

dateOrder: By setting this option, you can change the date format, as well the date fields position. This field can get only three letters in any combination you like. That three letters are the “d” for day, “m” for month and “y” for year all in lowercase. This value can be like the following examples, ‘ymd’, ‘mdy’, ‘dym’ and any other combination you like. Note that the hidden field of the plug-in hold the selected date will format the date value in the same form.

dateFieldName: The plug-in generate a hidden form field that hold the selected date. The default name of that field is “dateControl”. If you like you can use this option to modify the name, so after you submit your form you will find the value of that field in your REQUEST with that new name.

dateFieldID: The plug-in generate a hidden form field that hold the selected date. The default id for that field is “dateControl”. If you like to modify this id just change this option.

datePartSeperator: The plug-in generate a hidden form field that hold the selected date. Change this value with the character you like to separate the date parts.

stopCurrentYear: This field can get only boolean values. So the only valid values you can enter for this option are “true” or “false” (without quotes). If you set this option to true, then the lowest value for the year field will be the current year.

font: The “font” option is used to change the font family of the calendar digits. The jDatePick it is coming with four fonts installed, so the only valid values for that field are 1,2,3 or 4.

speed: This option set the changing speed of the digits in the jDatePick. You can use any number you like in milliseconds.

easingMode: If you have installed the easing library in your web site, before the jDatePick plug-in, you can use on of the following values for better animated effects: “def”, “swing”, “easeInQuad”, “easeOutQuad”, “easeInOutQuad”, “easeInCubic”, “easeOutCubic”, “easeInOutCubic”, “easeInQuart”, “easeOutQuart”, “easeInOutQuart”, “easeInQuint”, “easeOutQuint”, “easeInOutQuint”, “easeInSine”, “easeOutSine”, “easeInOutSine”, “easeInExpo”, “easeOutExpo”, “easeInOutExpo”, “easeInCirc”, “easeOutCirc”, “easeInOutCirc”, “easeInElastic”, “easeOutElastic”, “easeInOutElastic”, “easeInBack”, “easeOutBack”, “easeInOutBack”, “easeInBounce”, “easeOutBounce”, “easeInOutBounce”

Login

Product Details

Created

Files included

Software type

Layout

Keywords

Features

Requirements

Installation

HTML Instalation

Plugin options

Leave a Reply Cancel reply

drop us a line