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
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
Functionality
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
<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 Format date Picker functionality is mentioned in head tag.This should be written after the link sheets mentioned above.
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>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>
<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="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>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
Conclusion
In this article we discussed about
Format Date picker functionality in
Jquery. Previously we have looked into
Accordion functionality. Hope you understand.