dcsimg
www.webdeveloper.com
Results 1 to 13 of 13

Thread: how to find number of days

  1. #1
    Join Date
    Oct 2017
    Posts
    18

    how to find number of days

    How to find the difference between Oct 27 (entered date) and Nov 3(Todays Date). I don't want year to enter. Thank You. how to convert day and month to milliseconds and do the difference(.getTime() wants the full Date?)

    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>How Many Days Until My Birthday- Countdown Clock Calculator</title>
    
    
    <center>
    
    <h2>Find out how many days until your birthday!</h2>
    
    
    <form>
    Select Your Birthday:
    
    <select id="mySelect">
      <option value=1>January</option>
      <option value=2>February</option>
      <option value=3>March</option>
      <option value=4>April</option>
      <option value=5>May</option>
      <option value=6>June</option>
      <option value=7>July</option>
      <option value=8>August</option>
      <option value=9>September</option>
      <option value=10>October</option>
      <option value=11>November</option>
      <option value=12>December</option>
    
    </select>
    
    <select id="myDay">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
      <option value=4>4</option>
      <option value=5>5</option>
      <option value=6>6</option>
      <option value=7>7</option>
      <option value=8>8</option>
      <option value=9>9</option>
      <option value=10>10</option>
      <option value=11>11</option>
      <option value=12>12</option>
      <option value=13>13</option>
      <option value=14>14</option>
      <option value=15>15</option>
      <option value=16>16</option>
      <option value=17>17</option>
      <option value=18>18</option>
      <option value=19>19</option>
      <option value=20>20</option>
      <option value=21>21</option>
      <option value=22>22</option>
      <option value=23>23</option>
      <option value=24>24</option>
      <option value=25>25</option>
      <option value=26>26</option>
      <option value=27>27</option>
      <option value=28>28</option>
      <option value=29>29</option>
      <option value=30>30</option>
      <option value=31>31</option>
      
    
    </select>
    
    <br>
    
    </form>
    </div>
    </center>
    <br>
    </head>
    
    
    <body>
    <center>
    <button type="button" onclick="myBirthDay()">Calculate</button>
    </center>
    
    
    	
    <script>
    
    function myBirthDay(){
    
    var today = new Date();
    var currentDay = today.getDate();
    var currentMonth = today.getMonth()+1;
    var currentDate = (currentDay +currentMonth);
    
        
        var x = document.getElementById("mySelect").value;
        var y = document.getElementById("myDay").value;
       
        
        
        var ONE_DAY = 1000 * 60 * 60 * 24;
        
     
    }
    </script>
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,916

    Lightbulb

    You could simplify your code a bit by using the internal JS Date() objects
    with the <select> month changes below.

    Note the re-arrangement of some of your tags.
    Also, <center> is old, would recommend use of CSS

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>How Many Days Until My Birthday- Countdown Clock Calculator</title>
    <style type="text/css">
     div { text-align: center; }
     #result { font-size: 1.5em; color: red; }
    </style>
    </head>
    <body>
    
    <div>
     <h2>Find out how many days until your birthday!</h2>
    
     Select Your Birthday:
    
     <select id="myMonth">
      <option value=0>January</option>
      <option value=1>February</option>
      <option value=2>March</option>
      <option value=3>April</option>
      <option value=4>May</option>
      <option value=5>June</option>
      <option value=6>July</option>
      <option value=7>August</option>
      <option value=8>September</option>
      <option value=9>October</option>
      <option value=10>November</option>
      <option value=11>December</option>
     </select>
    
     <select id="myDay">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
      <option value=4>4</option>
      <option value=5>5</option>
      <option value=6>6</option>
      <option value=7>7</option>
      <option value=8>8</option>
      <option value=9>9</option>
      <option value=10>10</option>
      <option value=11>11</option>
      <option value=12>12</option>
      <option value=13>13</option>
      <option value=14>14</option>
      <option value=15>15</option>
      <option value=16>16</option>
      <option value=17>17</option>
      <option value=18>18</option>
      <option value=19>19</option>
      <option value=20>20</option>
      <option value=21>21</option>
      <option value=22>22</option>
      <option value=23>23</option>
      <option value=24>24</option>
      <option value=25>25</option>
      <option value=26>26</option>
      <option value=27>27</option>
      <option value=28>28</option>
      <option value=29>29</option>
      <option value=30>30</option>
      <option value=31>31</option>
     </select>
    
     <p>
    
     <button type="button" onclick="myBirthDay()">Calculate</button>
    
     <div id="result"></div>
    </div>
    	
    <script>
    function myBirthDay(){
      var today = new Date();
      document.getElementById('result').innerHTML = '<p>Today is: '+today.toDateString();
        
      var x = document.getElementById("myMonth").value;
      var y = document.getElementById("myDay").value;
      var birth = new Date(today.getFullYear(),x,y);
      document.getElementById('result').innerHTML += '<p>Birthday is/was: '+birth.toDateString();
     
      var msg = '<p>Days to (+) or past (-) your birth: '+Math.floor((birth-today)/864e5)+' in current year';   
      document.getElementById('result').innerHTML += msg;
    }
    </script>
    
    </body>
    </html>
    BTW, welcome to the forums.

  3. #3
    Join Date
    Oct 2017
    Posts
    18
    Thank you.. :-)

    Why i am getting 1 month ahead when i use below code

    var myMonth = document.getElementById("mySelect").value;
    var myDays = document.getElementById("myDay").value;


    var myDate = new Date(today.getFullYear(),myMonth,myDays);
    alert(myDate);

    Eg : if i select August and 6 in drop down box . Its displaying Sep 6 2017. Why?

  4. #4
    Join Date
    Oct 2017
    Posts
    18
    I figured it out. Thank You

  5. #5
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,916
    Quote Originally Posted by rrsuper6 View Post
    I figured it out. Thank You
    You noticed that I changed your select options for the month values? Yes?

  6. #6
    Join Date
    Oct 2017
    Posts
    18
    Yes.

  7. #7
    Join Date
    Oct 2017
    Posts
    18
    i have to find the number of days till next birthday. now its not showing properly . also when i click calculate button the page is not refreshing . Please help.


    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>How Many Days Until My Birthday- Countdown Clock Calculator</title>
    
    
    <center>
    <div>
    <h2>Find out how many days until your birthday!</h2>
    <style type="text/css">
     div { text-align: center; }
     #result { font-size: 1.5em; color: red; }
     div { text-align: center; }
     #result1 { font-size: 1.5em; color: red; }
      div { text-align: center; }
     #result2 { font-size: 1.5em; color: red; }
    </style>
    </head>
    
    </div>
    <body>
    
    Select Your Birthday:
    
    <select id="mySelect">
      <option value=1>January</option>
      <option value=2>February</option>
      <option value=3>March</option>
      <option value=4>April</option>
      <option value=5>May</option>
      <option value=6>June</option>
      <option value=7>July</option>
      <option value=8>August</option>
      <option value=9>September</option>
      <option value=10>October</option>
      <option value=11>November</option>
      <option value=12>December</option>
    
    </select>
    
    <select id="myDay">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
      <option value=4>4</option>
      <option value=5>5</option>
      <option value=6>6</option>
      <option value=7>7</option>
      <option value=8>8</option>
      <option value=9>9</option>
      <option value=10>10</option>
      <option value=11>11</option>
      <option value=12>12</option>
      <option value=13>13</option>
      <option value=14>14</option>
      <option value=15>15</option>
      <option value=16>16</option>
      <option value=17>17</option>
      <option value=18>18</option>
      <option value=19>19</option>
      <option value=20>20</option>
      <option value=21>21</option>
      <option value=22>22</option>
      <option value=23>23</option>
      <option value=24>24</option>
      <option value=25>25</option>
      <option value=26>26</option>
      <option value=27>27</option>
      <option value=28>28</option>
      <option value=29>29</option>
      <option value=30>30</option>
      <option value=31>31</option>
      
    
    </select>
    
    <br>
    
    
    
    </center>
    
    
    <center>
    
    <button type ="button" onclick="myBirthDay();">Calculate</button>
    </center>
    
    <br>
    <div id="result"></div>
    <div id="result1"></div>
    <div id="result2"></div>
    
    
    <script>
    
    function myBirthDay(){
    
    var today = new Date();
    var currentDay = today.getDate();
    var currentMonth = today.getMonth();
    var currentDate = new Date(today.getFullYear(),currentMonth,currentDay);
    
        var myMonth = document.getElementById("mySelect").value -1;
        
        var myDays = document.getElementById("myDay").value;
        
      
        var myDate = new Date(today.getFullYear(),myMonth,myDays);
        document.getElementById('result').innerHTML = '<p>BirthDay is: '+myDate.toDateString();
        
        document.getElementById('result1').innerHTML = '<p>Today is: '+today.toDateString();
        
        
        //No of days till next birthday
        
        var one_day = 1000 * 60 * 60 * 24;
        var currentDate_ms = currentDate.getTime();
        var myDate_ms = myDate.getTime();
        var difference_ms = (myDate_ms - currentDate_ms);
        var days =Math.round(difference_ms/one_day);
         
         // Convert back to days and return
     
      document.getElementById('result2').innerHTML += days;
      
     
        
       
      
    }
    
     
    
    </script>
    
    </body>
    </html>

  8. #8
    Join Date
    Oct 2017
    Posts
    18
    Why Its not displaying in order?

    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>How Many Days Until My Birthday- Countdown Clock Calculator</title>
    
    
    <center>
    <div>
    <h2>Find out how many days until your birthday!</h2>
    <style type="text/css">
     div { text-align: center; }
     #result { font-size: 1.5em; color: red; }
     div { text-align: center; }
     #result1 { font-size: 1.5em; color: red; }
      div { text-align: center; }
     #result2 { font-size: 1.5em; color: red; }
    </style>
    </head>
    
    </div>
    <body>
    
    Select Your Birthday:
    
    <select id="mySelect">
      <option value=1>January</option>
      <option value=2>February</option>
      <option value=3>March</option>
      <option value=4>April</option>
      <option value=5>May</option>
      <option value=6>June</option>
      <option value=7>July</option>
      <option value=8>August</option>
      <option value=9>September</option>
      <option value=10>October</option>
      <option value=11>November</option>
      <option value=12>December</option>
    
    </select>
    
    <select id="myDay">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
      <option value=4>4</option>
      <option value=5>5</option>
      <option value=6>6</option>
      <option value=7>7</option>
      <option value=8>8</option>
      <option value=9>9</option>
      <option value=10>10</option>
      <option value=11>11</option>
      <option value=12>12</option>
      <option value=13>13</option>
      <option value=14>14</option>
      <option value=15>15</option>
      <option value=16>16</option>
      <option value=17>17</option>
      <option value=18>18</option>
      <option value=19>19</option>
      <option value=20>20</option>
      <option value=21>21</option>
      <option value=22>22</option>
      <option value=23>23</option>
      <option value=24>24</option>
      <option value=25>25</option>
      <option value=26>26</option>
      <option value=27>27</option>
      <option value=28>28</option>
      <option value=29>29</option>
      <option value=30>30</option>
      <option value=31>31</option>
      
    
    </select>
    
    <br>
    
    
    
    </center>
    
    
    <center>
    
    <button type ="button" onclick="myBirthDay();">Calculate</button>
    </center>
    
    <br>
    <div id="result"></div>
    <div id="result1"></div>
    <div id="result2"></div>
    
    
    <script>
    
    function myBirthDay(){
    
    
    var today = new Date();
    var currentDay = today.getDate();
    var currentMonth = today.getMonth();
    var currentDate = new Date(today.getFullYear(),currentMonth,currentDay);
    
        var myMonth = document.getElementById("mySelect").value -1;
        
        var myDays = document.getElementById("myDay").value;
        
      
        var myDate = new Date(today.getFullYear(),myMonth,myDays);
        document.getElementById('result').innerHTML = '<p>Your BirthDay: '+myDate.toDateString();
        document.getElementById('result1').innerHTML = '<p>Today is: '+today.toDateString();
     
       
        
        //No of days till next birthday
        
        var one_day = 1000 * 60 * 60 * 24;
    
    
    if(currentDate > myDate)
       {
       
      myDate.setFullYear(myDate.getFullYear()+1); 
    
       
       }
    
    
        var currentDate_ms = currentDate.getTime();
        var myDate_ms = myDate.getTime();
        
           
        var difference_ms = (myDate_ms - currentDate_ms);
        var days = '<p> Number of Days till next birthday: '+ Math.round(difference_ms/one_day);
        
         
         // Convert back to days and return
     
       document.getElementById('result').innerHTML += days;
      
        
       }
    
     
    
    </script>
    
    </body>
    </html>

  9. #9
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,916
    Quote Originally Posted by rrsuper6 View Post
    i have to find the number of days till next birthday. now its not showing properly . also when i click calculate button the page is not refreshing . Please help.


    Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>How Many Days Until My Birthday- Countdown Clock Calculator</title>
    
    
    <center>
    <div>
    <h2>Find out how many days until your birthday!</h2>
    <style type="text/css">
     div { text-align: center; }
     #result { font-size: 1.5em; color: red; }
     div { text-align: center; }
     #result1 { font-size: 1.5em; color: red; }
      div { text-align: center; }
     #result2 { font-size: 1.5em; color: red; }
    </style>
    </head>
    
    </div>
    <body>
    
    Select Your Birthday:
    
    <select id="mySelect">
      <option value=1>January</option>
      <option value=2>February</option>
      <option value=3>March</option>
      <option value=4>April</option>
      <option value=5>May</option>
      <option value=6>June</option>
      <option value=7>July</option>
      <option value=8>August</option>
      <option value=9>September</option>
      <option value=10>October</option>
      <option value=11>November</option>
      <option value=12>December</option>
    
    </select>
    
    <select id="myDay">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
      <option value=4>4</option>
      <option value=5>5</option>
      <option value=6>6</option>
      <option value=7>7</option>
      <option value=8>8</option>
      <option value=9>9</option>
      <option value=10>10</option>
      <option value=11>11</option>
      <option value=12>12</option>
      <option value=13>13</option>
      <option value=14>14</option>
      <option value=15>15</option>
      <option value=16>16</option>
      <option value=17>17</option>
      <option value=18>18</option>
      <option value=19>19</option>
      <option value=20>20</option>
      <option value=21>21</option>
      <option value=22>22</option>
      <option value=23>23</option>
      <option value=24>24</option>
      <option value=25>25</option>
      <option value=26>26</option>
      <option value=27>27</option>
      <option value=28>28</option>
      <option value=29>29</option>
      <option value=30>30</option>
      <option value=31>31</option>
      
    
    </select>
    
    <br>
    
    
    
    </center>
    
    
    <center>
    
    <button type ="button" onclick="myBirthDay();">Calculate</button>
    </center>
    
    <br>
    <div id="result"></div>
    <div id="result1"></div>
    <div id="result2"></div>
    
    
    <script>
    
    function myBirthDay(){
    
    var today = new Date();
    var currentDay = today.getDate();
    var currentMonth = today.getMonth();
    var currentDate = new Date(today.getFullYear(),currentMonth,currentDay);
    
        var myMonth = document.getElementById("mySelect").value -1;
        
        var myDays = document.getElementById("myDay").value;
        
      
        var myDate = new Date(today.getFullYear(),myMonth,myDays);
        document.getElementById('result').innerHTML = '<p>BirthDay is: '+myDate.toDateString();
        
        document.getElementById('result1').innerHTML = '<p>Today is: '+today.toDateString();
        
        
        //No of days till next birthday
        
        var one_day = 1000 * 60 * 60 * 24;
        var currentDate_ms = currentDate.getTime();
        var myDate_ms = myDate.getTime();
        var difference_ms = (myDate_ms - currentDate_ms);
        var days =Math.round(difference_ms/one_day);
         
         // Convert back to days and return
     
      document.getElementById('result2').innerHTML += days;
      
     
        
       
      
    }
    
     
    
    </script>
    
    </body>
    </html>
    Obviously you changed the code by adding extra <div> elements. For example
    Replace
    document.getElementById('result2').innerHTML += days;
    with
    document.getElementById('result2').innerHTML = days;

  10. #10
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,916

    Question

    Quote Originally Posted by rrsuper6 View Post
    Why Its not displaying in order?
    What is the order you desire?

    And did you notice you never wrote anything to 'result2'?
    Last edited by JMRKER; 11-04-2017 at 11:23 PM.

  11. #11
    Join Date
    Oct 2017
    Posts
    18
    Sorry .. I sorted it out. Now my problem is i have to Display only BirthDay : Month and Date.. I don't want Year to display
    I want to display Day of next Birthday also. Thank You

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,433
    Consider this I knocked up, uses HTML5 date field which I believe is a problem in two browsers which don't support the field.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>How Many Days Until My Birthday- Countdown Clock Calculator</title>
    <script>function getISOtoday( ){
    	// return an ISO string value of the date today or the object that is passed
    	// ISO dates are Year-Month-Date format, eg. 2017-11-31 
    	var t = new Date();	
    	return [ t.getFullYear(), p(t.getMonth()+1 ), p(t.getDate() ) ].join("-");
    }
    
    function p(n){
    	return ("0"+n).slice(-2)
    }
    
    function myBirthday( fm ){
    	var birthday = new Date( fm.myDay.value ); // set the ISO date in the date picker
    	var today = new Date();// get a date object for today
    	
    	var birthdayThisYear = new Date( [today.getFullYear(), p( birthday.getMonth()+1 ), p( birthday.getDate() )].join("-") ).getTime();// we only need the month and the day and this year to get the date ref for birthday this year...
    	var timeToEvent = Math.ceil( ( birthdayThisYear - today.getTime() ) / 8.64e7 );// calculate the time difference
    	var message;// set a default message variable
    	// test the date set
    	if( timeToEvent == 0 ){ // its zero which means its my birthday!
    		message = "Its your BIRTHDAY..! Happy Birthday";
    	}else{ // we need to recalculate by adding a year to the current to get a date for next year.
    		var birthdayNextYear = new Date( [today.getFullYear()+1, p( birthday.getMonth()+1 ), p( birthday.getDate() )].join("-") ).getTime();
    		var timeToNextEvent = Math.ceil( ( birthdayNextYear - today.getTime() ) / 8.64e7 );
    		message = "You have " + (timeToEvent > 0 ? timeToEvent : timeToNextEvent )+ " days left to your birthday.";
    	}
    	// output a message
    	document.getElementById("daysToBirthday").innerHTML = message;
       
    }
    
    // we will set fields when the page has loaded...
    window.onload = function(){
    	// define date boundaries for this year only.
    	var thisYear = new Date().getFullYear();
    	document.forms.birthday.myDay.min	= thisYear+"01-01";
    	document.forms.birthday.myDay.max	= [thisYear+1,12,31].join("");
    	document.forms.birthday.myDay.value = getISOtoday();// set the calendar to todays date with an ISO string
    }
    </script>
    
    </head>
    <body>
    	<center>
    		<h2>Find out how many days until your birthday!</h2>
    		<br />
    		<br />
    		<form name="birthday" action="javascript:;" onsubmit="myBirthday( this )">
    			<label for="myDay">Enter your date of birth </label>
    			<input name="myDay" type="date" value="" min="" max="">
    			<br>  
    			<input name="Submit" type="submit" value="Calculate">
    		</form>
    		<br>  
    		<br>
    		<div id="daysToBirthday"></div>
    	</center>
    </body>
    </html>
    If the birthday this year has passed, it tells how many days until the next birthday.

    To give the person their birthday next year is very easy as you will see if you follow the code.

    You can use Number type fields, which are easier to populate than altering a drop down list.

    If you really need to use a drop down list, then your days list needs to have the contents modified to match the number of days per month.

    This is a trick on how to get the number of days in any particular month and you will see many scripts out on the internet that use arrays and modulous to account for leap years which are not reliable... Hardly anyone uses the Date object or properly use it to make calculations that can often be done in a few lines of code, some coders like to write extensive code blocks with some that I have seen taking 40 lines of code...

    So the secret to getting the days in the month are simple... Create a Date Object, in the object parameters you pass it the current year you want, the month number+1 and then 0 for the 0th day which is actually the day of the previous month and applying .getDate() to that object will result in the number of days in that month.

    Get Days in a month using a prototype method
    Code:
    Date.prototype.getDaysInMonth = function( mth ){
    	return new Date( this.getFullYear(), mth+1, 0 ).getDate();
    }
    var daysInApril = new Date().getDaysInMonth(3); // 3 = April as its JavaScript months 0 to 11
    console.log("April has got %s days in it",daysInApril);
    This method can be used to quickly and efficiently ascertain if the year in question is a leap year or not... Leap Year, return true or false
    Code:
    function is_leap( year ){
    	return new Date(year,2,0).getDate() == 29; // the 0th of March = 28th or 29th Feb
    }
    Last edited by \\.\; 11-05-2017 at 08:54 AM.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  13. #13
    Join Date
    Oct 2017
    Posts
    18
    Thank You!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center