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.
Viknaraj ManogararajahPosted Aug 6, 2018, 6:56 PM
nice article...
Rajeesh MenothPosted Aug 30, 2016, 4:31 AM
Thank You Delpin Susai Raj
Delpin Susai RajPosted Aug 28, 2016, 7:09 AM
Nice article
Rajeesh MenothPosted Sep 23, 2015, 6:24 AM
Thanks Santhakumar Munuswamy sir
Santhakumar MunuswamyPosted Sep 22, 2015, 3:12 PM
Nice Article. Thanks for sharing
Rajeesh MenothPosted Sep 22, 2015, 2:14 AM
Thanks bro Anil Kumar
Anil KumarPosted Sep 22, 2015, 2:11 AM
Nyc 1 Bro..
Karthikeyan KPosted Sep 21, 2015, 11:41 PM
Good one bro-:)
Pankaj Kumar ChoudharyPosted Sep 21, 2015, 8:46 PM
Nice Explain Sir..........
RakeshPosted Sep 21, 2015, 10:16 AM
Good share
Nilesh JadavPosted Sep 21, 2015, 6:30 AM
Nice one Buddy :)
Ankit BansalPosted Sep 21, 2015, 6:15 AM
good one...
Siddarth PathakPosted Sep 21, 2015, 3:44 AM
good.
Sumit JoshiPosted Sep 21, 2015, 3:26 AM
Thanks for sharing...
Sibeesh VenuPosted Sep 21, 2015, 3:23 AM
Nice Share :)
Saritha K TPosted Sep 21, 2015, 2:29 AM
nice article.............