Question

我是CSS和JQuery的新手。我有一个C＃MVC应用程序，有几种形式，我想使用JQuery datepicker控件。我所看到的是，日期选择器就在那里，但很难看到并被表格中的其他框遮挡。

我所能做的就是描述它，因为该网站不允许我在这个问题上传图像（我一直得到一个＆＃34;服务不可用＆＃34;错误）。当我点击视图中的编辑器时，我可以看到日期选择器日历出现，但它基本上是用它下面的其他表格框混淆了（到它模糊日历部分的位置）。

我的标记代码在这里：

@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，但什么也没做。请注意我在这里缺少的东西。

非常感谢任何建议。

更新

我有一张图片，我可以上传标记的样子：

Answer 1

几天前我遇到了同样的问题，这个问题是因为你可能错过了一个jquery-ui.css文件。

尝试将此文件添加到您的页面：

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

如何在其他表单元素之前移动JQuery DatePickers

1 个答案: