MVC datetimepicker ist gestreckt

Question

Ich habe eine Ansicht (siehe unten Code), aber der datetimepicker dehnt sich, jetzt, um die Dehnung zu entfernen. Möglicherweise liegt das an der Bootstrap-Tabelle. Brauchen Sie eine Anleitung, um den Datetimepicker auf elegante Weise anzuzeigen.

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

Ich habe es enthalten Bootstrap.

Answer 1

Ich glaube, dass Sie etwas in CSS überschrieben haben könnten, oder einige Attribute hinzugefügt.

Versuchen Sie dies und sehen Sie, ob es funktioniert.

Wenn dies der Fall ist, versuchen Sie, dem Datepicker eine benutzerdefinierte Klasse hinzuzufügen, damit Sie nicht alle Dropdownlisten bearbeiten.

Wenn Sie die Schriftgröße ändern, ändert sich auch die Größe des Datumsspeichers.

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

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