web-dev-qa-db-ja.com

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

私はjQueryの日付ピッカーを使って私のアプリ全体にカレンダーを表示しています。カレンダーではなく月と年（2010年5月）を表示するために使用できるかどうかを知りたいですか？

javascriptjquerydatejquery-uijquery-ui-datepicker
361
Aanu

これがハックです（.htmlファイル全体で更新されます）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
    <script type="text/javascript">
        $(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" id="startDate" class="date-picker" />
</body>
</html>

_ edit _ 上記の例ではjsfiddle： http://jsfiddle.net/DBpJe/7755/

編集2 [完了]ボタンをクリックしたときだけ、月の年の値を入力ボックスに追加します。上のフィールドでは不可能な入力ボックスの値も削除できます http://jsfiddle.net/DBpJe/5103/

編集3 rexwolfの解決法に基づいてBetter Solutionを更新。
http://jsfiddle.net/DBpJe/5106

411
Ben Koehler

この code は完璧に機能しています。

<script type="text/javascript">
$(document).ready(function()
{   
    $(".monthPicker").datepicker({
        dateFormat: 'MM yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,

        onClose: function(dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
        }
    });

    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });
});
</script>

<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />

出力は以下のとおりです。

enter image description here

77
Leniel Maccaferri

@Ben Koehler 、それは問題ありません！日付ピッカーの単一のインスタンスを複数回使用しても期待どおりに動作するように、小さな変更を加えました。この修正がないと、日付は正しく解析されず、以前に選択された日付は強調表示されません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
    <script type="text/javascript">
    $(function() {
        $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function(dateText, inst) { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            },
            beforeShow : function(input, inst) {
                var datestr;
                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length-4, datestr.length);
                    month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            }
        });
    });
    </script>
    <style>
    .ui-datepicker-calendar {
        display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
61
BrianS

上記の答えはかなり良いです。私の唯一の不満は、一度設定した値はクリアできないということです。また、私はextend-jquery-like-a-pluginアプローチを好みます。

これは私にとって完璧に動作します。

$.fn.monthYearPicker = function(options) {
    options = $.extend({
        dateFormat: "MM yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: ""
    }, options);
    function hideDaysFromCalendar() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        // Also fix the click event on the Done button.
        $('.ui-datepicker-close').unbind("click").click(function() {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    }
    $(this).datepicker(options).focus(hideDaysFromCalendar);
}

それから次のように起動します。

$('input.monthYearPicker').monthYearPicker();
17
user1857829
<style>
.ui-datepicker table{
    display: none;
}

<script type="text/javascript">
$(function() {
    $( "#manad" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        },
        beforeShow : function(input, inst) {
            if ((datestr = $(this).val()).length > 0) {
                actDate = datestr.split('-');
                year = actDate[0];
                month = actDate[1]-1;
                $(this).datepicker('option', 'defaultDate', new Date(year, month));
                $(this).datepicker('setDate', new Date(year, month));
            }
        }
    });
});

これで問題は解決します=）しかし、私はtimeFormat yyyy-mmが欲しかった

FF4で試しただけ

10
Erik Polder

私は今日もこれと同じニーズを持っていて、githubでこれを見つけ、jQueryUIで動作し、カレンダーの日の代わりに月ピッカーを持っています

https://github.com/thebrowser/jquery.ui.monthpicker

9
Anthony Shaw

これが私が思いついたものです。余分なスタイルブロックを必要とせずにカレンダーを非表示にし、入力をクリックすると値をクリアできないという問題に対処するためのクリアボタンを追加します。同じページの複数の月ピッカーでもうまく機能します。

HTML：

<input type='text' class='monthpicker'>

JavaScript：

$(".monthpicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm",
    showButtonPanel: true,
    currentText: "This Month",
    onChangeMonthYear: function (year, month, inst) {
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
    },
    onClose: function(dateText, inst) {
        var month = $(".ui-datepicker-month :selected").val();
        var year = $(".ui-datepicker-year :selected").val();
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
    }
}).focus(function () {
    $(".ui-datepicker-calendar").hide();
}).after(
    $("<a href='javascript: void(0);'>clear</a>").click(function() {
        $(this).prev().val('');
    })
);
8
Paul Richards

もう1つ簡単な解決策を追加する

 $(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy'
    }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

http://jsfiddle.net/tmnasim/JLydp/ /
機能 ：

  • 月/年のみを表示
  • [完了]ボタンをクリックした場合にのみ、入力ボックスに月の年の値を追加します。
  • 「完了」をクリックしても「開く」動作がない
    ------------------------------------
    同じページの日付ピッカーと月ピッカーでうまく機能するもう1つの解決策：（フォーカス機能を使用すると発生する可能性がある、IEの前のボタンで複数クリックするバグも回避します）
    JSフィドルリンク
5
Chinh Phan

私は上記の良い答えの多くを組み合わせて、これにたどり着きます。

    $('#payCardExpireDate').datepicker(
            {
                dateFormat: "mm/yy",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                onClose: function(dateText, inst) { 
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
                },
                beforeShow : function(input, inst) {
                    if ((datestr = $(this).val()).length > 0) {
                        year = datestr.substring(datestr.length-4, datestr.length);
                        month = datestr.substring(0, 2);
                        $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
                        $(this).datepicker('setDate', new Date(year, month-1, 1));
                    }
                }
            }).focus(function () {
                $(".ui-datepicker-calendar").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });

これはうまくいくことが証明されていますが、多くのバグに直面しているので、私はいくつかの日付ピッカーにパッチを当てることを強いられました。

if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
    $(".ui-datepicker-calendar").hide();
}

patch1：in _showDatepicker：非表示を滑らかにする。

patch2：in _checkOffset：月ピッカーの位置を修正します（それ以外の場合は、フィールドがブラウザの下部にある場合、オフセットチェックはオフになります）。

patch3：_hideDatepickerのonClose：それ以外の場合、日付フィールドを閉じると非常に短い時間点滅しますが、これは非常に面倒です。

私は自分の修正があまり良くないことを知っていますが、今のところそれはうまくいっています。それが役に立てば幸い。

5
rexwolf

私は2つのフィールド（FromとTo）に月/年ピッカーが必要で、1つが選択されたときに最大/最小がもう一方のフィールドに設定されていました。最大値と最小値の設定に問題がありました...他のフィールドの日付は消去されます。上記の記事のいくつかに感謝します...私はついにそれを考え出しました。あなたは非常に特定の順序でオプションと日付を設定しなければなりません。

完全な解決策については、このフィドルを参照してください。 月/年のピッカー@ JSFiddle

コード：

var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
    searchMaxDate = "-2m";
}
$("#txtFrom").datepicker({
    dateFormat: "M yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    minDate: searchMinDate,
    maxDate: searchMaxDate,
    showButtonPanel: true,
    beforeShow: function (input, inst) {
        if ((datestr = $("#txtFrom").val()).length > 0) {
            var year = datestr.substring(datestr.length - 4, datestr.length);
            var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
        $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            var to = $("#txtTo").val();
            $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
            if (to.length > 0) {
                var toyear = to.substring(to.length - 4, to.length);
                var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
                $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
            }
        }
    });
    $("#txtTo").datepicker({
        dateFormat: "M yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: "",
        minDate: searchMinDate,
        maxDate: searchMaxDate,
        showButtonPanel: true,
        beforeShow: function (input, inst) {
            if ((datestr = $("#txtTo").val()).length > 0) {
                var year = datestr.substring(datestr.length - 4, datestr.length);
                var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            var from = $("#txtFrom").val();
            $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
            if (from.length > 0) {
                var fryear = from.substring(from.length - 4, from.length);
                var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
                $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
                $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
            }

        }
    });

上記のように、これをスタイルブロックに追加します。

.ui-datepicker-calendar { display: none !important; }
5
Amy Struck

それは私だけなのか、それともIE（8）のように機能していないのか。クリックすると日付は変わりますが、実際にページ内のどこかをクリックして入力フィールドへのフォーカスを緩めるまで、日付ピッカーは再び開きます。

私はこれを解決するために探しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
<script type="text/javascript">
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});
</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
4
Tom Van Schoor

日付ピッカーについてjQueryUI.comを掘り下げた後、これが私の結論であり、あなたの質問に対する答えです。

最初に、私はあなたの質問に いいえ と言うでしょう。月と年だけを選ぶためにjQueryUI datepickerを使うことはできません。サポートされていません。そのためのコールバック関数はありません。

しかし cssを使用して日を非表示にするなどして、 display にのみハッキングすることができます。日付を選ぶ.

私はあなたがちょうどもう一つの日付ピッカーを使わなければならないと言うことができます。ロジャーが示唆したように。

3
Reigel

月ピッカーと日付ピッカーの問題が混在していました。私はそれをそのように解決しました。

    $('.monthpicker').focus(function()
    {
    $(".ui-datepicker-calendar").show();
    }).datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM/yy',
        create: function (input, inst) { 

         },
        onClose: function(dateText, inst) { 
            var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());           
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

        }
    });
3
PYT

月ピッカーを探しているならこれを試してみてください jquery.mtz.monthpicker

これは私にとってうまくいった。

3
user2630080

他の多くの人と同じように、私はこれをしようとする多くの問題に遭遇し、解決策の組み合わせのみが投稿され、最終的にそれを完璧にするための大きなハックがありました私に解決策を見つけました。

私が試したこのスレッドの他のソリューションの問題：

  1. 日付ピッカーで新しい日付を選択すると、他の日付ピッカーの（内部）日付も変更されるため、他の日付ピッカーを再度開いた（または日付を取得しようとした）と、割り当てられた入力に表示された日付とは異なる日付になります-フィールド。
  2. 日付ピッカーは、再度開かれたときに日付を「記憶」しません。
  3. 日付をジャグリングするコードは部分文字列を使用したため、すべての形式と互換性がありませんでした。
  4. 「My monthpicker」は、値が変更されたときではなく、入力フィールドを閉じるときにのみ入力フィールドを変更しました。
  5. 日付に間違った形式の入力文字列を入力してから、日付ピッカーで[閉じる]をクリックすると、入力フィールドが正しく更新されません。
  6. 日付を表示しない月ピッカーと同じページに、日付​​を表示する通常の日付ピッカーを作成することはできません。

最終的にこれらの問題をすべて修正にする方法を見つけました。最初の4つは、内部コードで日付ピッカーと月ピッカーをどのように参照するか、そしてもちろんピッカーを手動で更新することで簡単に修正できます。これは、下部のインスタンス化の例で見ることができます。 5番目の問題は、datepicker関数にカスタムコードを追加することで解決できます。

注：次のmonthpickerスクリプトを使用して、通常のdatepickerの最初の3つの問題を修正する必要はありません。この投稿の下部にあるdatepickerインスタンス化スクリプトを使用してください。

ここで、monthpickersを使用して最後の問題を修正するには、datepickersとmonthpickersを分離する必要があります。数少ないjQuery-UIのmonthpickerアドオンの1つを入手できましたが、ローカリゼーションの柔軟性/能力に欠けているもの、アニメーションサポートに欠けているものがあります... datepicker-codeから「自分」を転がしてください！これにより、日付を表示することなく、datepickerのすべての機能を備えた完全に機能する月ピッカーが得られます。

monthpicker js-scriptとCSS-scriptに付随を指定しました。 jQuery-UI v1.11.1コード。これらのコードスニペットをそれぞれmonthpicker.jsとmonthpicker.cssの2つの新しいファイルにコピーするだけです。

元の日付ピッカーを複製して月ピッカーにするためのプロセスを次に示します

これらの作成方法が気にならない場合は、このセクションを過ぎて「ページに日付ピッカーと月ピッカーを追加しましょう！」行までスクロールします

日付ピッカーに関連するjquery-ui-1.11.1.jsのすべてのJavaScriptコードを取得し、新しいjsファイルに貼り付けて、次の文字列を置き換えました。

  • "datepicker" ==> "monthpicker"
  • 「Datepicker」==>「Monthpicker」
  • 「日付の選択」==>「月の選択」
  • 「日付ピッカー」==>「月ピッカー」

次に、ui-datepicker-calendar div全体を作成するforループの部分を削除しました（CSSを使用して他のソリューションが非表示にします）。これは、_generateHTML：関数（inst）にあります。

次の行を見つけます。

"</div><table class='ui-datepicker-calendar'><thead>" +

終了div-tagの後から（notを含む）までのすべての行をマークします。

drawMonth++;

何かを閉じる必要があるので、今は不幸になります。前のdivタグを閉じた後、これを追加します：

";

これで、コードはうまく結合されます。これが最終的な結果を示すコードスニペットです。

...other code...

calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
                (/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
                (/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
                this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
                    row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
                "</div>";
            drawMonth++;
            if (drawMonth > 11) {
                drawMonth = 0;
                drawYear++;
            }

...other code...

次に、datepickersに関連するコードをjquery-ui.cssから新しいCSSファイルにコピーして貼り付け、次の文字列を置き換えました。

  • "datepicker" ==> "monthpicker"

次に、ページに日付ピッカーと月ピッカーを追加します！

これらの次のJavaScriptコードスニペットは前述の問題なしで、ページ上の複数の日付ピッカーおよび/または月ピッカーで動作します！ '$（this）'を使用して一般的に修正されました。たくさん ：）

最初のスクリプトは通常の日付ピッカー用であり、2番目のスクリプトは「新しい」月ピッカー用です。

コメントアウトされた。afterは、入力フィールドをクリアするための要素を作成できますが、Paul Richardsの答えから盗まれました。

Monthpickerで「MM yy」形式を使用し、datepickerで「yy-mm-dd」形式を使用していますが、これはすべての形式と完全に互換性があるなので、自由に使用できますどちらでもかまいません。 「dateFormat」オプションを変更するだけです。標準オプション「showButtonPanel」、「showAnim」、および「yearRange」はもちろんオプションであり、希望に合わせてカスタマイズできます。

日付ピッカーを追加する

Datepickerのインスタンス化。これは90年前から現在までです。特にdefaultDate、minDate、maxDateオプションを設定する場合は、入力フィールドを正確に保つのに役立ちますが、そうでない場合は処理できます。選択したすべてのdateFormatで機能します。

        $('#MyDateTextBox').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            showMonthAfterYear: true,
            showWeek: true,
            showAnim: "drop",
            constrainInput: true,
            yearRange: "-90:",
            minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),

            onClose: function (dateText, inst) {
                // When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
                // updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
                // This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
                // and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the default date, because the date seems valid.
                    // We do not need to manually update the input-field, as datepicker has already done this automatically.
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    console.log("onClose: " + err);
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // Instead, we set the current date, as well as the value of the input-field, to the last selected (and
                    // accepted/validated) date from the datepicker, by getting its default date. This only works, because
                    // we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
                    // and 'onClose'.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            },

            beforeShow: function (input, inst) {
                // beforeShow is particularly irritating when initializing the input-field with a date-string.
                // The date-string will be parsed, and used to set the currently selected date in the datepicker.
                // BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
                // automatically updated, only the internal selected date, until you choose a new date (or, because
                // of our onClose function, whenever you click close or click outside the datepicker).
                // We want the input-field to always show the date that is currently chosen in our datepicker,
                // so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
                // the primary ones: invalid date-format; date is too early; date is too late.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the input-field, and the default date, because the date seems valid.
                    // We also manually update the input-field, as datepicker does not automatically do this when opened.
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // We want the same behavior when opening the datepicker, so we set the current date, as well as the value
                    // of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
                    // its default date. This only works, because we manually change the default date of the datepicker whenever
                    // a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            }
        })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

月ピッカーを追加する

Monthpickersを使用するページにmonthpicker.jsファイルとmonthpicker.cssファイルを含めます。

Monthpickerインスタンス化このmonthpickerから取得した値は、常に選択した月の最初の日です。現在の月から始まり、100年前から10年先までの範囲です。

    $('#MyMonthTextBox').monthpicker({
        dateFormat: 'MM yy',
        changeMonth: true,
        changeYear: true,
        showMonthAfterYear: true,
        showAnim: "drop",
        constrainInput: true,
        yearRange: "-100Y:+10Y",
        minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
        maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
        defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),

        // Monthpicker functions
        onClose: function (dateText, inst) {
            var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
            $(this).monthpicker('option', 'defaultDate', date);
            $(this).monthpicker('setDate', date);
        },

        beforeShow: function (input, inst) {
            if ($(this).monthpicker("getDate") !== null) {
                // Making sure that the date set is the first of the month.
                if($(this).monthpicker("getDate").getDate() !== 1){
                    var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
                    $(this).monthpicker('option', 'defaultDate', date);
                    $(this).monthpicker('setDate', date);
                }
            } else {
                // If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
                $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
            }
        },
        // Special monthpicker function!
        onChangeMonthYear: function (year, month, inst) {
            $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
        }
    })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

それだけです！これで、月ピッカーを作成するのに必要なすべてのことです。

これでjsfiddleを動作させることはできませんが、ASP.NET MVCプロジェクトで動作しています。ページに日付ピッカーを追加するために通常行うことを行い、おそらくセレクター（$（ "＃MyMonthTextBox"）を意味する）を自分に合ったものに変更することにより、上記のスクリプトを組み込みます。

これが誰かの助けになることを願っています。

いくつかの追加の日付と月のピッカー設定のためのペーストビンへのリンク：

  1. 月の最後の日に働くMonthpicker 。この月ピッカーから取得する日付は、常にその月の最後の日になります。

  2. 2つの協力する月ピッカー ; 「開始」はその月の最初に、「終了」はその月の最後に取り組んでいます。これらは両方とも互いに制限されているため、「開始」で選択した月の前にある「終了」で月を選択すると、「開始」が「終了」と同じ月に変更されます。およびその逆。オプション：「開始」の月を選択すると、「終了」の「minDate」がその月に設定されます。この機能を削除するには、onCloseで1行コメントアウトします（コメントを読んでください）。

  3. 2つの共同作業の日付ピッカー ;両方とも相互に制限されているため、「開始」で選択した日付より前の「終了」で日付を選択すると、「開始」が「終了」と同じ月に変更されます。およびその逆。オプション：「開始」の日付を選択すると、「終了」の「minDate」がその日付に設定されます。この機能を削除するには、onCloseで1行コメントアウトします（コメントを読んでください）。

3
Ultroman the Tacoman

誰かがそれを複数のカレンダーにも望むのであれば、この機能をjquery uiに追加するのはそれほど難しくありません。のための検索を絞り込み：

x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

これをxの前に追加する

var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}

検索する

<table class="ui-datepicker-calendar

そしてそれを

<table class="ui-datepicker-calendar'+accl+'

も検索

this._defaults={

それで置き換えます

this._defaults={justMonth:false,

cSSの場合は、使用する必要があります：

.ui-datepicker table.ui-datepicker-just_month{
    display: none;
}

その後、必要なdatepicker init関数に移動して、varを設定します。

$('#txt_month_chart_view').datepicker({
    changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        justMonth: true,
        create: function(input, inst) {
            $(".ui-datepicker table").addClass("badbad");
        },
        onClose: function(dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
});

ここで重要なのはjustMonth: trueです:)

3
prdatur

約について： http://www.mattkruse.com/javascript/calendarpopup/

月選択の例を選択してください

2
Roger

私は、受け入れられた答えにある種の困難を感じました、そして、他のどれも基本として最小の努力で使用することができませんでした。それで、私はそれが少なくとも最低限のJSコーディング/再利用性の基準を満たすまで、受け入れられた答えの最新版を微調整することにしました。

ここに Ben Koehler の受け入れられた答えの 3rd（最新）版 よりはるかにきれいな解決策）方法があります。

  • mm/yyフォーマットだけでなく、OPのMM yyを含む他のものと一緒に動作します。
  • ページ上の他のデートピッカーのカレンダーを隠しません。
  • グローバルなJSオブジェクトをdatestr、month、yearなどの変数で暗黙的に汚染しないでください。

見てみな：

$('.date-picker').datepicker({
    dateFormat: 'MM yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function (dateText, inst) {
        var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover');
        if (!isDonePressed)
            return;

        var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(),
            year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val();

        $(this).datepicker('setDate', new Date(year, month, 1)).change();
        $('.date-picker').focusout();
    },
    beforeShow: function (input, inst) {
        var $this = $(this),
            // For the simplicity we suppose the dateFormat will be always without the day part, so we
            // manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part
            dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'),
            date;

        try {
            date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val());
        } catch (ex) {
            return;
        }

        $this.datepicker('option', 'defaultDate', date);
        $this.datepicker('setDate', date);

        inst.dpDiv.addClass('datepicker-month-year');
    }
});

そして、他に必要なものは次のCSSです。

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

それでおしまい。上記が読者のために時間を節約することを願っています。

2
Alexander Abakumov

私は@ user1857829の回答と彼の「extend-jquery-like-a-pluginアプローチ」が好きでした。あなたが月や年を何らかの方法で変更したときにピッカーが実際にフィールドに日付を書くように、私はちょっとした修正をしました。私はそれを少し使用した後に私はその振る舞いが欲しいと思いました。

jQuery.fn.monthYearPicker = function(options) {
  options = $.extend({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    onChangeMonthYear: writeSelectedDate
  }, options);
  function writeSelectedDate(year, month, inst ){
   var thisFormat = jQuery(this).datepicker("option", "dateFormat");
   var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
   inst.input.val(d);
  }
  function hideDaysFromCalendar() {
    var thisCalendar = $(this);
    jQuery('.ui-datepicker-calendar').detach();
    // Also fix the click event on the Done button.
    jQuery('.ui-datepicker-close').unbind("click").click(function() {
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      thisCalendar.datepicker('setDate', new Date(year, month, 1));
      thisCalendar.datepicker("hide");
    });
  }
  jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}
2
stravanato

上記のBrianSのほぼ完璧な回答を少し改良しました。

  1. この場合、実際にはもう少し読みやすくなっていると思われるので、showに設定された値を正規表現しました（ただし、使用するフォーマットは若干異なります）。

  2. 私のクライアントはカレンダーを望んでいなかったので、他の日付ピッカーに影響を与えずにそれを行うためにon show/hideクラス追加を追加しました。日付ピッカーがフェードアウトしたときにテーブルがフラッシュバックするのを避けるために、クラスの削除はタイマー上で行われます。これは、IEでは非常に目立つようです。

編集：これで解決するために残された一つの問題は日付ピッカーを空にする方法がないということです - フィールドをクリアして離れてクリックするとそれは選択された日付で再入力されます。

EDIT2：私はうまくこれを解決することができなかった（すなわち入力の隣に別のクリアボタンを追加することなしに）、だからこれを使用することになった： https://github.com/thebrowser/jquery.ui.monthpicker - 誰かが標準的なUIを手に入れることができれば、それは素晴らしいことです。

    $('.typeof__monthpicker').datepicker({
        dateFormat: 'mm/yy',
        showButtonPanel:true,
        beforeShow: 
            function(input, dpicker)
            {                           
                if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val()))
                {
                    var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1);

                    $(this).datepicker('option', 'defaultDate', d);
                    $(this).datepicker('setDate', d);
                }

                $('#ui-datepicker-div').addClass('month_only');
            },
        onClose: 
            function(dt, dpicker)
            {
                setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250);

                var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

                $(this).datepicker('setDate', new Date(y, m, 1));
            }
    });

このスタイルルールも必要です。

#ui-datepicker-div.month_only .ui-datepicker-calendar {
display:none
}
2
Whelkaholism

私はここで提供されているさまざまな解決策を試してみました、そしてあなたが単にドロップダウンのカップルが欲しいならば、それらはうまくいきました。

ここで提案されている最良の（外観などの） 'picker'（ https://github.com/thebrowser/jquery.ui.monthpicker ）は、基本的に_generateHTMLが書き換えられたjquery-ui datepickerの古いバージョンのコピーです。 。しかし、現在のjquery-ui（1.10.2）ではうまく動作しなくなり、他の問題が発生しました（escで閉じることも、他のウィジェットを開くことで閉じることも、スタイルがハードコードされていることもあります）。

その月ピッカーを修正しようと試みるのではなく、最新の日付ピッカーを使って同じプロセスを再試行するのではなく、既存の日付ピッカーの関連部分を調べていきました。

これにはオーバーライドが含まれます。

  • _generateHTML（月ピッカーマークアップを作成するため）
  • parseDate（日の要素がないときは気に入らない）、
  • _selectDay（datepickerは.html（）を使用して日の値を取得します）

この質問は少し古く、すでによく回答されているので、これがどのように行われたかを示すための_selectDayオーバーライドのみを次に示します。

jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate;
jQuery.datepicker.parseDate = function (format, value, settings) {
    if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings);
    // "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component
    return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings);
};

述べたように、これは古い質問ですが、私はそれが有益なので代替の解決策でフィードバックを加えたいと思いました。

1
freedomn-m

私はそれが少し遅い応答であることを知っています、しかし私は2、3日前に同じ問題を抱えていました、そして私はNice＆smoothソリューションを思いついたのです。最初に私はこの素晴らしいデートピッカーを見つけました ここ

それでは、この例のCSSクラス（jquery.calendarPicker.css）を更新しました。

.calMonth {
  /*border-bottom: 1px dashed #666;
  padding-bottom: 5px;
  margin-bottom: 5px;*/
}

.calDay 
{
    display:none;
}

あなたが何かを変更するとき、プラグインはイベントDateChangedを起動します、それであなたが日をクリックしていないことは問題ではありません（そしてそれは年月のピッカーとしてNiceに合います）

それが役に立てば幸い！

1
pjnovas

月ピッカーも必要でした。私はヘッダーと年4月下の3行で単純なものを作りました。それをチェックしてください： jQueryを使った簡単な月年ピッカー 。

1
Tiago Coelho

今月のJQuery v 1.7.2を使って、私は次のようなJavaScriptを使っています。

$l("[id$=txtDtPicker]").monthpicker({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
});

0
Ricardo Appleton

Ben Koehlerのソリューションをありがとう。

しかし、私は日付選択の複数のインスタンスに問題があり、それらのいくつかは日の選択に必要でした。 Ben Koehlerのソリューション（編集3）は機能しますが、すべての場合において日の選択を隠します。これはこの問題を解決するアップデートです：

$('.date-picker').datepicker({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
        if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
            $(this).datepicker(
                'setDate',
                new Date(
                    $("#ui-datepicker-div .ui-datepicker-year :selected").val(),
                    $("#ui-datepicker-div .ui-datepicker-month :selected").val(),
                    1
                )
            ).trigger('change');
            $('.date-picker').focusout();
        }
        $("#ui-datepicker-div").removeClass("month_year_datepicker");
    },
    beforeShow : function(input, inst) {
        if((datestr = $(this).val()).length > 0) {
            year = datestr.substring(datestr.length-4, datestr.length);
            month = datestr.substring(0, 2);
            $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
            $(this).datepicker('setDate', new Date(year, month-1, 1));
            $("#ui-datepicker-div").addClass("month_year_datepicker");
        }
    }
});
0
dj3c1t