日期選擇器被顯示出來，但壓光在它被扭曲

Question

這是我的HTML和JS：

<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">       
<label runat="server" for="DOB"></label> 
<input class="form-control" type="text" id="DOB" name="DOB" /> 
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>      
    </span> 
    </div> 

    $("#datepicker").datepicker({ 
    autoclose: true, 
    todayHighlight: true, 
}).datepicker('update', new Date()).datepicker("setDate", null); 

截圖扭曲的日期選擇器的

這是工作非常早期的，但我之前增加了一些其他jQuery代碼這個日期選擇器代碼，它停止工作。

Answer 1

$(document).ready(function() { 


$('#registertn').validate({ 
    rules: { 
     firstname: "required", 
     lastname: "required", 
     instemail: { 
      required: true, 
      email: true 
     }, 

     rollno: { 
      required: true, 
      number: true 
     }, 

     program: { 
      required: true 
     }, 

     specializn: { 
      required: true 
     }, 

     ffirstname: "required", 
     flastname: "required", 
     mfirstname: "required", 
     mlastname: "required", 

     Gender: { 
      required: true 
     }, 

     DOB: "required", 

     category: { 
      required: true 
     }, 

     religion: { 
      required: true 
     }, 

     address: "required", 
     area: "required", 
     state: "required", 
     country: "required", 

     pin: { 
      required: true, 
      number: true, 
      maxlength: 6, 
      minlength: 6 
     }, 

     fmob: { 
      required: true, 
      number: true, 
      maxlength: 10, 
      minlength: 10 
     }, 
     mob: { 
      required: true, 
      number: true, 
      maxlength: 10, 
      minlength: 10 
     }, 

     peid: { 
      required: true, 
      email: true 
     } 
    }, 

    errorPlacement: function (error, element) { 
     if (element.is(":radio")) { 
      error.insertAfter('#radio'); 
     } 
     else { 
      error.insertAfter(element); 
     } 
    }, 



    messages: { 
     firstname: "First Name field cannot be blank!", 
     lastname: "Last Name field cannot be blank!", 
     ffirstname: "First Name field cannot be blank!", 
     flastname: "Last Name field cannot be blank!", 
     mfirstname: "First Name field cannot be blank!", 
     mlastname: "Last Name field cannot be blank!", 
     rollno: { 
      required: "Roll Number/ID field cannot be blank!", 
      number: "Please enter a valid Roll Number!" 
     }, 

     instemail: 
      { 
       required: "Institute Email field cannot be empty!", 
       email: "Please enter a valid email address!" 
      }, 

     program: "Please select a Program!", 
     specializn: "Please select a Specialization!", 
     Gender: "Please select your Gender!", 
     DOB: "Please enter your Date of Birth!", 
     category: "Please select a Category!", 
     religion: "Please select a Religion!", 
     address: "Address field cannot be blank!", 
     area: "Home City field cannot be blank!", 
     state: "Home State field cannot be blank!", 
     country: "Home Country field cannot be blank!", 

     pin: { 
      required: "Home Pin Code field cannot be blank!", 
      number: "Please enter a valid Pin Code!", 
      maxlength: "Maximum number count should not exceed 6!", 
      minlength: "Minimum number count should be 6!" 
     }, 

     fmob: { 
      required: "Please provide your Father's mobile number!", 
      number: "Mobile number should only consists of numbers!", 
      maxlength: "Maximum number count should not exceed 10!", 
      minlength: "Minimum number count should be 10!" 
     }, 

     mob: { 
      required: "Mobile field cannot be blank!", 
      number: "Mobile number should only consists of numbers!", 
      maxlength: "Maximum number count should not exceed 10!", 
      minlength: "Minimum number count should be 10!" 
     }, 

     peid: { 
      required: "Personal Email field cannot be empty!", 
      email: "Please enter a valid email address!" 
     } 
    }, 


    submitHandler: function(form) { 

     //$('#submit').click(function() {  
      var jsondata = {}; 

      jsondata.RollNo = $('#rollno').val(); 
      jsondata.InstituteEmail = $('#instemail').val(); 
      jsondata.Program = $('#program').val(); 
      jsondata.Specialization = $('#specializn').val(); 
      jsondata.StudentFName = $('#firstname').val(); 
      jsondata.StudentMName = $('#midname').val(); 
      jsondata.StudentLName = $('#lastname').val(); 
      jsondata.FatherFName = $('#ffirstname').val(); 
      jsondata.FatherMName = $('#fmidname').val(); 
      jsondata.FatherLName = $('#flastname').val(); 
      jsondata.MotherFName = $('#mfirstname').val(); 
      jsondata.MotherMName = $('#mmidname').val(); 
      jsondata.MotherLName = $('#mlastname').val(); 
      jsondata.Gender = $("input[type='radio'][name='Gender']:checked").val(); 
      jsondata.DOB = $('#DOB').val(); 
      jsondata.Category = $('#category').val(); 
      jsondata.Religion = $('#religion').val(); 
      jsondata.PhysicalyHandicap = $('#ph').val(); 
      jsondata.ColorBlindness = $('#cb').val(); 
      jsondata.BloodGroup = $('#bg').val(); 
      jsondata.ArmedForce = $('#af').val(); 
      jsondata.Address = $('#address').val(); 
      jsondata.HomeCity = $('#area').val(); 
      jsondata.HomeState = $('#state').val(); 
      jsondata.HomePin = $('#pin').val(); 
      jsondata.HomeCountry = $('#country').val(); 
      jsondata.FatherMobile = $('#fmob').val(); 
      jsondata.StudentMobile = $('#mob').val(); 
      jsondata.PersonalEmail = $('#peid').val(); 


      $.ajax({    
       type: "POST", 
       contentType: "application/json; charset=utf-8",      
       url: "WebForm1.aspx/InsertData", 
       datatype: "json", 
       async: false, 
       data:'{ud:' +JSON.stringify(jsondata)+'}', 
       success: function (Record) {       
        if (Record.d == true) { 

         $('#Result').text("Your Record insert").css('background-color','green'); 
        } 
        else { 

         $('#Result').text("Your Record Not Insert").css('background-color','red'); 
        } 

       }, 
       Error: function (textMsg) { 

        $('#Result').text("Error: " + Error); 
       } 
      }); 
    } 
}); 

$("#datepicker").datepicker({ 
    autoclose: true, 
    todayHighlight: true, 
}).datepicker('update', new Date()).datepicker("setDate", null); 

}); 

這個我完全jQuery代碼