Question

我有一个视图（参见下面的代码），但是datetimepicker正在拉伸，现在要删除拉伸。可能这是由于引导表。需要一些指南以优雅的方式显示datetimepicker。

    <div class="container">
        <div class="clearfix"></div>
        @using (Html.BeginForm("Create", "DoctorPayment"))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

        <fieldset>
            @*<legend>DoctorPayment</legend>*@
            <div class="panel">
                <div class="panel-body">
                   ...
                    <div class="row">
                        <div class="col-lg-3 pull-left">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.PaymentDate)
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="editor-field">
                                @Html.EditorFor(model => model.PaymentDate)
                                @Html.ValidationMessageFor(model => model.PaymentDate)
                            </div>
                        </div>
                        <div class="col-lg-1">

                        </div>
                    </div>
                    <div style="margin-top: 5px"></div>
                   ....
                </div>
                <p>
                    <input type="submit" value="Create" />
                </p>
            </div>
        </fieldset>
        }
        <div>
            @Html.ActionLink("Back to List", "Index")
        </div>
        ....

         @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Styles.Render("~/Content/boostrap")
    @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:+0"
        });

    });

    $('#PaymentDate').datepicker({
        showButtonPanel: false,

        beforeShow: function () {
            $(".ui-datepicker").css('font-size', 12)
        }
    });

    $("#PaymentDate").click(function () {
        $("#ui-datepicker-div")
            // BTW, min-width is better:
            .css("min-width", $(this).outerWidth() + "px");

    });
</script>

}
        }
    </div>

我已经为它添加了引导程序。

Answer 1

我相信你可能已经用css覆盖了一些东西，或者添加了一些属性。

试试这个，看它是否有效。

$("#dropdown").closest("span.k-dropdown").width(400);

如果是，请尝试将自定义类添加到日期选择器中，以便您不会编辑所有下拉列表。

此外，更改字体大小将更改日期选择器的大小。

$('#PaymentDate').datepicker({
    showButtonPanel: false,
    beforeShow: function () {
        $(".ui-datepicker").css('font-size', 12)
    }
});

$("#PaymentDate").click(function () {
    $("#ui-datepicker-div")
        .css("max-width", $(this).outerWidth() + "px");
});

MVC datetimepicker被拉伸了

1 个答案: