Default Functionality of Date Picker in Jquery

Vivek.Ramapuram
Posted by in jQuery category on for Intermediate level | Points: 250 | Views : 2730 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 (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 date picker elements.


Default 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


Functionality Of Date Picker

JQuery provides date picker functionality that transforms the <input>, <div>, and <span> elements in the wrapped set into a date picker control. 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  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 date Picker functionality is mentioned in head tag.This should be written after the link sheets mentioned above.

  <script>
         $(function () {
             $("#datepicker").datepicker();
         });
</script>
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 date picker code. In this we use input type and Id attributes.
Example of the written Date picker code is shown below


When we click on the text box ,date picker dialog box will appear.
It is shown in below image.



Conclusion

In this article we discussed about Date picker functionality in Jquery. Previously we have learnt about Accordion functionality. Hope you understand 

Reference

http://jqueryui.com/

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)