NextDate应大于上一个日期验证脚本

时间:2016-04-06 10:52:15

标签: javascript

我正在尝试使用javascript进行简单的客户端验证 - 这将验证NextDate是否大于之前的日期。我正在调用方法onclick =“ValidateEndDate();”在我的提交按钮上。但似乎没有用。我需要了解我正在犯的错误。非常感谢你提前。 :)

<%-- 
Document   : ctsCaseDetailRegistration
Created on : Jan 16, 2016, 12:52:37 AM
Author     : nishad
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<!DOCTYPE html>
<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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>User Registration</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="css/prism.css">
    <link rel="stylesheet" href="css/chosen.css">
    <style type="text/css" media="all">
        /* fix rtl for demo */
        .chosen-rtl .chosen-drop { left: -9000px; }
    </style>

    <script src="/js/jquery.validate.js"></script> 
    <script>
        $.validator.setDefaults({
        submitHandler: function () {
            alert("submitted!");
        }
        });
        });</script>




    <style>
        div.dataTables_wrapper {
            width: 1100px;
            margin: 0 auto;
        }
    </style>

    <style>

        #leftContainer {
            float:left;
        }

        #rightContainer {
            float:none;
        }
    </style>


</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">SB Admin</a>
            </div>
            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <%=session.getAttribute("name")%> <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="LogOutController"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav side-nav">
                    <li class="active">
                        <a href="DashBoardController?action=listDairy"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
                    </li>                  
                    <li>
                        <a href="forms.html"><i class="fa fa-fw fa-edit"></i> Forms</a>
                    </li>                    
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Home <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="demo" class="collapse">
                            <li>
                                <a href="DashBoardController?action=listDairy">Dashboard</a>
                            </li>
                            <li>
                                <a href="#">Administration</a>
                            </li>
                            <li>
                                <a href="UserController?action=listUser">Users</a>
                            </li>

                        </ul>
                    </li>  
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#demo1"><i class="fa fa-fw fa-arrows-v"></i> Operations <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="demo1" class="collapse">
                            <li>
                                <a href="AdvocateController?action=listAdvocate">Advocates</a>
                            </li>
                            <li>
                                <a href="ClientController?action=listClient">Clients</a>

                            </li>
                            <li>
                                <a href="CourtController?action=listCourt">Courts</a>
                            </li>
                            <li>
                                <a href="DashBoardController?action=listDairy">Registrar</a>
                            </li>
                            <li>
                                <a href="#">Case Category</a>
                            </li>
                            <li>
                                <a href="CaseStageController?action=listCaseStage">Case Stage</a>
                            </li>
                            <li>
                                <a href="DocumentController?action=listDocument">Documents</a>
                            </li>
                        </ul>
                    </li> 
                    <li>
                        <a href="javascript:;" data-toggle="collapse" data-target="#demo2"><i class="fa fa-fw fa-arrows-v"></i> Case <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="demo2" class="collapse">
                            <li>
                                <a href="CaseMasterController?action=listCaseMaster">Case Updates</a>
                            </li>
                            <li>
                                <a href="CaseDetailController?action=listCaseDetail">Case Diary</a>
                            </li>
                            <li>
                                <a href="CaseDocumentController?action=listDocument">Case Documents</a>
                            </li>
                            <li>
                                <a href="#">Notice Information</a>
                            </li>
                            <li>
                                <a href="#">Allocate Cases</a>
                            </li>
                            <li>
                                <a href="#">Payments</a>
                            </li>                               
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>


        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Case Registration
                        </h1>
                        <ol class="breadcrumb">
                            <li>
                                <i class="fa fa-dashboard"></i>  <a href="index.jsp">Dashboard</a>
                            </li>
                            <li class="active">
                                <i class="fa fa-edit"></i>  Case Registration
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <div class="row">
                    <div class="col-lg-6">
                        <form role="form" method="POST" class="register" action='CaseDetailController' name="frmAddCaseDetail">
                            <div class="form-group">
                                <p>
                                    <select data-placeholder="Select Document Type..." name ="cad_FileName1" class="chosen-select" style="width:450px;" >
                                        <c:forEach items="${casemasters}" var="casemaster">                                                
                                            <option value="${casemaster.cad_ID}" ${casedetail.cad_ID == casemaster.cad_ID ? 'selected' : ''}>${casemaster.cad_CaseNo} || ${casemaster.cad_FileName}</option>
                                        </c:forEach>
                                    </select>  
                                    <button type="submit" name="GetDetails" value="GetDetails" class="btn btn-primary">Get Details</button>
                                    <button type="submit" name="AddCase" value="AddCase" class="btn btn-primary">Add Case</button>

                                </p>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="panel panel-success" style="width: 1000px;">
                                            <div class="panel-heading" style="width: 1000px;">
                                                <h3 class="panel-title" style="width: 1000px;"><i class="fa fa-money fa-fw"></i> Case History</h3>
                                            </div>

                                            <table class="table table-bordered table-hover table-striped" id="example" class="display" cellspacing="0" width="100%">
                                                <thead>
                                                    <tr>

                                                        <th>Update</th>
                                                        <th>Delete</th>
                                                        <th>CaseID</th>
                                                        <th>CaseDetailID</th>                                                                                                                                           
                                                        <th>Previous Date(s)</th>                                                             
                                                        <th>Stage</th>
                                                        <th>Judge</th>                    
                                                        <th>Rojnama</th>                                                                              
                                                        <th>Court</th>                                           

                                                    </tr>
                                                </thead>

                                                <tbody>
                                                    <c:forEach items="${casedetails}" var="casedetail">
                                                        <tr>

                                                            <td><a href="CaseDetailController?action=edit&CaseDetailID=<c:out value="${casedetail.ccd_ID}"/>">Edit</a></td>
                                                            <td><a href="CaseDetailController?action=delete&CaseDetailID=<c:out value="${casedetail.ccd_ID}"/>">Delete</a></td>
                                                            <td><c:out value="${casedetail.cad_ID}" /></td>
                                                            <td><c:out value="${casedetail.ccd_ID}" /></td>

                                                            <td><fmt:formatDate value="${casedetail.ccd_CurrentDate}" pattern="dd/MM/yyyy" /></td>                                              
                                                            <td><c:out value="${casedetail.ccd_Stage}" /></td>
                                                            <td><c:out value="${casedetail.ccd_Judge}" /></td>
                                                            <td><c:out value="${casedetail.ccd_Rojnama}" /></td>                                                                
                                                            <td><c:out value="${casedetail.ccd_Court}" /></td>                                                                
                                                        </tr>
                                                    </c:forEach>
                                                </tbody>
                                            </table>
                                        </div>                                           
                                    </div>
                                </div>

                                <p>
                                    <input type="text" readonly="readonly"  class="form-control" placeholder="Case ID" name="cad_id" value="<c:out value="${casedetail.cad_ID}" />" /> 
                                </p> 
                                <p>
                                    <input type="text" readonly="readonly"  class="form-control" placeholder="Registration No" name="cad_RegNo" value="<c:out value="${casedetail.cad_RegNo}" />" /> 
                                </p>
                                <p>                                   
                                <p>
                                    <input type="text" readonly="readonly"  class="form-control" placeholder="Case Number" name="cad_CaseNo" value="<c:out value="${casedetail.cad_CaseNo}" />" /> 
                                </p>
                                <p>
                                    <input type="text" readonly="readonly"  class="form-control" placeholder="File Number" name="cad_FileNo" value="<c:out value="${casedetail.cad_FileNo}" />" /> 
                                </p>
                                <p>
                                    <input type="text" readonly="readonly"  class="form-control" placeholder="File Name" name="cad_FileName" value="<c:out value="${casedetail.cad_FileName}" />" />                                             
                                </p>
                                <p>
                                    <input type="hidden" readonly="readonly" class="form-control" placeholder="Previous Date" name="ccd_PreviousDate" value="<fmt:formatDate value="${casedetail.ccd_CurrentDate}" pattern="dd/MM/yyyy" />" /> 
                                </p>  
                                <p>
                                    <input type="text"  class="form-control" placeholder= "<fmt:formatDate value="${casedetail.ccd_CurrentDate}" pattern="dd/MM/yyyy" />" name="ccd_CurrentDate" /> 
                                </p>                                    
                                <p>
                                    <input type="text"  class="form-control" placeholder="Stage" name="ccd_Stage" value="<c:out value="${casedetail.ccd_Stage}" />"  />                                             
                                </p>    
                                <p>                                        
                                    <input type="text"  class="form-control" placeholder="Judge" name="ccd_Judge" value="<c:out value="${casedetail.ccd_Judge}" />" /> 
                                </p>
                                <p>
                                    <input type="text"  class="form-control" placeholder="Rojnama" name="ccd_Rojnama" value="<c:out value="${casedetail.ccd_Rojnama}" />"  /> 
                                </p>
                                <p>
                                    <input type="text"  class="form-control" placeholder="Judgment" name="ccd_Judgment" value="<c:out value="${casedetail.ccd_Judgment}" />" />                                             
                                </p>
                                <p>
                                    <input type="text"  class="form-control" placeholder="Remarks" name="ccd_Remarks" value="<c:out value="${casedetail.ccd_Remarks}" />" /> 
                                </p>
                                <p>
                                    <input type="text"  class="form-control" placeholder="Court" name="ccd_Court" value="<c:out value="${casedetail.ccd_Court}" />" /> 
                                </p>



                                <input type="hidden"  class="form-control" name="ccd_DeleteFlag" value="<c:out value="${casedetail.ccd_DeleteFlag}" />" /> 
                                <input type="hidden"  class="form-control" name="ccd_ActiveFlag" value="<c:out value="true" />" /> 
                                <input type="hidden"  class="form-control" name="ccd_CreateDate" value="<fmt:formatDate pattern="dd/MM/yyyy" value="<%= new java.util.Date()%>" />" />                
                                <input type="hidden"  class="form-control" name="ccd_CreateUser" value="<c:out value="1" />" />                 
                                <input type="hidden"  class="form-control" name="ccd_ModifyDate" value="<fmt:formatDate pattern="dd/MM/yyyy" value="<%= new java.util.Date()%>" />" />                
                                <input type="hidden"  class="form-control" name="ccd_ModifyUser" value="<c:out value="1" />" /> 

                                <p>
                                    <button type="submit" name="SaveDetails" value="SaveDetails" class="btn btn-primary" onclick="ValidateEndDate();">Submit</button>
                                    <button type="reset" class="btn btn-default">Reset Button</button>
                                </p>
                            </div>

                               <script>

                                    function ValidateEndDate() {
                                       var StartDate= document.getElementById('ccd_PreviousDate').value;
                                        var EndDate= document.getElementById('ccd_CurrentDate').value;
                                        var eDate = new Date(EndDate);
                                        var sDate = new Date(StartDate);
                                        if(StartDate!= '' && StartDate!= '' && sDate> eDate)
                                        {
                                                alert("Please ensure that the Next Date is greater than Previous Date");
                                                return false;
                                        }
                                    }
                                </script>
                        </form>

                    </div>




                </div>
                <!-- /.row -->

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

        <!-- /#wrapper -->

        <!-- jQuery -->
        <script src="js/jquery.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        <script src="js/chosen.jquery.js" type="text/javascript"></script>
        <script src="js/prism.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        var config = {
            '.chosen-select': {},
            '.chosen-select-deselect': {allow_single_deselect: true},
            '.chosen-select-no-single': {disable_search_threshold: 10},
            '.chosen-select-no-results': {no_results_text: 'Oops, nothing found!'},
            '.chosen-select-width': {width: "95%"}
        }
        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
        </script>
</body>

3 个答案:

答案 0 :(得分:1)

我复制了你的代码并稍微改了一下,但是在我的节点命令提示符下运行它,它工作正常,这就是它的外观

    function ValidateEndDate() {

            var d = new Date();
            var EndDate= d;
            d.setTime(d.getTime() + 86400000);

          var StartDate= new Date();
          var sDate = new Date(StartDate);
          var eDate = new Date(EndDate);


             console.log("Start Date : "  + StartDate);            
             console.log("End Date : " + d);

              if(StartDate!= '' && EndDate!= '' && sDate> eDate)
                  {
                   console.log("Please ensure that the end Date is greater than Previous Date");
                   return false;
                  }

                  if(StartDate!= '' && EndDate!= '' && sDate < eDate)
                  {
                   console.log("Please ensure that the Start Date is greater than Previous Date");
                   return false;
                  }
     }
  ValidateEndDate();

我不确定你为什么不比较EndDate。我也纠正过了。希望它有所帮助。

答案 1 :(得分:0)

此比较取决于输入日期的格式。假设标准格式(YYYY-MM-DD),您可以这样做:

function ValidateEndDate() {
  var StartDate = document.getElementById('ccd_PreviousDate').value;
  var EndDate = document.getElementById('ccd_CurrentDate').value;
  var eDate = new Date(EndDate);
  var sDate = new Date(StartDate);
  if (StartDate != '' && StartDate != '' && sDate.getTime() > eDate.getTime()) {
    alert("Please ensure that the Next Date is greater than Previous Date");
    return false;
  }
}

使用.getTime()获取时间戳,然后进行比较。

答案 2 :(得分:0)

var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());

if (startDate < endDate){
    alert("Please ensure that the Next Date is greater than Previous Date");
}