File "picker01.html"
Full Path: /home/analogde/www/Prog/MMM/Fusion/Picker02/picker01.html
File size: 8.03 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>
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 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 toto()
{
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);
//https://www.xul.fr/demo.html?login="me"&password="1234"
//var essai = "425";
//window.location = "http://example.com/file.php?msg=" + date_start;
//window.location.href = "file.php?start=" + essai; // + "&end=" + date_end;
/*
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var PageToSendTo = "file.php?";
var MyVariable = "variableData";
var VariablePlaceholder = "variableName=";
var UrlToSend = PageToSendTo + VariablePlaceholder + MyVariable;
xmlhttp.open("GET", UrlToSend, false);
xmlhttp.send();*/
/* var mydata = 55;
var myname = "syed ali";
var userdata = {'id':mydata,'name':myname};
$.ajax({
type: "GET",
url: "file.php",
data:userdata,
success: function(data){
console.log(data);
}
});
*/
/*
var myval = "transfert";
$.ajax({
type: 'GET',
url: 'file.php',
data: {'variable': myval},
});
*/
}
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 );
})
///////
$('#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 );
})
////////////////
})
</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="destination.php">
<!--
<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" >
<script type="text/javascript">
var choix = $( "#date_picker1" ).datepicker("getDate");
//alert(choix);
//document.getElementById("custId").value = "My default value";
</script>
<!--
<input id = "submit " type="submit" value="Submit" disabled >
-->
<input id="submit" name="submit" type="submit" disabled="disabled">
</form>
<!--
<form method="POST">
<input type="submit" value="Sumbit my choice"/>
</form>
-->
</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
-->