File "test.html"
Full Path: /home/analogde/www/Prog/MMM/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>