jQuery ui datepickerの幅をカスタマイズする

Question

jquery ui datepickerを使用して、次のコードスニペットの助けを借りて誰かが入力をクリックしたときにdatepickerを表示しています。

コード：

$('#datepicker').datepicker(); 

JSFIDDLE

私はこれを持っている問題は、カレンダーが前の入力の全幅として来るべきではないということです。

私はインターネットを検索し、いくつかのコードスニペットを使用しましたが、何も機能しませんでした。

私のアプローチ：

$('#datepicker').datepicker({ 
    beforeShow: function(input, inst) 
    { 
     inst.dpDiv.css({ width: input.width + 'px'}); 
    } 
}); 

はフィドルでは、入力の幅は500pxなどとして固定されているので、日付ピッカー幅も500pxなど幅広いする必要があります。そしてdatepickerの幅は、この入力のどの幅にも適応する必要があります。

Answer 1

あなたは以下のCSSを使用したカレンダーのサイズを調整することができます

$('#datepicker').datepicker();

#datepicker, 
 
.ui-datepicker, 
 
.ui-datepicker-header, 
 
.ui-datepicker-calendar { 
 
    width: 500px; 
 
} 
 
.ui-datepicker-calendar { 
 
    background: dodgerblue; 
 
} 
 
.ui-datepicker-header { 
 
    text-align: center; 
 
    color: #fff; 
 
    background: #000; 
 
} 
 
.ui-datepicker-prev { 
 
    float: left; 
 
} 
 
.ui-datepicker-next { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<input type="text" id="datepicker">

Answer 2

日付ピッカーショーの機能は残念ながら幅パラメータ、「beforeShow」コールバックでも、1セットをリセットします。これを修正するために、setTimeout（）によってJSコールスタックに表示した後に移動することができます。

$('#datepicker').datepicker({ 
    beforeShow: function (input, inst) { 
     setTimeout(function(){ 
      inst.dpDiv.outerWidth($(input).outerWidth()); 
     },0); 
    }, 
})