日付ピッカーのUI表示がブロック内にあり、datepickerから遠く離れた右の行

日付ピッカーがブロックに表示されているとき、右のグレイラインがdatepickerから離れて表示されることがわかりました。日付ピッカーのUI表示がブロック内にあり、datepickerから遠く離れた右の行

私はコントロールに追加しようとしましたが、まったく助けませんでした。

ありがとうございました

ここにサンプルコードがあります。

<!DOCTYPE html> 
<html> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script> 
    $(document).ready(function() { 

     $("#datepicker").datepicker({ 
      dateFormat: "dd M yy", 
      numberOfMonths: [2,1]}); 

    }); 
</script> 

<body> 
    <div id="datepicker"></div> 
</body> 
</html>

出典

2017-01-20 HenryLoke

私の答えを確認してください。 – purvik7373

Datepickersは、デフォルトではそれらの周りの境界線を持っていません。

あなたが.ui-datepicker-groupを標的にすることによりたい場合は、1を追加することができます。

.ui-datepicker-group { 
    border: 1px solid #D3D3D3; 
}

私はこのhereを展示フィドルを作成しました。

希望すると便利です。

出典

2017-01-20 03:32:50

ありがとうございました。あなたのフィドルでは、日付ピッカーの周りにはない灰色の線（アウトライン）が見えましたか？ – HenryLoke

はい - 1つの 'datepicker（）'に複数の暦月を表示しているため、灰色の行はありません。手動で枠線を追加する必要があります。しかし、私はちょうど黒の代わりに明るい灰色にこれを更新しました:) –

私は自分の投稿を編集し、混乱を避けるために画像を添付しています。提案していただきありがとうございますが、問題は解決しません。 – HenryLoke

datepickerのボーダーを変更するには、これを試してください。ここで

.ui-datepicker-group { 
 
    border: 1px solid #555; 
 
    margin-bottom: 5px; 
 
}

<html> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 

 
     $("#datepicker").datepicker({ 
 
      dateFormat: "dd M yy", 
 
      numberOfMonths: [2,1]}); 
 

 
    }); 
 
</script> 
 

 
<body> 
 
    <div id="datepicker"></div> 
 
</body> 
 
</html>

出典

2017-01-20 05:03:39 purvik7373

修正です。 CSSの枠線と幅を使用するとそれが解決されます。

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script> 
    $(document).ready(function() { 

     $("#datepicker").datepicker({ 
      dateFormat: "dd M yy", 
      numberOfMonths: [2,1]}); 

    }); 
</script> 
<style> 

    #datepicker{/*USE THIS CSS STYLE THIS WILL SOLVE THE PROBLEM*/ 
     border:1px solid #999; 
     width:195px; 
    } 
</style> 
</head> 
<body> 
    <div id="datepicker"></div> 
</body> 
</html>

出典

2017-01-20 06:31:47

日付ピッカーのUI表示がブロック内にあり、datepickerから遠く離れた右の行

答えて

関連する問題