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

Question

我是 CSS 和 JQuery 的新手。我有一个具有多种形式的 C# MVC 应用程序，我想使用 JQuery datepicker 控件。我看到的是日期选择器在那里，但很难看到并且被表单中的其他框遮住了。

我所能做的就是真实地描述它，因为该网站不允许我在这个问题中上传图片（我一直收到 "Service Unavailable" 错误）。当我在视图中单击编辑器时，我可以看到日期选择器日历出现，但它基本上与它下面的其他表单框混在一起（以至于它遮住了部分日历）。

我的标记代码在这里：

@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 移动到其他表单元素之前

How to move JQuery DatePickers ahead of other form elements

css

datepicker

jquery-ui-datepicker