Question

用户将从3个下拉列表中选择日期。提交选择后，脚本将比较用户选择的日期并将其与用户的当前日期进行比较。如果用户选择的日期大于当前日期，则会显示错误警报。如果日期已经发生，则它将显示在单独的窗口中。

我遇到的问题是两个日期之间的比较。我有一种感觉，问题在于为要比较的项目编写错误的路径。

我是初学者。任何帮助将不胜感激！

............................................... ............................................

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Date of Birth</title>

<script language= "javascript" type="text/javascript"> 

    function display() { 
        var d = new Date("mm/dd/yyyy");
        var currentMonth = d.getMonth();
        var currentDay = d.getDate(); 
        var currentYear = d.getFullYear();

        userMonth = Date.parse(document.getElementById("Month").value); 
        userDay = Date.parse(document.getElementById("Day").id);
        userYear = Date.parse(document.getElementById("Year").value); 

        if(userYear >= currentYear){ 
                if(userMonth === currentMonth){ 
                            if(userDay > currentDay){  
                                alert("Sorry, this date has not occurred yet. Please submit a new entry. ");
                                }
                            else {
                                DispWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=200,height=280') 
                                message = "<ul><li><b>Month: </b>" + document.dob.Month.value + "</li>"; 
                                message += "<li><b>Day: </b>" + document.dob.Day.value + "</li>"; 
                                message += "<li><b>Year: </b>" + document.dob.Year.value + " </li></ul>"; 
                                DispWin.document.write(message); 
                                }   
                }
                else if(userMonth > currentMonth) { 
                     alert("Sorry, this date has not occurred yet. Please submit a new entry. ");
                }  
                else { 
                    DispWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=200,height=280') 
                    message = "<ul><li><b>Month: </b>" + document.dob.Month.value + "</li>"; 
                    message += "<li><b>Day: </b>" + document.dob.Day.value + "</li>"; 
                    message += "<li><b>Year: </b>" + document.dob.Year.value + " </li></ul>"; 
                    DispWin.document.write(message);
                    }   
        }
        else { 
            DispWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=200,height=280') 
            message = "<ul><li><b>Month: </b>" + document.dob.Month.value + "</li>"; 
            message += "<li><b>Day: </b>" + document.dob.Day.value + "</li>"; 
            message += "<li><b>Year: </b>" + document.dob.Year.value + " </li></ul>"; 
            DispWin.document.write(message);

            }
    }

</script>
</head>

<body>
<p> Please enter the date of birth of the applicant?  <br /> 
<form action="" name="dob"> 
    <select style="width: 100px" id="Month" name="Month">
      <option>Month: </option>
      <option id="0">January</option> 
      <option id="1">Febuary</option>
      <option id="2">March</option>
      <option id="3">April</option> 
      <option id="4">May</option> 
      <option id="5">June</option> 
      <option id="6">July</option> 
      <option id="7">August</option> 
      <option id="8">September</option> 
      <option id="9">October</option> 
      <option id="10">November</option> 
      <option id="11">December</option>  
    </select>

    <select style="width: 80px" id="Day" name="Day"> 
        <option>Day: </option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
    </select>

    <select style="width: 80px" id="Year" name="Year"> 
        <option>Year: </option>
        <option>Before 1980</option>
        <option>1980</option> 
        <option>1981</option>
        <option>1982</option>
        <option>1983</option>
        <option>1984</option>
        <option>1985</option>
        <option>1986</option>
        <option>1987</option>
        <option>1988</option>
        <option>1989</option>
        <option>1990</option>
        <option>1991</option>
        <option>1992</option>
        <option>1993</option>
        <option>1994</option>
        <option>1995</option>
        <option>1996</option>
        <option>1997</option>
        <option>1998</option>
        <option>1999</option>
        <option>2000</option>
        <option>2001</option>
        <option>2002</option>
        <option>2003</option>
        <option>2004</option>
        <option>2005</option>
        <option>2006</option>
        <option>2007</option>
        <option>2008</option>
        <option>2009</option>
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
        <option>2014</option>
    </select>
    <br /><br /> 
    <input type="button" value="Submit" onclick="display();" /> 
</form>     
</body>
</html>

Answer 1

您可以直接比较Date对象。

JSFiddle

的JavaScript

var now = new Date(2013, 9, 7);
var nextYear = new Date(2014, 1, 1);

console.log (now > nextYear); // false
console.log (now < nextYear); // true

Answer 2

假设您已经从输入中解析出年，月和日期。年/月/日是整数。你可以这样做：

var now = new Date();
var inputDate = new Date(Date.parse(year+'-'+month+'-'+date)); //just make sure the parsed date is correct

然后你可以简单比较now和inputDate

Answer 3

你可以写这个简单的逻辑：

function display() { 
        var d = new Date();
        //clear all these values to 0 if you need to compare year,month, day only.
        d.setHours(0);
        d.setMinutes(0);
        d.setSeconds(0);
        d.setMiliseconds(0);

        //Use parseInt instead of Date.parse, remember to use var to avoid overriding the global object
        var userMonth = parseInt(document.getElementById("Month").value); 
        var userDay = parseInt(document.getElementById("Day").value);
        var userYear = parseInt(document.getElementById("Year").value); 
        var selectedDate = new Date(userYear,userMonth,userDay);

        //Use getTime to compare instead of comparing manually.
        if(selectedDate.getTime() >= d.getTime()){ 
                 alert("Sorry, this date has not occurred yet. Please submit a new   entry. ");
        }
        else {          
           DispWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=200,height=280') 
                                message = "<ul><li><b>Month: </b>" + document.dob.Month.value + "</li>"; 
                                message += "<li><b>Day: </b>" + document.dob.Day.value + "</li>"; 
                                message += "<li><b>Year: </b>" + document.dob.Year.value + " </li></ul>"; 
                                DispWin.document.write(message); 
                }
    }

并修复你的HTML：月：

<select style="width: 100px" id="Month" name="Month">
      <option>Month: </option>
      <option value="0">January</option> 
      <option value="1">Febuary</option>
      <option value="2">March</option>

天：

<select style="width: 80px" id="Day" name="Day"> 
        <option>Day: </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>

年份：

<select style="width: 80px" id="Year" name="Year"> 
        <option>Year: </option>
        <option>Before 1980</option>
        <option value="1980">1980</option> 
        <option value="1980">1981</option>

将value用于所有下拉列表。

如何比较JS中的两个日期？一个是用户选择的，一个是当前日期

3 个答案:

的JavaScript