Format Date Picker functionality In Jquery.

Posted by in jQuery category on for Beginner level | Points: 250 | Views : 3657 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
Read Introduction and how to use HTML5 Elements. before this article.


The Format 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 Format date picker elements.

Format Date picker Functionality

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.This option specifies the date  format to use.Its value is mm/dd/yy


JQuery provides Format date picker functionality that transforms the <input>, <div>, and <span> elements in the wrapped set into a date picker control. Format 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  Format Date Picker() method default  functionality.

This style sheet links should be written in the head tag 
<link rel="stylesheet" href="//">
<script src="//"></script>
<script src="//"></script>
The function code of the Format date Picker functionality is mentioned in head tag.This should be written after the link sheets mentioned above.

$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
We have to write the code in body tag here below it is shown clearly
In the above code, we have Format date picker code. In this we use input type and Id attributes.

 <p>Date: <input type="text" id="datepicker" size="30"></p>
Here, In this we need to mention format option in the format date picker to run the functionality
These options are mentioned in body tag only and are inherited between <p> tags
This is how the code should be written in the body
<p>Date: <input type="text" id="datepicker" size="30"></p>
        Format options:<br>
        <select id="format">
            <option value="mm/dd/yy">Default - mm/dd/yy</option>
            <option value="d M, y">Short - d M, y</option>
            <option value="d MM, y">Medium - d MM, y</option>
            <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
            <option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - 'day' d 'of' MM 'in the year' yy</option>
Here is the output for Format date picker.It is shown clearly below
From the above example .It says that Two text boxes are mentioned . When we click on the first text box(Date)
it shows a date menu .It is shown in below example

The Second text box works when we try to changed the format of the given date as we have mentioned in the code .It Changes in the first text box(works on date ) and shows date format
It is shown clearly in the example


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

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Vivek R
Member Level: Bronze
Member Status: Member,MVP
Member Since: 2/25/2014 12:46:59 PM
Country: India

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)