Jquery is fast and rich Javascript library. It create things in html documents, event handling and animations. It is easy to use API that works across a browser
Introduction
The date picker animation (options) method
declares that an <input> element should be managed as a date
picker. Appearance of the date picker animation elements is an object that specifies
the behavior.
Animation functionality of Date picker
In Jquery Date pickers allow users
to enter dates easily and visually. we can easily customize the date
format and language, restrict the selectable date ranges and add in
buttons and other navigation options.In this we have different types of animations like "
Slide Down","
Slide","
Blind","
Bounce","
Clip","
Fold" etc in jquery.
Functionality Of Date PickerJquery provides date picker animation functionality that transforms the <input>,
<div>, and <span> elements in the wrapped set into a date picker
control. Date picker animation () method that creates a date picker and changes
the appearance of HTML elements on a page by adding new CSS classes.
Here we mentioned an example for Date Picker animation() method default functionality.
This style sheet links should be written in the head tag
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
The function code of the
date Picker animation functionality is mentioned in
head tag.This should be written after the link sheets mentioned above.
<script>
$(function () {
$("#datepicker").datepicker();
$("#anim").change(function () {
$("#datepicker").datepicker("option", "showAnim", $(this).val());
});
});
</script>We have to write the code in <body tag> here below it is shown clearly
<body>
<p>Date:
<input type="text" id="datepicker" size="30" /></p>
<p>
Animations:<br />
<select id="anim">
<option value="show">Show (default)</option>
<option value="slideDown">Slide down</option>
<option value="fadeIn">Fade in</option>
<option value="blind">Blind (UI Effect)</option>
<option value="bounce">Bounce (UI Effect)</option>
<option value="clip">Clip (UI Effect)</option>
<option value="drop">Drop (UI Effect)</option>
<option value="fold">Fold (UI Effect)</option>
<option value="slide">Slide (UI Effect)</option>
<option value="">None</option>
</select>
</p>
</body>Here we use input type for the datepicker and animations drop down list selector are used.
Here <p> tags are used for the drop down list selector
<p>Date:
<input type="text" id="datepicker" size="30" /></p>
<p>
Animations:<br />
<select id="anim">
<option value="show">Show (default)</option>
<option value="slideDown">Slide down</option>
<option value="fadeIn">Fade in</option>
<option value="blind">Blind (UI Effect)</option>
<option value="bounce">Bounce (UI Effect)</option>
<option value="clip">Clip (UI Effect)</option>
<option value="drop">Drop (UI Effect)</option>
<option value="fold">Fold (UI Effect)</option>
<option value="slide">Slide (UI Effect)</option>
<option value="">None</option>
</select>
</p>In the above code, we have date picker animation code. In this we use input type and Id attributes.
Example of the written Date picker Animation code is shown below
Above is the example of animation date picker.When we click on the in put box date picker function works and appears date menu.It is shown in below image
From the above image when we click on input it is shown date menu and when we select animations from the drop down menu animation datepicker function runs.
Conclusion
In this article we discussed about
Date picker animation functionality in
Jquery. Previously we have learnt about default functionality of
date picker and
Accordion functionality. Hope you understand
Reference