MVC datetimepicker拉伸

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

如果是这样，请尝试将自定义类添加到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"); 
});