File "picker04.html"
Full Path: /home/analogde/www/FormData/Fusion/Picker02/picker04.html
File size: 20.8 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html>
<!--
https://stackoverflow.com/questions/50168233/date-picker-start-date-end-date-query
https://laracasts.com/discuss/channels/general-discussion/how-to-get-end-date-from-start-date-and-days-using-jquery-ui-datepicker
https://www.plus2net.com/jquery/msg-demo/date-picker-range.php
https://jqueryui.com/datepicker/#date-range
https://makitweb.com/jquery-datepicker-to-filter-records-with-php-mysql/
https://makitweb.com/jquery-datepicker-to-filter-records-with-php-mysql/
https://stackoverflow.com/questions/1917576/how-do-i-pass-javascript-variables-to-php
https://www.geminitutorials.com/php-and-javascript-exchange-variables/
https://www.wikihow.com/Pass-Variables-from-Javascript-to-PHP
https://www.davidangulo.xyz/posts/how-to-pass-value-from-javascript-to-php/
https://stackoverflow.com/questions/7609130/set-the-default-value-of-an-input-field
https://www.w3docs.com/snippets/php/passing-multiple-variables-to-another-page-in-url.html
-->
<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 global_startDate;
var global_endDate;
var year_tab = ["2024", "2025"]
var jours_feries = [];
construction_jours_feries_fixe(year_tab);
console.log(jours_feries);
calcul_jours_feries(year_tab)
console.log( jours_feries );
/*************************************************************/
function construction_jours_feries_fixe(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 );
}
}
/*************************************************************/
function calcul_jours_feries(year_tab)
{
for (let i = 0; i < year_tab.length; i++)
{
let month=calcul_date_jour_paques(year_tab[i])[0];
let day=calcul_date_jour_paques(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( format_jour_mois(lundi_paques), format_jour_mois(ascension), format_jour_mois(pentecote) , format_jour_mois(lundi_pentecote) );
}
}
/************************************************************/
function format_jour_mois(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 calcul_date_jour_paques(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];
}
/*************************************************************/
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 operating(selectedDate)
{
var day = selectedDate.getDate();
var month = selectedDate.getMonth();
month = month + 1;
var year = selectedDate.getFullYear();
if( day < 10)
{
day = "0" + day;
}
if( month < 10)
{
month = "0" + month;
}
return(day + "-" + month + "-" + year);
}
/************************************************************/
$( function() {
var startDate;
var endDate;
$( "#datepicker_date_start" ).datepicker( {
beforeShowDay: disableDates,
dateFormat: 'dd-mm-yy',
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" ] );
$( "#datepicker_date_end" ).datepicker( {
beforeShowDay: disableDates,
dateFormat: 'dd-mm-yy',
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" ] );
///////
$('#datepicker_date_start').change(function()
{
startDate = $(this).datepicker('getDate');
$("#datepicker_date_end").datepicker("option", "minDate", startDate );
if( startDate == null)
{
document.getElementById("date_start").value = null;
console.log("Detection start " + document.getElementById("date_start").value);
//document.getElementById("submit").disabled = true;
}
else
{
document.getElementById("date_start").value = operating(startDate);
}
})
///////
$('#datepicker_date_end').change(function()
{
endDate = $(this).datepicker('getDate');
//document.getElementById("btn_action").disabled = false;
//document.getElementById("submit").disabled = false;
if( endDate == null)
{
console.log("Detection stop");
document.getElementById("date_end").value = null;
//document.getElementById("submit").disabled = true;
}
else
{
document.getElementById("date_end").value = operating(endDate);
}
console.log( startDate + " " + endDate);
/*if( document.getElementById("date_start").value == null)
{
document.getElementById("date_start").value = "rien";
}
else
{*/
// document.getElementById("date_start").value = operating(startDate);
/*}*/
/*if( document.getElementById("date_end").value == null)
{
document.getElementById("date_end").value = "rien";
}
else
{*/
// document.getElementById("date_end").value = operating(endDate);
/*}*/
$("#datepicker_date_start").datepicker("option", "maxDate", endDate );
})
} );
/************************************************************/
/*
function send()
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/*
var PageToSendTo = "nowitworks.php?";
var MyVariable = "variableData";
var VariablePlaceholder = "variableName=";
var UrlToSend = PageToSendTo + VariablePlaceholder + MyVariable;
xmlhttp.open("GET", UrlToSend, false);
xmlhttp.send();*/
/*
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("message").innerHTML=xmlhttp.responseText;
}
}
var selectedDate = $( "#date_picker1" ).datepicker("getDate");
var date_start = operating(selectedDate);
selectedDate = $( "#date_picker2" ).datepicker("getDate");
var date_end = operating(selectedDate);
console.log(date_start + " " + date_end);
//var winW = 630, winH = 460;
//var queryString = "?width=" + winW + "&height=" + winH;
// 1 seul champ
//var queryString = "?date_start=" + date_start;
// plusieurs champ
var queryString = "?date_start=" + date_start + "&date_end=" + date_end;
xmlhttp.open("GET","passage.php"+queryString,true);
xmlhttp.send();
}
*/
/*function myFunction()
{
dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var selectedDate = $( "#date_picker1" ).datepicker("getDate");
console.log(selectedDate);
//alert(selectedDate);
/* get the array of day names and month names from the date picker */
// var dayNames = $('#datePicker').datepicker('option', 'dayNames');
/* default dayNames can be accessed using $.datepicker._defaults.dayNames; */
// var monthNames = $('#datePicker').datepicker('option', 'monthNames');
/* default monthNames can be accessed using $.datepicker._defaults.monthNames; */
/* assign are vars */
// var date = selectedDate.getDate();
// var day = dayNames[selectedDate.getDay()]; // taking the day name from the array of day names
// var month = monthNames[selectedDate.getMonth()]; // taking the month name from the array of month names
/* var day = selectedDate.getDate();
var month = selectedDate.getMonth();
month = month + 1;
var year = selectedDate.getFullYear();
if( day < 10)
{
day = "0" + day;
}
if( month < 10)
{
month = "0" + month;
}
alert(day + "-" + month + "-" + year);
//window.open("https://www.w3schools.com");
}
*/
$(function()
{
///////
var startDate;
var endDate;
$( "#date_picker1" ).datepicker({
dateFormat: 'dd-mm-yy'
})
///////
///////
$( "#date_picker2" ).datepicker({
dateFormat: 'dd-mm-yy'
});
///////
$('#date_picker1').change(function() {
startDate = $(this).datepicker('getDate');
$("#date_picker2").datepicker("option", "minDate", startDate );
//global_startDate = startDate;
alert("ploug");
//console.log("555555555" + startDate);
})
///////
$('#date_picker2').change(function()
{
endDate = $(this).datepicker('getDate');
//document.getElementById("btn_action").disabled = false;
//////
//document.getElementById("submit").disabled = false;
document.getElementById("date_start").value = operating(startDate);
document.getElementById("date_end").value = operating(endDate)
$("#date_picker1").datepicker("option", "maxDate", endDate );
//global_endDate = endDate;
})
////////////////
})
</script>
<script>
function validateForm()
{
let x = document.forms["form"]["champ_table"].value;
var aaa = document.getElementById("date_start").value; //= operating(startDate);
var bbb = document.getElementById("date_end").value; //= operating(endDate)
var flag = document.getElementById("verrou").value;
// var global_startDate;
//var global_endDate;
alert( "++++ " + aaa + " " + bbb + " " + flag);
//alert( global_startDate + " " + global_endDate);
if( aaa == "" || bbb == "" || flag == "no")
{
//alert("Vide ?????");
document.getElementById("dialog_message").style.visibility = "visible";
//document.getElementById('dialog_message').innerText = 'Anything you want';
$( "#dialog" ).dialog();
return false;
}
else
{
alert("Good");
//return true;
}
/*if (x == "")
{
alert("Name must be filled out");
return false;
}*/
}
function interrogationDB(str)
{
/*if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}*/
//var date_1 = document.getElementById("date_start").value;
//var date_2 = document.getElementById("date_end").value;
//var selectedDate = $( "#date_picker1" ).datepicker("getDate");
// var date_start = operating(selectedDate);
// selectedDate = $( "#date_picker2" ).datepicker("getDate");
// var date_end = operating(selectedDate);
// alert(date_start + " " + date_end);
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("message").innerHTML=this.responseText;
document.getElementById("message").style.border="1px solid #A5ACB2";
//alert(document.getElementById("champ_table").value);
// Existe dans la database
if( this.responseText == "Existe dans la database")
{
//alert("Existe");
//document.getElementById("submit").disabled = true;
document.getElementById("verrou").value = "no";
//console.log("Existe");
///
}
if( this.responseText == "Nouvelle")
{
document.getElementById("verrou").value = "yes";
//alert("Nouvelle");
//document.getElementById("submit").disabled = false;
//console.log("Nouvelle");
}
if( document.getElementById("champ_table").value.length == 0)
{
//alert("Vide");
//document.getElementById("submit").disabled = true;
document.getElementById("verrou").value = "no";
console.log("Vide");
//alert(document.getElementById("date_start").value);
}
}
}
xmlhttp.open("GET","requete_mysql_table.php?table="+str,true);
xmlhttp.send();
}
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
console.log( typeof(x) );
var string = "275";
checkString1("A275");
checkString1("0275");
checkString1("275");
checkNumber1(44);
checkNumber1(-44);
checkNumber1(3.4);
checkNumber1(-3.4);
let str1 = "GeeksforGeeks";
let str2 = "Geeks123";
let regex = /^[a-zA-Z]+$/;
console.log(regex.test(str1));
console.log(regex.test(str2));
console.log(containsOnlyDigits1("123")); // Output: true
console.log(containsOnlyDigits1("123abc")); // Output: false
console.log(containsOnlyDigits1("123")); // Output: true
console.log(containsOnlyDigits1("123abc")); // Output: false
isOnlyDigits("122135567343");
isOnlyDigits("df32d23");
removeLeadingZeros("00012300789000");
var num = "0037800";
var int_num = parseInt(num,10);
console.log( int_num );
console.log(countDot('2....3','\\.') );
// jquery ajax post data to php in json format
// send json to PHP using ajax jquery
// $.ajax
// Dynamic Ajax Form Validation in PHP
// https://www.geeksforgeeks.org/how-to-make-ajax-call-from-javascript/
// https://www.tutorialrepublic.com/javascript-tutorial/javascript-ajax.php
// https://www.javatpoint.com/jquery-ajax-method
// https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/jQuery_Basics.html
// numbere of dot
// leading zeros
/////// https://pandaquests.medium.com/5-easy-ways-to-check-if-a-string-contains-only-numbers-in-javascript-305db38625e8
//https://byby.dev/js-remove-leading-zeros
// https://www.geeksforgeeks.org/javascript-program-to-remove-leading-zeros/
// https://www.techiedelight.com/count-occurrences-character-string-javascript/
// https://forum.uipath.com/t/removing-the-extra-dots-from-the-string/415233/2
// https://linuxhint.com/check-if-string-contains-dot-in-javascript/
// console.log(Number.isInteger(10)); // true
//console.log(Number.isInteger(10.5)); // false
// console.log(isFloat(10.5)); // Returns: true
//console.log(isFloat(10)); // Returns: false
// typeof
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
function countDot(s1, letter)
{
return s1.match( new RegExp(letter,'g') ).length;
}
function removeLeadingZeros(str)
{
// Use replace() with a regular expression to remove leading zeros
let newStr = str.replace(/^0+/, "");
// Print the result
console.log(newStr); // "123"
}
function containsOnlyDigits1(str) {
return /^\d+$/.test(str);
}
function containsOnlyDigits2(str) {
return !isNaN(str) && !isNaN(parseFloat(str));
}
function checkString1(string)
{
if(typeof string === "string")
{
console.log(!isNaN(string));
}
}
function checkString2(string)
{
return /^[0-9]*$/.test(string);
}
function checkNumber1(x) {
// check if the passed value is a number
if(typeof x == 'number' && !isNaN(x)){
// check if it is integer
if (Number.isInteger(x)) {
console.log('${x} is integer.');
}
else {
console.log('${x} is a float value.');
}
} else {
console.log('${x} is not a number');
}
}
// program to check if a number is a float or integer value
function checkNumber2(x)
{
let regexPattern = /^-?[0-9]+$/;
// check if the passed number is integer or float
let result = regexPattern.test(x);
if(result) {
console.log('${x} is an integer.');
}
else {
console.log('${x} is a float value.')
}
}
function isOnlyDigits(string) {
for (let i = 0; i < string.length; i++) {
var ascii = string.charCodeAt(i);
if (ascii < 48 || ascii > 57) {
output.innerHTML += "The " + string + " contains non-digits characters also. <br/>";
return false;
}
}
output.innerHTML += "The " + string + " contains only digits characters also. <br/>";
return true;
}
</script>
<body>
<!--
<h1>Double calendrier</h1>
<p>Blabla.....................</p>
<div class="col-md-2">Date: Start Date <br> <input type="text" id="date_picker1" size=9></div>
<div class="col-md-2">Date: End Date <br> <input type="text" id="date_picker2" size=9></div>
-->
<!--
<button onclick="myFunction()">Try it</button>
-->
<!--
<button onclick="send()">Request ...</button>
-->
<!--
<button id = "btn_action" onclick="toto()" disabled >Request ...</button>
-->
<p id="message">A voir </p>
<form method="post" name="form" action="destination02.php" onsubmit="return validateForm()" >
<!--
<input type="text" placeholder="Enter Data" name="data">
-->
<input type="hidden" id="date_start" name="date_start" >
<input type="hidden" id="date_end" name="date_end" >
<input type="hidden" id="verrou" name="verrou" >
<!--
<input type="hidden" id="table" name="table" >
-->
<input type="text" id="champ_table" name="champ_table" onkeyup="interrogationDB(this.value)">
<!--
<input id = "submit " type="submit" value="Submit" disabled >
-->
<!--
https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_js
-->
<!-- avant
<input id="submit" name="submit" type="submit" onClick="checkform()" disabled="disabled">
-->
<input type="submit" value="Submit">
</form>
<!--
<form method="POST">
<input type="submit" value="Sumbit my choice"/>
</form>
-->
<p>Date: <input type="text" id="datepicker_date_start"></p>
<br>
<p>Date: <input type="text" id="datepicker_date_end"></p>
<div id="dialog" title="Message" > <!--style='visibility: hidden'> -->
<p id ="dialog_message" style='visibility: hidden' >Certains champs ne sont pas conformes !. </p>
<input id="numb" onblur="myFunction()">
<p id="demo"></p>
<div id = "output"> </div>
</div>
</body>
</html>
<!--
https://www.tbs.fr/fr/chemise-homme-manches-courtes-micro-motif-bleu-marine-7927778.html
https://www.tbs.fr/fr/chemise-homme-a-motif-marine-5978963.html
https://www.tbs.fr/fr/chemise-homme-manches-courtes-coton/lin-bleu-9804792.html
-->