Calculate number of days between two dates

garyd · Post by **garyd** » Thu Oct 27, 2022 10:07 am

Hi, I'm trying to get the number of days between two editboxes (type=date). I'm using the following calculation in the conditions section to get the difference in millisecs before I do the final calculation to convert to days but not having any luck. I think my coding ignorance is showing!!
=GetTime([Editbox43])-GetTime([Editbox44])
Any help would be greatly appreciated

Post by **Pablo** » Thu Oct 27, 2022 10:21 am

I cannot help you with programming related questions because for me that may also take a lot of time to figure this out.
But, you can use all standard JavaScript functionality.

Tthis may be helpful:
https://www.w3schools.com/jsref/jsref_obj_date.asp

wwonderfull · Post by **wwonderfull** » Thu Oct 27, 2022 1:00 pm

And also check this if useful https://stackoverflow.com/questions/204 ... -two-dates

garyd · Post by **garyd** » Thu Oct 27, 2022 5:38 pm

I'm not asking for progamming code. However, I would like to know why an Editbox condition with the calculation getTime[Editbox1] (which I understand to be the correct command) does not put the time in millisecs since 1st Jan 1970 into the target Editbox, even though Editbox1 has date set as type and the target Editbox has number set as type?

Pablo wrote: ↑Thu Oct 27, 2022 10:21 am I cannot help you with programming related questions because for me that may also take a lot of time to figure this out.
But, you can use all standard JavaScript functionality.

Tthis may be helpful:
https://www.w3schools.com/jsref/jsref_obj_date.asp

Post by **Pablo** » Thu Oct 27, 2022 8:01 pm

If you need further assistance then please created a DEMO project, so we can see if there is an error.
For further details about how to share a project file, please see this FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

You can also check the error console of the browser. That will probably give you a clue what is wrong.

Note that the type of the editbox affects how the browser renders the input field. This can be different for each browser. This is unrelated to WWB.

garyd · Post by **garyd** » Fri Oct 28, 2022 9:47 am

Hi, please find below the requested link to the DEMO page along with the page HTML. I have tried using Firefox and Edge to run the code in:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 17 - https://www.wysiwygwebbuilder.com">
<link href="EzSocial.css" rel="stylesheet">
<link href="page2.css" rel="stylesheet">
<script src="jquery-3.6.0.min.js"></script>
<script>
function submitForm1()
{
var regexp;
var Editbox1 = document.getElementById('Editbox1');
if (!(Editbox1.disabled || Editbox1.style.display === 'none' || Editbox1.style.visibility === 'hidden'))
{
regexp = /(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.](19|20)[0-9]{2}/;
if (Editbox1.value.length != 0 && !regexp.test(Editbox1.value))
{
alert("The specified value is invalid.");
Editbox1.focus();
return false;
}
}
return true;
}
</script>
<script>
$(document).ready(function()
{
$("#Editbox1").change(function()
{
$('#Editbox2').val(getTime($('#Editbox1').val()));
});
$("#Editbox1").trigger('change');
});
</script>
</head>
<body>
<div id="wb_Form1" style="position:absolute;left:27px;top:36px;width:278px;height:266px;z-index:2;">
<form name="Form1" method="post" action="mailto:yourname@yourdomain.com" enctype="multipart/form-data" id="Form1" onsubmit="return submitForm1()">
<input type="date" id="Editbox1" style="position:absolute;left:23px;top:26px;width:157px;height:23px;z-index:0;" name="box1" value="" spellcheck="false">
<input type="number" id="Editbox2" style="position:absolute;left:23px;top:112px;width:215px;height:33px;z-index:1;" name="box2" value="" spellcheck="false">
</form>
</div>
</body>
</html>

Pablo wrote: ↑Thu Oct 27, 2022 8:01 pm If you need further assistance then please created a DEMO project, so we can see if there is an error.
For further details about how to share a project file, please see this FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

You can also check the error console of the browser. That will probably give you a clue what is wrong.

Note that the type of the editbox affects how the browser renders the input field. This can be different for each browser. This is unrelated to WWB.

BaconFries · Post by **BaconFries** » Fri Oct 28, 2022 9:53 am

When it is asked for a "Demo" it is a copy of your project (.wbs) file. This is because just looking at the source (html) doesn't let us see what settings you have used. Can you please upload a copy of the .wbs and provide a link so to download from.

Post by **Pablo** » Fri Oct 28, 2022 10:22 am

There is no 'getTime' function in JavaScript, see also the error in the console of the browser.

Note that this error is unrelated to WWB.

crispy68 · Post by **crispy68** » Fri Oct 28, 2022 1:50 pm

I have not implemented this in WB in the workspace but it should work if you add the code to the correct spots.

I changed your function in the head section to this:

Code: Select all

<script>
function GetDays(){
  var date1 = new Date(document.getElementById("Editbox1").value);
  var date2 = new Date(document.getElementById("Editbox2").value);
  return parseInt(Math.abs((date1 - date2) / (24 * 3600 * 1000)));
}
function cal(){
  if(document.getElementById("Editbox1")){document.getElementById("numdays").value = GetDays();}
}
</script>
<style>
#numday{position:absolute;left:0;top:300px;width:600px;font-family:arial;font-size:16px;color:000;}
</style>

I added style code above to style the output box I inserted in your code. However, if you add a box within WB you should be able to style it within WB and not need to add this manually.

In the body section, I changed Editbox2 to type=date. You have 2 date boxes. I added the label "Number of Days" div section below. I also added "onchange" code to each editbox. See below:

Code: Select all

<div id="wb_Form1" style="position:absolute;left:27px;top:36px;width:278px;height:266px;z-index:2;">
<form name="Form1" method="post" action="mailto:yourname@yourdomain.com" enctype="multipart/form-data" id="Form1" onsubmit="return submitForm1()">
<input type="date" id="Editbox1" style="position:absolute;left:23px;top:26px;width:157px;height:23px;z-index:0;" name="box1" value="" spellcheck="false" onchange="cal()">
<input type="date" id="Editbox2" style="position:absolute;left:23px;top:112px;width:215px;height:33px;z-index:1;" name="box2" value="" spellcheck="false" onchange="cal()">

<div id="numday"><label>Number of days:</label><input type="text" id="numdays" name="numday"/></div>
</form>
</div>

It may still need some tweaking but this should get you in the right direction.

crispy68 · Post by **crispy68** » Fri Oct 28, 2022 5:39 pm

Is this what you are after?

https://webbuildertemplates.com/demo/date/

If so, I can provide a copy of a demo project. I've tweaked the code as well.

garyd · Post by **garyd** » Sat Nov 05, 2022 5:41 am

Hi, that's exactly what I'm after!!
Sorry for the delay in replying but I've been away from the computer for a while.

crispy68 wrote: ↑Fri Oct 28, 2022 5:39 pm Is this what you are after?

https://webbuildertemplates.com/demo/date/

If so, I can provide a copy of a demo project. I've tweaked the code as well.

garyd · Post by **garyd** » Sat Nov 05, 2022 5:54 am

I've just copied across the code and got it working. Thanks for your help!!

crispy68 wrote: ↑Fri Oct 28, 2022 1:50 pm I have not implemented this in WB in the workspace but it should work if you add the code to the correct spots.

I changed your function in the head section to this:
Code: Select all
<script>
function GetDays(){
  var date1 = new Date(document.getElementById("Editbox1").value);
  var date2 = new Date(document.getElementById("Editbox2").value);
  return parseInt(Math.abs((date1 - date2) / (24 * 3600 * 1000)));
}
function cal(){
  if(document.getElementById("Editbox1")){document.getElementById("numdays").value = GetDays();}
}
</script>
<style>
#numday{position:absolute;left:0;top:300px;width:600px;font-family:arial;font-size:16px;color:000;}
</style>
I added style code above to style the output box I inserted in your code. However, if you add a box within WB you should be able to style it within WB and not need to add this manually.

In the body section, I changed Editbox2 to type=date. You have 2 date boxes. I added the label "Number of Days" div section below. I also added "onchange" code to each editbox. See below:
Code: Select all
<div id="wb_Form1" style="position:absolute;left:27px;top:36px;width:278px;height:266px;z-index:2;">
<form name="Form1" method="post" action="mailto:yourname@yourdomain.com" enctype="multipart/form-data" id="Form1" onsubmit="return submitForm1()">
<input type="date" id="Editbox1" style="position:absolute;left:23px;top:26px;width:157px;height:23px;z-index:0;" name="box1" value="" spellcheck="false" onchange="cal()">
<input type="date" id="Editbox2" style="position:absolute;left:23px;top:112px;width:215px;height:33px;z-index:1;" name="box2" value="" spellcheck="false" onchange="cal()">

<div id="numday"><label>Number of days:</label><input type="text" id="numdays" name="numday"/></div>
</form>
</div>
It may still need some tweaking but this should get you in the right direction.

crispy68 · Post by **crispy68** » Sat Nov 05, 2022 1:13 pm

@garyd,

I slightly updated the code in my demo versus what I posted previously. You can download the project file here to get the latest.

dahdah · Post by **dahdah** » Fri Jan 27, 2023 5:18 pm

bonjour monsieur merci pour le code c'est génial
est-ce que vous pouvez m'aider pour que la première date (Editbox1) soit fixée par exemple 31/12/2023 le client ne peut pas la changer
mais il peut entrer la date de la fin à la deuxième date
et le calcul se fait

dahdah · Post by **dahdah** » Fri Jan 27, 2023 5:20 pm

bonjour monsieur merci pour le code c’est génial
est-ce que vous pouvez m’aider pour que la deuxième date (Editbox2) soit fixée par exemple 31/12/2023 le client ne peut pas la changer
mais il peut entrer la date de la fin à la première date
et le calcul se fait

www.wysiwygwebbuilder.com

Calculate number of days between two dates

Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates

Re: Calculate number of days between two dates