调整Datepicker

时间:2016-02-18 07:47:33

标签: javascript jquery html datepicker jquery-ui-datepicker

我对JS知之甚少,但我被分配了一项任务来向页面添加一些功能。我需要在<%@ 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> 字段中添加一个日期选择器,但是一旦我添加了datepicker函数来填充我的页面,验证(Jquery验证)就会停止工作。 这是代码:

<div>

1 个答案:

答案 0 :(得分:0)

你包括jquery 1.10.2(在底部)和1.11.3(顶部)javascript文件。这很可能是问题所在。 Tipp:在Firefox中,您可以通过按Ctrl + Shift + K或通过Extras-&gt; Web-Developer-&gt; Web-Console来调试您的javascript并查看错误消息。