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.
- <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
![]()
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
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
Reference
Summary
We learned various date format in jQuery Datepicker. I hope this article is useful for beginners.