Date picker animation functionality

Vivek.Ramapuram
Posted by in jQuery category on for Intermediate level | Points: 250 | Views : 1914 red flag

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 Picker

Jquery 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


Page copy protected against web site content infringement by Copyscape

About the Author

Vivek.Ramapuram
Full Name: Vivek R
Member Level: Bronze
Member Status: Member,MVP
Member Since: 2/25/2014 12:46:59 PM
Country: India
RvGoud
http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)