MVC datetimepicker is stretched - css

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");
});