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

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

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

解決策:

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

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


    <label for="startDate">Date:</label>
    <input name="startDate">

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

拡張ソリューション:

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

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