开箱即用的日期时间选择器透明背景？答案

【问题标题】：Datetime picker transparent background out of the box?开箱即用的日期时间选择器透明背景？
【发布时间】：2011-11-28 03:39:05
【问题描述】：

这是开箱即用的 mvc3 股票级普通 jquery 行为？这是默认样式行为吗？我如何使它不透明？谢谢！

<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('.date').datepicker({ dateFormat: "dd/mm/yy" });
    });
</script>

@Html.TextBox("xxx", "", new { @class = "date" })

【问题讨论】：

你是否包含了 jQuery UI 样式表？
是的，谢谢 - 两种方法都可以：ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/…" rel="stylesheet" type="text/css" />

标签： asp.net-mvc-3 jquery-ui

【解决方案1】：

在样式选项卡中添加此代码

.ui-datepicker {  background: white; }

【讨论】：

【解决方案2】：

我发现文件在那里，但是 BundleConfig.cs 文件的文件名错误。文件名为“~/Content/themes/base/datepicker.css”，但 BundleConfig.cs 将文件列为“~/Content/themes/base/jquery.ui.datepicker.css”。

【讨论】：

【解决方案3】：

这样就可以了

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

【讨论】：

【解决方案4】：

只要给输入字段的z-index样式值一个更高的值，同时也让位置relative，即，

position: relative; z-index: 10000;

它会顺利运行。

【讨论】：

【解决方案5】：

我使用的是自定义主题，所以上述建议并不理想...

解决方法是为此部分添加背景颜色

/* DatePicker Container */
.ui-datepicker {
    width: 216px;
    height: auto;
    margin: 5px auto 0;
    font: 9pt Arial, sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    background-color: #FFF;
}

【讨论】：

【解决方案6】：

我的猜测是您确实缺少样式表或图像。

尝试添加 CSS 链接到

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css

【讨论】：

谢谢：以下任一工作都很好：ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/…" rel="stylesheet" type="text/css" />