javascript - p :calendar for only month and year

Question

我想在同一页面上有两个不同的 primefaces 日历。

一个日历包含日期，第二个日历仅包含月份和年份。

我使用了下面的 javascript 和 css 只有月份和年份的日历。 它工作正常，但其他日历也受到影响，并且由于以下 CSS 样式而无法显示日期。 有没有办法将样式应用于特定日历而不是全部？

javascript :-

$(".monthPicker").datepicker({    
        dateFormat: 'M yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        maxDate: $.now() ,

        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('M yy', new Date(year,month, 1)));
        }
    });
    $( ".monthPicker" ).datepicker( "option", "maxDate", new Date() );  
    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });

CSS:-

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

Answer 1

只需将另一个标记类附加到此类日期选择器，如下所示:

$(".monthPicker").datepicker({
        beforeShow : function(input, instance){
            instance.dpDiv.addClass("month-picker")
        }
});

.month-picker
{
  border: 2px solid pink
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<input type="text" class="monthPicker" />

现在您可以选择:

.ui-datepicker.month-picker