How Can I Display Only Month and Year Using jQuery UI DatePicker?-JS Tutorial-php.cn

How Can I Display Only Month and Year Using jQuery UI DatePicker?

Patricia Arquette

Release： 2024-11-30 20:51:18

Original

342 people have browsed it

How Can I Display Only Month and Year Using jQuery UI DatePicker?

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));
    }
    });
});

Copy after login

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

Copy after login

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

Copy after login

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!