Post
Ask Question

JQuery Datepicker - Part 2

Introduction

We will continue the second part of the jQuery Datepicker Dateformat. Before reading this article you must read my previous article  JQuery Datepicker - Part 1 because  I have explained some important part in my previous article. In this article I will teach you the remaining part of jQuery Datepicker 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>    
Display Month & Year Menus In JQuery Datepicker

HTML
  1. Date : <input id="Datepicker" type="text" />  
JQuery

The following code will show the Month & Year Menus In Jquery Datepicker. The "yearRange" will specify the range of the year you want.
  1. $(function () {  
  2.   
  3.     $('#Datepicker').datepicker({  
  4.         dateFormat: 'dd/mm/yy',  
  5.         changeMonth: true,  
  6.         changeYear: true,  
  7.         yearRange: '1950:2100'  
  8.   
  9.     });  
  10.   
  11. })  
Output

 
JS Fiddle Demo 1: http://jsfiddle.net/rajeeshmenoth/1juozmdn/.

Disable Weekends In JQuery Datepicker
 
HTML
  1. Date : <input id="Datepicker" type="text" />  
JQuery
 
The following code will disable all weekends in the JQuery Datepicker."noWeekends" will disable the weekends.
  1. $(function () {  
  2.   
  3.     $('#Datepicker').datepicker({  
  4.         beforeShowDay: $.datepicker.noWeekends  
  5.   
  6.     });  
  7.   
  8. })  
Output
 
 
 
Display Multiple Month In JQuery Datepicker
 
HTML
  1. Date : <input id="Datepicker" type="text" />  
JQuery

The following code will display the multiple month in jQuery Datepicker. The "numberOfMonths" will show the next months.
  1. $(function () {  
  2.   
  3.     $('#Datepicker').datepicker({  
  4.        numberOfMonths:2  
  5.     });  
  6.   
  7. })  
Output
 
 
 
Reference
Summary
 
We learned various date format in jQuery Datepicker. I hope this article is useful for beginners.


Similar Articles