CODEWITHSUNDEEP
javascript
user2225542
user2225542

Reputation: 1

How to calculate current date with date selected in javascript?

I am trying to work out how old a user is based on the selection statement.

I cannot calculate the current (year/month/day/hour/minute) from the user input.

The intent is that the user will see 3 box to select [Month] [Day] and [Year] of birth.

Based on the answer I want to calculate the current date minus the date selected by the user.

For some reason I can't make the logic work. I can hard code it, but I want it to be logical.

Here is my code:

<!DOCTYPE>
<html>
<title>Validate Credit Cards</title>
<head>
    <script type="text/javascript">
    /* <![CDATA[ */
    /* ]]> */
    </script>
</head>
<body>
    <form action="">
            <h1>Age Calculator</h1>
            <p>Birth Date:
                <select name="month">
                    <option>Month</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>
                </select>
                <select 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 name="year">
                <option>Year</option>
                <option>1950</option>
                <option>1951</option>
                <option>1952</option>
                <option>1953</option>
                <option>1954</option>
                <option>1955</option>
                <option>1956</option>
                <option>1957</option>
                <option>1958</option>
                <option>1959</option>
                <option>1960</option>
                <option>1961</option>
                <option>1962</option>
                <option>1963</option>
                <option>1964</option>
                <option>1965</option>
                <option>1966</option>
                <option>1967</option>
                <option>1968</option>
                <option>1969</option>
                <option>1970</option>
                <option>1971</option>
                <option>1972</option>
                <option>1973</option>
                <option>1974</option>
                <option>1975</option>
                <option>1976</option>
                <option>1977</option>
                <option>1978</option>
                <option>1979</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>
            </select>               
        </p>
        <p><input type="button" value="Calculate" onclick="calcAge()" /></p>
        <h2>You have lived</h2>
        <p><input type="text" name="yearCalc" size="7" /> years</p>
        <p><input type="text" name="monthCalc" size="7" /> months</p>
        <p><input type="text" name="dayCalc" size="7" /> days</p>
        <p><input type="text" name="hourCalc" size="7" /> hours</p>
        <p><input type="text" name="minCalc" size="7" /> minutes</p>
    </form> 
<script>    
    function calcAge()
        {
        var d1 = new Date();
        var month = document.forms[0].month.value;
        var day = document.forms[0].day.value;
        var year = document.forms[0].year.value;
        var yearCalc = 2012 - year;
        var monthCalc = parseInt(month);
        var dayCalc = Math.abs(d1 - parseInt(day));
        var hourCalc = Math.round();
        var minCalc = Math.round();
        document.forms[0].yearCalc.value =  yearCalc.toLocaleString();
        document.forms[0].monthCalc.value =  monthCalc.toLocaleString();
        document.forms[0].dayCalc.value =  dayCalc.toLocaleString();
        document.forms[0].hourCalc.value =  hourCalc.toLocaleString();
        document.forms[0].minCalc.value =  minCalc.toLocaleString();
        }
</script>

Upvotes: 0

Views: 526

Answers (1)

jropella
jropella

Reputation: 589

The Date object (http://www.w3schools.com/jsref/jsref_obj_date.asp) has some nice functions prepackaged, more notably the getTime() function which returns Date object's time in terms of milliseconds since 1970, which is basically the same as Unix time except for the units (Unix time is seconds). To determine age, all we need to do is store the user's selections as a Date object and then take the difference between now and whatever the user put in.

var d1 = new Date();
d1.setMonth(document.forms[0].month.value);
d1.setDay(document.forms[0].day.value);
d1.setYear(document.forms[0].year.value);
var now = new Date();
var ageInMs = now.getTime() - d1.getTime();
var ageInYears = ageInMs / 86400000 / 365;

Since the getTime() function returns milliseconds, we need to convert this to years. There are 86,400,000 milliseconds in a day, and 365 days in a year (roughly).

EDIT: You may need to use parseInt() on the values of the comboboxes if they are actually strings. This would be an easy change though - instead of 

d1.setMonth(document.forms[0].month.value);

you'd do

d1.setMonth(parseInt(document.forms[0].month.value, 10));

Upvotes: 2

Related Questions