
Displaying Month and Year with jQuery UI DatePicker
The jQuery UI DatePicker component is a versatile tool for displaying calendars in web applications. However, there are instances where it may be desirable to only show the month and year, omitting the calendar grid. This can be achieved through a clever workaround.
Creating a "Month Year Only" Display
The following code snippet provides a solution:
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
This script configures the date picker with specific settings:
-
changeMonth and changeYear: Enable changing month and year.
-
showButtonPanel: Show a button panel for month and year navigation.
-
dateFormat: Specify the desired format as "MM yy" for month and year only.
-
onClose: On closing the picker, set the selected date to the first day of the selected month and year.
Hiding the Calendar Grid
To hide the calendar grid, add the following CSS rule:
.ui-datepicker-calendar {
display: none;
}
Complete HTML Example
Here's a revised version of the HTML file with all the necessary elements:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date : < /label>
<input name="startDate">
This revised solution provides a user interface that allows users to select a month and year without displaying the calendar grid.
The above is the detailed content of How Can I Display Only Month and Year Using jQuery UI DatePicker?. For more information, please follow other related articles on the PHP Chinese website!