我是 CSS 和 JQuery 的新手。我有一个具有多种形式的 C# MVC 应用程序,我想使用 JQuery datepicker 控件。我看到的是日期选择器在那里,但很难看到并且被表单中的其他框遮住了。
我所能做的就是真实地描述它,因为该网站不允许我在这个问题中上传图片(我一直收到“服务不可用”错误)。当我在 View 中单击编辑器时,我可以看到日期选择器日历出现,但它基本上与它下面的其他表单框混在一起(以至于它遮住了部分日历)。
我的标记代码在这里:
@section Scripts
{
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/cssjqryUi")
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+5",
});
});
</script>
}
<div class="form-group">
<div class="col-md-10">
@Html.LabelFor(model =>
model.ExpiryDate,
"Expiry Date",
htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(m => m.ExpiryDate, new { @class = "datepicker"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.LabelFor(model =>
model.IssuanceFeeValue,
"Issuance Fee Value",
htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(m => m.IssuanceFeeValue)
@Html.ValidationMessageFor(m => m.IssuanceFeeValue, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.LabelFor(model =>
model.Tenor,
"Tenor",
htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(m => m.SelectedTenor, Model.TenorList)
@Html.ValidationMessageFor(m => m.SelectedTenor, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.LabelFor(model =>
model.Tranche,
"Tranche",
htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(m => m.SelectedTranche,Model.TrancheList)
</div>
</div>
我曾尝试修改 z-index,但没有任何效果。请注意我在这里遗漏了什么。
如有任何建议,我们将不胜感激。
更新
我有一张图片可以上传标记的外观:
最佳答案
几天前我遇到了完全相同的问题,这个问题是因为您可能缺少 jquery-ui.css 文件。
尝试将此文件添加到您的页面:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css
关于css - 如何将 JQuery DatePickers 移动到其他表单元素之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33424362/