7

このようなJquery UIの日付ピッカーがあります。

ここに画像の説明を入力
日付ピッカーからは月と年しか選択できません。
コード：

$('#datepicker').datepicker({
     changeMonth: true,
     changeYear: true,
     showButtonPanel: true,
     dateFormat: 'M yy',
     maxDate: '0',                      
     onClose: function() {
          var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
          var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
          $(this).datepicker('setDate', new Date(iYear, iMonth, 1));                              
    },
     beforeShow: function(input, inst) {
          $(inst.dpDiv).addClass('calendar-off');                             
     }
});

選択できる最大の月と年を設定 maxDate: '0'すると、現在の月と現在の年になります。
jqueryを使って月と年の最大値を設定したいです。日付、月、年の通常の日付ピッカーの場合、最初にこのmaxDate: '0'コードを削除し、次のコードを使用して最大日付を設定しました

var maximumDate = '07-15-2013';
$("#datepicker" ).datepicker( "option", "maxDate", maximumDate);

月と年のピッカーで最大日付を設定するにはどうすればよいですか? この場合、上記のコードは機能しません。ご意見をお聞かせください。

4

2 に答える 2

8

次のコードを試してみました。私にとってはうまくいきます。 

    var date = new Date("2013-07-15");
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $("#datepicker" ).datepicker( "option", "maxDate", new Date(currentYear, currentMonth, currentDate));

私が作成したフィドルの例: FIDDLE

于 2013-07-15T06:24:28.077 に答える
4

これを試して、月と年の日付ピッカーから最大/最小日付を選択してください。

完全なソリューションについては、このフィドルを参照してください: Month/Year Picker @ 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; }
于 2013-07-15T06:43:00.623 に答える