File "test.html"

Full Path: /home/analogde/www/Design/fileman/Fusion/datepicker/test.html
File size: 8.81 KB
MIME-type: text/html
Charset: utf-8

<!--
https://www.sourcecodester.com/tutorial/javascript/16270/how-get-actual-easter-date-javascript#google_vignette
-->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
<body>
	<nav class="navbar navbar-defalt">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Get the Actual Easter Date in JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-3">
			<form>
				<div class="form-group">
					<label>Enter a year</label>
					<input type="number" id="year" class="form-control"/>
				</div>
				<center><button type="button" onclick="displayDate();" class="btn btn-primary">Get Date</button></center>
			</form>
		</div>
		<div class="col-md-6">
			<div id="result"></div>
		</div>
	</div>

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>

   var year_tab = ["2024", "2025"]

//var jours_feries = ["01-01-2024",  "05-01-2024", "05-08-2024" , "08-15-2024" , "11-01-2024" , "11-11-2024"  , "12-25-2024"];
	var jours_feries = [];

	let m=["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
 
	//displayDate();
 
 	fff(year_tab);
	jours_feries = calcul_jours_feries(year_tab)
	
	console.log( jours_feries );
	
	
 
 
 function fff(year_tab)
 {
 
 
	for (let i = 0; i < year_tab.length; i++)
	{
		
		var nouvel_an = "01-01-" + year_tab[i];
		var fete_du_travail = "05-01-" + year_tab[i];
		var victoire_1945 = "05-08-" + year_tab[i]; 
		var fete_nationale = "07-14-" + year_tab[i];
		var assomption = "08-15-" + year_tab[i];  
		var toussaint = "11-01-" + year_tab[i]; 
		var armistice = "11-11-" + year_tab[i]; 
		var noel = "12-25-" + year_tab[i]; 

		jours_feries.push( nouvel_an, fete_du_travail, victoire_1945 , fete_nationale, assomption, toussaint, armistice, noel  );
		

	}
	return jours_feries;
 
 }
 
 function calcul_jours_feries(year_tab)
 {
	for (let i = 0; i < year_tab.length; i++)
	{
 
		let month=getEasterDate(year_tab[i])[0];
		let day=getEasterDate(year_tab[i])[1];
		//document.getElementById('result').innerHTML="<h3>The easter date is: </h3><center><h2 class='text-primary'>"+m[month-1]+" "+day+", "+year+"</h2></center>";
	
		var lundi_paques = new Date(year_tab[i], month-1, day+1);
		var ascension = new Date(year_tab[i], month-1, day+39);
		var pentecote = new Date(year_tab[i], month-1, day+49);
		var lundi_pentecote = new Date(year_tab[i], month-1, day+50);
		
		jours_feries.push( toto(lundi_paques), toto(ascension), toto(pentecote) , toto(lundi_pentecote) );
	
	}
 
	return jours_feries;
 }
 
 function toto(element)
 {
	let mm = element.getMonth() + 1; // month is zero-based
	let dd = element.getDate();
	let yyyy = element.getFullYear();

	if (dd < 10) dd = '0' + dd;
	if (mm < 10) mm = '0' + mm;

	const formatted =  mm + '-' + dd + '-' + yyyy;
	
	return(formatted);
 }
 
 function disableDates(date) 
{
    var dt = $.datepicker.formatDate('mm-dd-yy', date);
    var noWeekend = jQuery.datepicker.noWeekends(date);
    return noWeekend[0] ? (($.inArray(dt, jours_feries) < 0) ? [true] : [false]) : noWeekend;
}
  
 
 
function displayDate()
{
	let year= "2024"; // document.getElementById('year').value;
 
	if(year.length == 0){
		alert("Please enter something");
	}else{
		let month=getEasterDate(year)[0];
		let day=getEasterDate(year)[1];
		document.getElementById('result').innerHTML="<h3>The easter date is: </h3><center><h2 class='text-primary'>"+m[month-1]+" "+day+", "+year+"</h2></center>";
	
		var LundiPaques = new Date(year, month-1, day+1);
	var Ascension = new Date(year, month-1, day+39);
	var Pentecote = new Date(year, month-1, day+49);
	var LundiPentecote = new Date(year, month-1, day+50);
	
	console.log(LundiPaques);
	console.log(Ascension);
	console.log(Pentecote);
	console.log(LundiPentecote);
	
	/*var mmm;
	
	if( Pentecote.getMonth() < 10)
	{
		var mmm = "0" + Pentecote.getMonth();
	}
	else
	{
		var mmm = Pentecote.getMonth();
	}*/
	
	//console.log( mmm + "-" + Pentecote.getDate() + "-" + Pentecote.getFullYear() );
	
	
	console.log(LundiPaques.getMonth() + 1 + "-" + LundiPaques.getDate() + "-" + LundiPaques.getFullYear() );
	console.log(Ascension.getMonth() + 1 + "-" + Ascension.getDate() + "-" + Ascension.getFullYear() );
	console.log(Pentecote.getMonth() + 1 + "-" + Pentecote.getDate() + "-" + Pentecote.getFullYear() );
	console.log(LundiPentecote.getMonth() + 1 + "-" + LundiPentecote.getDate() + "-" + LundiPentecote.getFullYear() );
	
	
	//jours_feries.push( Pentecote.getMonth() + "-" + Pentecote.getDate() + "-" + Pentecote.getFullYear() );
	
	console.log(jours_feries);
	
	const today = new Date();
const yyyy = today.getFullYear();
let mm = today.getMonth() + 1; // month is zero-based
let dd = today.getDate();

if (dd < 10) dd = '0' + dd;
if (mm < 10) mm = '0' + mm;

const formatted = dd + '/' + mm + '/' + yyyy;
console.log(formatted); // 24/04/2023
	
	
	jours_feries.push( formatage(LundiPaques)  );
	jours_feries.push( formatage(Ascension)  );
	jours_feries.push( formatage(Pentecote)  );
	jours_feries.push( formatage(LundiPentecote)  );
	
	console.log(jours_feries);
	
//	formatage(LundiPaques);
//	formatage(Ascension);
//	formatage(Pentecote);
//	formatage(LundiPentecote);
	}
}

function addLeadingZeros(num, size) {
  // convert the number to a string
  var s = num + "";
  // add zeros until the string length is equal to size
  while (s.length < size) s = "0" + s;
  // return the padded string
  return s;
}

//console.log(addLeadingZeros(5, 3)); // "005"

function formatage(element)
{
	//var mois;
	//var jour;
	
	//alert( element.getDay() );
	
	// https://www.tutorialspoint.com/How-to-pad-a-number-with-leading-zeros-in-JavaScript
	
	// https://byby.dev/js-number-leading-zeros
	
	// https://byby.dev/js-format-date
	
	var mois_correctif = element.getMonth() + 1;
	
	if( mois_correctif < 10)
	{
		var mois = "0" + mois_correctif;
	}
	else
	{
		var mois = element.getMonth();
	}
	
	var jour_correctif = element.getDay();
	
	
	if( jour_correctif < 10)
	{
		var jour = "0" + jour_correctif;
		//alert("plouf");
	}
	else
	{
		var jour = element.getDay();
		//alert("ici");
	}
	
	
	let mm = element.getMonth() + 1; // month is zero-based
	let dd = element.getDate();
	let yyyy = element.getFullYear();

	if (dd < 10) dd = '0' + dd;
	if (mm < 10) mm = '0' + mm;

	const formatted =  mm + '-' + dd + '-' + yyyy;
	console.log(formatted); // 24/04/2023
	
	/*if(jour.toString().length < 2)
	{
		jour= "0"+jour;
		alert(jour);
		
		console.log( jour.toString() );
	}*/
	
	//var str = mois + "-" + jour + "-" + element.getFullYear()
	//console.log(" ----> " + str);
	return(formatted);
}



//mktime(0, 0, 0, $mois_paques, $jour_paques + 1, $annee),// Lundi de paques
//                mktime(0, 0, 0, $mois_paques, $jour_paques + 39, $annee),// Ascension
//                mktime(0, 0, 0, $mois_paques, $jour_paques + 50, $annee), // Pentecote
 
function getEasterDate(year) {
	let f = Math.floor;
	let G = year % 19;
	let	C = f(year / 100);
	let H = (C - f(C / 4) - f((8 * C + 13)/25) + 19 * G + 15) % 30;
	let I = H - f(H/28) * (1 - f(29/(H + 1)) * f((21-G)/11));
	let J = (year + f(year / 4) + I + 2 - C + f(C / 4)) % 7;
	let L = I - J;
	let month = 3 + f((L + 40)/44);
	let day = L + 28 - 31 * f(month / 4);
 
	return [month,day];
}

// https://openclassrooms.com/forum/sujet/datepicker-en-francais-jquery

// https://www.geeksforgeeks.org/jquery-ui-datepicker-weekheader-option/

$( function() {
    $( "#datepicker" ).datepicker( {
  beforeShowDay: disableDates,
   monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
  showWeek: true,
  weekHeader: 'Sem.'
} );
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
  } );

</script>
	
	
	<p>Date: <input type="text" id="datepicker"></p>
	
</body>	
</html>