Post
Ask Question

JQuery Datepicker - Part 1

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.
  1. <head>  
  2. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">    
  3. <script src="//code.jquery.com/jquery-1.10.2.js"></script>    
  4. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  5. </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
  1. 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".
  1. $(function () {  
  2.   
  3.     $('#Datepicker').datepicker({  
  4.         dateFormat: 'dd/mm/yy'  
  5.   
  6.     });  
  7.   
  8. })  
Output
 
 
Example 2 : jQuery Datepicker Format ( dd MM yy )
 
HTML
  1. Date : <input id="Datepicker" type="text" /><br />   
JQuery
 
The format will display like 26 August 1989. 
  1. $(function () {  
  2.   
  3.     $('#Datepicker').datepicker({  
  4.         dateFormat: 'dd MM yy'  
  5.   
  6.     });  
  7.   
  8. })  
Output
 
 
Example 3 : Day of the year
 
HTML
  1. Date : <input id="Datepicker" type="text" /><br />     
JQuery

The dateFormat using "o", it will count the day of the year. 
  1. $(function () {  
  2.   
  3.     $('#Datepicker').datepicker({  
  4.         dateFormat: 'o'  
  5.   
  6.     });  
  7.   
  8. })  
Output
 
 
Reference
Summary
 
We learned various date format in jQuery Datepicker. I hope this article is useful for beginners.


Similar Articles