Datepicker UI 显示在块中，右行远离 datepicker答案

【问题标题】：Datepicker UI display in block, the right line far apart from datepickerDatepicker UI 显示在块中，右行远离 datepicker
【发布时间】：2017-01-20 03:28:58
【问题描述】：

我发现当日期选择器显示在块中时，右外灰线显示远离日期选择器。

我确实尝试过添加到控件，但完全没有帮助。

谢谢

这里是示例代码。

<!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>

【问题讨论】：

你能检查我的答案吗？

标签： javascript jquery html datepicker

【解决方案1】：

默认情况下，日期选择器周围没有边框。

如果您愿意，可以通过定位.ui-datepicker-group 添加一个：

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

我创建了一个小提琴来展示这个here。

希望这会有所帮助！

【讨论】：

感谢您的建议。在您的小提琴中，您是否看到日期选择器周围没有的灰线（轮廓）？
是的 -- 灰线不存在，因为您在单个 datepicker() 中显示了多个日历月。您需要自己手动添加边框。但是，我刚刚将其更新为浅灰色而不是黑色:)
我已经编辑了我的帖子并附上了一张图片以避免任何混淆。感谢您的建议，但它不能解决我的问题。

【解决方案2】：

这里是修复。使用 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>

【讨论】：

【解决方案3】：

要改变日期选择器的边框试试这个。

.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>

【讨论】：