Multiple Date Picker Functionality in jquery

Vivek.Ramapuram
Posted by in jQuery category on for Intermediate level | Points: 250 | Views : 1921 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 Multiple date picker (options) method declares that an <input> element  should be managed as a date picker. The options parameter is an object that specifies the behavior and appearance of the Multiple date picker elements.

Multiple 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.It shows multiple date menus in input box.


Functionality Of Multiple Date Picker

Jquery provides Multiple date picker functionality that transforms the <input>, <div>, and <span> elements in the wrapped set into a date picker control. Multiple Date picker () 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  Multiple Date Picker () 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 Multiple date Picker functionality is mentioned in head tag.This should be written after the link sheets mentioned above.
    <script>
        $(function () {
            $("#datepicker").datepicker({
                numberOfMonths: 4,
                showButtonPanel: true
            });
        });
  </script>
From the above code, we can display date menu by changing number's in the code script.It should be more than one  to run the Multiple date picker.


We have to write the code in <body tag> here below it is shown clearly
<<body>
<p>Date: <input type="text" id="datepicker"/></p> </body>
In the above code, we have Multiple date picker code. In this we use input type and Id attributes.
Example of the written Multiple Date picker code is shown below

Above is the example of Multiple date picker.When we click on the in put box date picker function works and appears date menu. Here in input box  multiple date menu appear's as we mention in the code(numberOfmonths:4).It is shown in below image


Conclusion

In this article we discussed about Multiple Date picker functionality in jquery. Previously we have learnt about Default datepicker functionality and Animation date picker functionality. Here in this functionality changes in each and every datepicker which we have written in code. Hope You Understand 
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)