p：年と月のみのカレンダー

Question

同じページに2つの異なるプライムカレンダーが必要です。

年月が1つで、月と年のみのカレンダーが1つあります。

とカレンダーの下にはjavascriptとCSSを使用しています。 これはうまくいきますが、他のカレンダーにも影響があり、以下のCSSスタイルのために日付が表示されません。 特定のカレンダーにスタイルを適用する方法はありますか？

ジャバスクリプト： -

$(".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

ただ、このように、datepickersのこの種の別のマーカークラスを追加します。

$(".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