Introduction
There are many more examples on the Internet for jQuery Datepicker. Manyprogrammers widely using jQuery Datepicker and in this article I will teach you some of the basics of jQuery Datepicker Date Format.! Let's start.
JQuery Reference
You must use the following jquery reference in your HTML Code, otherwise it will not work.
- <head>
- <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
- </head>
Jquery Datepicker With Different Format
Firstly, read the JQuery Documentation because the documentation![]()
explains the basic details of jQuery Datepicker Format. For example, DD and dd will give different output.
Check the following details that are provided in the jQuery documentation.
- d - day of month (no leading zero)
- dd - day of month (two digit)
- D - day name short
- DD - day name long
- m - month of year (no leading zero)
- mm - month of year (two digit)
- M - month name short
- MM - month name long
- y - year (two digit)
- yy - year (four digit)
Example 1: jQuery Datepicker Format ( dd/mm/yy ).
HTML
- Date : <input id="Datepicker" type="text" /><br />
JQuery
The following code is using textbox id "#Datepicker" and dateFormat "dd/mm/yy". You can change this format based on your requirement like "mm/dd/yy".
- $(function () {
-
- $('#Datepicker').datepicker({
- dateFormat: 'dd/mm/yy'
-
- });
-
- })
Output
Example 2 : jQuery Datepicker Format ( dd MM yy )
HTML
- Date : <input id="Datepicker" type="text" /><br />
JQuery
The format will display like 26 August 1989.
- $(function () {
-
- $('#Datepicker').datepicker({
- dateFormat: 'dd MM yy'
-
- });
-
- })
Output
Example 3 : Day of the year
HTML
- Date : <input id="Datepicker" type="text" /><br />
JQuery
The dateFormat using "o", it will count the day of the year.
- $(function () {
-
- $('#Datepicker').datepicker({
- dateFormat: 'o'
-
- });
-
- })
Output
Reference
Summary
We learned various date format in jQuery Datepicker. I hope this article is useful for beginners.