jQuery UI DatePickerを使用して月と年だけを表示するにはどうすればよいですか?-jsチュートリアル-php.cn

jQuery UI DatePickerを使用して月と年だけを表示するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-30 20:51:18

オリジナル

359 人が閲覧しました

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

jQuery UI DatePicker を使用した月と年の表示

jQuery UI DatePicker コンポーネントは、Web アプリケーションでカレンダーを表示するための多用途ツールです。ただし、カレンダーグリッドを省略して、月と年のみを表示することが望ましい場合もあります。これは、賢い回避策で実現できます。

「月、年のみ」表示の作成

次のコードスニペットは、解決策を提供します。

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

ログイン後にコピー

このスクリプトは、特定の日付ピッカーを構成します設定:

changeMonth および changeyear: 月と年の変更を有効にします。
showButtonPanel: ボタンを表示します。月と年のパネルナビゲーション。
dateFormat: 月と年のみ「MM yy」として希望の形式を指定します。
onClose: ピッカーを閉じるときに、選択した日付を選択した月の 1 日に設定し、 year.

カレンダーグリッドの非表示

カレンダーグリッドを非表示にするには、次の CSS ルールを追加します:

.ui-datepicker-calendar {
    display: none;
}

ログイン後にコピー

完全な HTML 例

これは、必要なすべての要素を含む HTML ファイル:

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

ログイン後にコピー

この改訂されたソリューションでは、ユーザーがカレンダーグリッドを表示せずに月と年を選択できるユーザーインターフェイスが提供されます。

以上がjQuery UI DatePickerを使用して月と年だけを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。