jquery - Datepicker 正在显示，但其中的日历被扭曲

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