MVC datetimepicker is stretched

Question

I have a view (refer below code) , but the datetimepicker is stretching , now to removed the stretching. May be this is due to the bootstrap table . Need some guide to display the datetimepicker in the elegant way.

    <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>

I have included bootstrap to it.

Answer 1

I believe that you might have overwritten something in css, or added some atributes.

Try this and see if it works.

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

If it does, try to add a custom class to the datepicker so that you don't edit all dropdowns.

Also, changing the font size will change the size of the datepicker.

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

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