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

p：仅适用于月份和年份的日历

1 个答案: