调整日期选择器

Question

我对JS知之甚少，但我被分配了一个任务，为页面添加一些功能。我需要在 birthDate 字段中添加一个日期选择器，但是一旦我将日期选择器功能添加到我的页面，验证（Jquery 验证）就会停止工作。这是代码：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page session="false"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-       demos.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">  </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    

<title>Parent Registration</title>
</head>
<body>

<!-- Everything inside should be the body -->
<tiles:insertDefinition name="defaultTemplate">
<tiles:putAttribute name="body">
....some code.........
        <div class="form-group" >
            <label for="birthDate" class="col-sm-3 control-label">Birthday</label>
            <div class="col-sm-6">
                <form:input type="text" class="form-control float_left" id="birthDate" name="birthDate" path="birthDate" placeholder="MM/DD/YYYY" required="true" />
            </div>
        </div>
    ...........some code...........

<script src="/resources/js/jquery.validate.min.js"></script>    
<script src="/resources/js/validation.js"></script>


<script>
jQuery.validator.addMethod(
        "dateUS",
        function(value, element) {
            var check = false;
            var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
            if( re.test(value)){
                var adata = value.split('/');
                var mm = parseInt(adata[0],10);
                var dd = parseInt(adata[1],10);
                var yyyy = parseInt(adata[2],10);                   
                var xdata = new Date(yyyy,mm-1,dd);
                var currentTime = new Date();
                var year = currentTime.getFullYear();
                if ( ( xdata.getFullYear() == yyyy) && ( xdata.getFullYear() <= year ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == dd ) )
                    check = true;
                else
                    check = false;
            } else
                check = false;
            return this.optional(element) || check;
        },
        "Please enter a date in the format MM/DD/YYYY"
    );

     jQuery.validator.addMethod("parentName", function(value, element) {
          return this.optional( element ) || /^(?=.*[a-zA-Z])([a-zA-Z.'-\s]+)$/.test( value );
        }, 'The name should contain at least one alphabet character, space, dot, hyphen, apostrophe.');


$(document).ready(function(){
    jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });

    $("#myform").validate({
        rules: {
            firstName: {
                  required: true,
                  parentName: true
                },
            middleName: {
                  parentName: true
                    },
            lastName: {
                  required: true,
                  parentName: true
                },
            noOfChildren: {
                  required: true,
                  digits: true
                },
            birthDate: {
                required: true,
                dateUS: true
            },
            email: {
                required: true,
                email:true  
            },
            confirmemail: {
                required: true,
                equalTo: "#email"   
            },
            confirmpassword: {
                required: true,
                equalTo: "#password"
            }
        },  
        errorPlacement: function (label, element) {
            if(element.is("input:checkbox")) {
                element.parent("label").after( label ); 
            } else if(element.is("input:radio")){
                element.parent("label" ).parent("div:first").after( label );
            }

            else {
                label.insertAfter( element ); 
            }

        },
        submitHandler: function(form) {
            form.submit();
        }
    });     
});

</script>

<link rel="stylesheet"  href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>

$(function() {
    $( "#birthDate" ).datepicker();
});
</script>


</tiles:putAttribute>
</tiles:insertDefinition>

</body>
</html>

Answer 1

您包含 jquery 1.10.2（底部）和 1.11.3（顶部）javascript 文件。这很可能是问题所在。提示：在 Firefox 中，您可以调试 javascript 并通过按 Ctrl+Shift+K 或通过 Extras->Web-Developer->Web-Console 查看错误消息。

调整日期选择器

Adjusting Datepicker

html

javascript

jquery

datepicker

jquery-ui-datepicker