Le code suivant figure dans le corps du document : 

<form id= 'form_test_id' onsubmit= 'result(); return false;'> 
<label for= 'date_id'>Votre date de naissance: </label><input type = 'date' id = 'date_id' maxlength = '10' value = "1960-01-01" required><br>
<br>
<input type= 'button' value= "Validation" onclick= 'result();'> 
</form>
<div id= 'age_block_id'></div>
<div id= 'birthday_block_id'></div>

<script type="text/javascript">

</script>

Le code suivant figure en bas de page :

<script type="text/javascript">
/* these constants must be initialized after the form is displayed */
const age_block= document.getElementById('age_block_id');
const birthday_block= document.getElementById('birthday_block_id');
const date= document.getElementById('date_id');

if (date.type == 'text') { date.value= "dd/mm/yyyy"; } // if the content of the constant is an object, the object itself can always be modified.

function countdown(month, day) {
	var temp;
	var today = new Date(); 
	var birthday= new Date(today.getFullYear(), month -1, day);
	temp= Math.floor((birthday.getTime() - today.getTime()) /(24*60*60*1000)) + 1;
	if (temp < 0) { temp = temp + 365; }
	return temp;
	}
	
function age(year, month, day) {
	var temp;
	var today= new Date();
	var birthday= new Date(today.getFullYear(), month -1, day);
	nb_years = today.getFullYear() - year;
	var had_birthday = (today >= birthday);
	temp = had_birthday ? nb_years : nb_years -1; // if the birthday is over we remove 1 year
	return temp;
	}	

function check_text(entry) {
	var temp;
	var exp= new RegExp(/^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/);
	temp= exp.test(entry);
	if (temp == false) { age_block.innerHTML= "Date invalide.";}
	return temp;
	}
		
function check_date(year, month, day) {
	var temp;
	var newDate = new Date(year, month-1, day); //  we try to generate the date
	if (newDate.getFullYear()  ==  year && newDate.getMonth()  ==  month-1 && newDate.getDate() == day) { temp= true; }
	else { age_block.innerHTML= "Cette date n'existe pas."; temp= false; }
	return temp;
	}
	
function result() {
	var temp;
	var year; var month; var day;
	if (date.type == 'text') {
    	/*
		when the date field is not supported, its type is transformed into text type
		old format dd/mm/yyyy ou dd / mm / yyyy 
        */
		var birthday= date.value.replace(/ /g, ''); 
		date_valid= check_text(birthday);	
		if (date_valid) {
			temp= birthday.split('/');
			year= temp[2]; month= temp[1]; day= temp[0]; 
			date_valid= check_date(year, month, day);
			}	
		}
	else { 
		/* 
		date.type == 'date'
		new format yyyy-mm-dd
		*/
		temp= date.value.split('-');
		year= temp[0]; month= temp[1]; day= temp[2];
		date_valid= check_date(year, month, day);
		}
	if (date_valid) {
		age_block.innerHTML= "Vous avez " + age(year, month, day) + " ans.";
		var wait= countdown(month, day);
		if (wait == 0) { 
			birthday_block.innerHTML= '
' + image_with_caption(image_name, image_width, image_height, image_caption) + '

Bon anniversaire. 
';
			timeout_id= setTimeout(anime, 2200); 	
			//clearTimeout(timeout_id);
			}
		else { birthday_block.innerHTML= "
Il reste " +  wait +  " jours avant votre anniversaire."; }
		}
	} 
	
</script>

HTML 5 propose un champ <input type= 'date'> qui peut remplacer <input type= 'text'>; il peut faciliter l'entrée de la date; mais son affichage est assez variable d'un navigateur à l'autre et il n'est évidemment géré que par les navigateurs modernes. Il n'est pas géré par Safari. En cas de non prise en charge, son type est transformé en type text. Ceci pose des problèmes dans les langages autres que l'anglais. En interne la valeur (value) du champ date a toujours le format yyyy-mm-dd qui est celui des dates anglo-saxonnes. A l'affichage ce qu'on voit dépend du langage de la page: en français dd / mm / yyyy. Hors avec un champ texte respectant les coutumes locales, la valeur interne du champ, identique à la valeur affichée sera généralement dd / mm / yyyy (et le plus souvent sans les espaces)

Il convient donc de détecter si le type du champ n'a pas été changé de date en texte par le navigateur et d'adapter la lecture de sa valeur en conséquence; il est aussi plus qu'utile de prévenir l'utilisateur du format attendu. Enfin la vérification des données entrées est tout autant nécessaire qu'avec un <input type= 'text'>.

Références