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

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

Susan Sarandon

リリース： 2024-11-26 17:09:14

オリジナル

335 人が閲覧しました

How to Display Only Month and Year in jQuery UI DatePicker?

jQuery UI DatePicker で月と年のみを表示する

jQuery UI の DatePicker プラグインは、外観を柔軟にカスタマイズできます。完全なカレンダーを表示する必要がないシナリオでは、ユーザーは月と年だけを表示したい場合があります。

解決策:

これを実現するには、「ハッキング」「まだ機能的なアプローチには、プログラムによってカレンダーコンポーネントを非表示にし、JavaScript 構成を変更することが含まれます。以下に例を示します。

<html>
<head>
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui.css">
    <script>
        $(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));
                }
            });
        });
    </script>
    <style>
        .ui-datepicker-calendar {
            display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date:</label>
    <input name="startDate">

ログイン後にコピー

このアプローチでは、月と年の選択機能を維持しながら、カレンダーの表示を無効にします。 onClose イベントハンドラーは、選択された日付を選択された月と年の最初の日に調整し、入力ボックスに月と年のみが表示されるようにします。

拡張ソリューション:

時間が経つにつれて、元のアプローチの潜在的な欠点に対処する、より洗練されたソリューションが登場しました。このような解決策の 1 つは、jQuery UI の _selectDay メソッドをオーバーライドして暦日が選択できないようにすることです。このアプローチにより、希望する月と年の表示を提供しながら、日付入力をより堅牢に処理できるようになります。

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