1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Script that will display age in years months days from DOB?

Discussion in 'JavaScript' started by devs, Dec 1, 2010.

  1. #1
    Hi does anyone know of a script that will tell me how old a person
    is in years, months and days.

    If they were under one year old it would need to just display months and days.

    I'm having problems finding anything.

    Please help!

    Many thanks,

    Devs. ;)
     
    devs, Dec 1, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Cash Nebula, Dec 1, 2010 IP
  3. devs

    devs Active Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    Hi there and many thanks for the reply. I did see that one. However I can't find one that will display the 'year', 'months', 'days' and omit the year if under one year old.

    I thought it would have been a popular(ish) script?
     
    devs, Dec 1, 2010 IP
  4. devs

    devs Active Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    Anyone? I really can't find anything to do this ;(
     
    devs, Dec 3, 2010 IP
  5. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This is my rough attempt. It works but the days are often wrong by one or two.
    
    <html>
    <head>
    <script type="text/javascript">	
    function showAge(dobYear, dobMonth, dobDay) {
    	var bthDate, curDate, days;
    	var ageYears, ageMonths, ageDays;
    	bthDate = new Date(dobYear, dobMonth-1, dobDay);
    	curDate = new Date();
    	if (bthDate>curDate) return;
    	days = Math.floor((curDate-bthDate)/(1000*60*60*24));
    	ageYears = Math.floor(days/365);
    	ageMonths = Math.floor((days%365)/31);
    	ageDays = days - (ageYears*365) - (ageMonths*31);
    	if (ageYears>0) {
    		document.write(ageYears+" year");
    		if (ageYears>1) document.write("s"); 
    		if ((ageMonths>0)||(ageDays>0)) document.write(", ");
    	}
    	if (ageMonths>0) {
    		document.write(ageMonths+" month");
    		if (ageMonths>1) document.write("s");
    		if (ageDays>0) document.write(", ");
    	}
    	if (ageDays>0) {
    		document.write(ageDays+" day");
    		if (ageDays>1) document.write("s");
    	}
    }
    </script>
    </head>
    <body onload="showAge(2007,10,1)">
    </body>
    </html>
    
    Code (markup):
     
    Last edited: Dec 4, 2010
    Cash Nebula, Dec 4, 2010 IP
  6. devs

    devs Active Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #6
    Hi there mate and many thanks for taking the time to do that for me. I've just uploaded the file to me server but its not displaying anything. The page is just black. Am I missing something?

    Cheers again,

    Devs. ;)
     
    devs, Dec 5, 2010 IP
  7. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Yeah, that was just a demo. I need to see your page markup to integrate it.
     
    Cash Nebula, Dec 5, 2010 IP
  8. devs

    devs Active Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #8
    Ah okay I understand. This is the page where I would like the text to appear:

    www.dital.co.uk/JackD - its on the very first line of text..

    Many thanks again,

    Devs ;)
     
    devs, Dec 6, 2010 IP
  9. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #9
    You're welcome :) Change the red date to the correct birthday, then save the code as birthday.js in your "js" folder:
    
    $(document).ready(function(){
    	var bthDate, curDate, days, ageYears, ageMonths, ageDays, ageText;
    	bthDate = new Date("[COLOR="red"]04 Sep 2008[/COLOR]"); 
    	curDate = new Date();
    	if (bthDate > curDate) return;
    	days = Math.floor((curDate - bthDate) / (1000 * 60 * 60 * 24));
    	ageYears = Math.floor(days / 365);
    	ageMonths = Math.floor((days % 365) / 31);
    	ageDays = days - (ageYears * 365) - (ageMonths * 31);
    	ageText = "";
    	if (ageYears > 0) {
    		ageText = ageText + ageYears + " year";
    		if (ageYears > 1) ageText = ageText + "s"; 
    	}
    	if (ageMonths > 0) {
    		if (ageYears > 0) {
    			if (ageDays > 0) ageText = ageText + ", "; 
    			else if (ageDays == 0) ageText = ageText + " and ";
    		}
    		ageText = ageText + ageMonths + " month";
    		if (ageMonths > 1) ageText = ageText + "s";
    	}
    	if (ageDays > 0) {
    		if ((ageYears > 0) || (ageMonths > 0)) ageText = ageText + " and ";
    		ageText = ageText + ageDays + " day";
    		if (ageDays > 1) ageText = ageText + "s";
    	}
    	document.getElementById("age").innerHTML = ageText;
    });
    
    Code (markup):
    On line 35 of index.html, add a line to load the birthday script:
    
    <script src="js/jquery.cookie.js"></script>
    <script src="js/rollover.js"></script>
    [COLOR="red"]<script src="js/birthday.js"></script>[/COLOR]
    <!--+++++END JAVASCRIPT+++++-->
    
    Code (markup):
    On line 290, replace the date text "8 months and 4 days" with an empty span element:
    
    My name is Jack Devlin and I'm [COLOR="red"]<span id="age"></span>[/COLOR] old today.
    
    Code (markup):
    Hope all that works! :)
     
    Cash Nebula, Dec 6, 2010 IP
  10. devs

    devs Active Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #10
    Hi there and many thanks for posting the code. I've entered the birthday date of 6th April 2010. This should work out as 8 months and 1 week but on the page its showing as 7months and 28 days? Do you have any thoughts on what could be changed?

    Cheers,

    Devs :)
     
    devs, Dec 7, 2010 IP
  11. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #11
    As I said before, the days are not accurate. Use this for the birthday script if you want to have just years and months:
    
    $(document).ready(function(){
    	var bthDate, curDate, ageYears, ageMonths, ageDays, ageText;
    	bthDate = new Date("06 Apr 2010"); // Change the birth date here!
    	curDate = new Date();
    	if (bthDate > curDate) return;
    	ageYears = curDate.getFullYear() - bthDate.getFullYear();
    	ageMonths = curDate.getMonth() - bthDate.getMonth();
    	ageDays = curDate.getDate() - bthDate.getDate(); 
    	if (ageDays < 0) ageMonths = ageMonths - 1;
    	if (ageMonths < 0) {
    		ageYears = ageYears - 1;
    		ageMonths = ageMonths + 12;
    	}
    	ageText = "";
    	if (ageYears > 0) {
    		ageText = ageText + ageYears + " year";
    		if (ageYears > 1) ageText = ageText + "s"; 
    	}
    	if (ageMonths > 0) {
    		if (ageYears > 0) ageText = ageText + " and ";
    		ageText = ageText + ageMonths + " month";
    		if (ageMonths > 1) ageText = ageText + "s";
    	}
    	document.getElementById("age").innerHTML = ageText;
    });
    
    Code (markup):
     
    Cash Nebula, Dec 7, 2010 IP
  12. devs

    devs Active Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #12
    Your an absolute super star. Sorry I forgot that you mentioned about the days. This script will do me until the little man is over 1 year then I'll swap it out for the other. Thanks again. Greatly appreciated :)
     
    devs, Dec 7, 2010 IP
  13. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Cheers mate! :D

    Finding the days is like solving a Sudoku puzzle, it has been driving me crazy! :p
    I finally gave up and made it show the weeks instead, and it rounds them up like you wanted.
    
    $(document).ready(function(){
    	var bthDate, curDate, ageYears, ageMonths, ageWeeks, ageDays, ageText;
    	bthDate = new Date("06 Apr 2010"); // Change the birth date here!
    	curDate = new Date();
    	if (bthDate > curDate) return;
    	ageYears = curDate.getFullYear() - bthDate.getFullYear();
    	ageMonths = curDate.getMonth() - bthDate.getMonth();
    	ageDays = curDate.getDate() - bthDate.getDate(); 
    	if (ageDays < 0) {
    		ageMonths = ageMonths - 1;
    		ageDays = ageDays + 31;
    	}
    	ageWeeks = Math.ceil(ageDays / 7);
    	if (ageMonths < 0) {
    		ageYears = ageYears - 1;
    		ageMonths = ageMonths + 12;
    	}
    	ageText = "";
    	if (ageYears > 0) {
    		ageText = ageText + ageYears + " year";
    		if (ageYears > 1) ageText = ageText + "s"; 
    	}
    	if (ageMonths > 0) {
    		if (ageYears > 0) {
    			if (ageWeeks > 0) ageText = ageText + ", "; 
    			else if (ageWeeks == 0) ageText = ageText + " and ";
    		}
    		ageText = ageText + ageMonths + " month";
    		if (ageMonths > 1) ageText = ageText + "s";
    	}
    	if (ageWeeks > 0) {
    		if ((ageYears > 0) || (ageMonths > 0)) ageText = ageText + " and ";
    		ageText = ageText + ageWeeks + " week";
    		if (ageWeeks > 1) ageText = ageText + "s";
    	}
    	document.getElementById("age").innerHTML = ageText;
    });
    
    Code (markup):
     
    Cash Nebula, Dec 8, 2010 IP
  14. devs

    devs Active Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #14
    Even better mate, well done!

    Really pleased. Cheers, Devs :)
     
    devs, Dec 8, 2010 IP