Advertisements

JQuery Datepicker – Part 2


Introduction

Hi Everyone..!! 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.

<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>  

Display Month & Year Menus In JQuery Datepicker

HTML

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.

$(function () {  
      $('#Datepicker').datepicker({  
        dateFormat: 'dd/mm/yy',  
        changeMonth: true,  
        changeYear: true,  
        yearRange: '1950:2100'  
      });  
  }) 

Output

2

Figure 1

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

Disable Weekends In JQuery Datepicker

HTML

Date : <input id="Datepicker" type="text" />  

JQuery

The following code will disable all weekends in the JQuery Datepicker.”noWeekends” will disable the weekends.

$(function () {  
     $('#Datepicker').datepicker({  
        beforeShowDay: $.datepicker.noWeekends  
     });  
 }) 

Output

1

Figure 2

JS Fiddle Demo 2 : http://jsfiddle.net/rajeeshmenoth/knmcuzmh/

Display Multiple Month In JQuery Datepicker

HTML

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.

$(function () {   
    $('#Datepicker').datepicker({  
       numberOfMonths:2  
    });   
}) 

Output

3

Figure 3

JS Fiddle Demo 3 : http://jsfiddle.net/rajeeshmenoth/tvc64dtg/

Summary

We learned various date format in jQuery Datepicker. I hope this article is useful for beginners.

 

Advertisements

2 responses

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: