2017-03-11 8 views
0

月を表示しているjquery uiを使用してdatepickerを作成しましたが、選択した月をリストしたくないとは思わなかったので、this datepickerのようにリストします。あなたが気にしない場合は、あなたがあなたのページにいくつかのCSSを追加することができ、リストjquery ui datepickerにのみ1ヶ月表示

$(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('yy-mm', new Date(year, month, 1))); 
 
     } 
 
    }); 
 

 
    $(".monthPicker").focus(function() { 
 
     $(".ui-datepicker-calendar").hide(); 
 
     $("#ui-datepicker-div").position({ 
 
      my: "center top", 
 
      at: "center bottom", 
 
      of: $(this) 
 
     });  
 
    }); 
 
    
 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

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

+0

ブートストラップdatepickerを使用することができますhttp://jsfiddle.net/9f2joozv/ –

答えて

0

が表示されます場合はクリックしてください:

.ui-datepicker-year{ 
    display:none !important; 
} 

必要に応じて、日付ピッカーの出力をあらかじめ処理します。

+0

私はちょうどスタイリングについて話しています –

関連する問題