730){ document.getElementById("fileupload").style.visibility="visible";}else{ document.getElementById("fileupload").style.visibility="hidden";}} Date: that code works perfectly, but How to implement this code into chronoform? I confused to put onchange event for datepicker😟. Thank you"> onChange event of datepicker - Forums

Forums

Please write a review for the extension you are using on the Joomla extensions directory before posting a new question as we are being spammed by many negative reviews.

Thank you for your support!

onChange event of datepicker

Yu
Yudhizth 23 Sep, 2015
Dear all,

I have datepicker and file upload with condition if datepicker value has interval more than 730 (2 years) then fileupload will visible else fileupload will hidden. I already have scratch code 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
    document.getElementById("fileupload").style.visibility="hidden";
  });


function myFunction(val) {
    //alert("The input value has changed. The new value is: " + val)
    var _myDate = new Date($('#datepicker').val()  );		
	var date2 = new Date();
	var timeDiff = Math.abs(date2.getTime() - _myDate.getTime());
	var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

		var elem = document.getElementById("interval");
		elem.value = (diffDays);
		if (diffDays > 730){
	document.getElementById("fileupload").style.visibility="visible";
}else{
	document.getElementById("fileupload").style.visibility="hidden";
}
}

  </script>
</head>
<body>
 
 
<p>Date: <input type="text" id="datepicker" onchange="myFunction(this.value)"></p> 

<p><input type="hidden" id="interval"></p>
<p><input type="file" id="fileupload"></p>
 
</body>
</html>


that code works perfectly, but How to implement this code into chronoform? I confused to put onchange event for datepicker😟.

Thank you
Gr
GreyHead 23 Sep, 2015
Hi Yudnizth,

In the Designer tab, open the Datepicker element and click the Advanced tab, then scroll down to the On date selected box, you can add the name of a JavaScript function there and it will be executed when a date is selected.

Bob
Yu
Yudhizth 23 Sep, 2015
Thank you Bob,

I've been try to put this js code into load javascript before html render 

function getRange() {
    //alert("The input value has changed. The new value is: " + val)
    var _myDate = new Date($('#start_date').val()  );		
	var date2 = new Date();
	var timeDiff = Math.abs(date2.getTime() - _myDate.getTime());
	var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

		//var elem = document.getElementById("interval");
		//elem.value = (diffDays);
		if (diffDays > 730){
	document.getElementById("fileupload").style.visibility="visible";
}else{
	document.getElementById("fileupload").style.visibility="hidden";
}
}



with fileupload load stat = parent hidden
on date selected = getRange
It still not work.
Maybe I miss something?

Thank you.
Gr
GreyHead 23 Sep, 2015
Hi Yudhizth,

What do you see when you check in your browser web developer tools?
Are there any JavaScript errors reported?
Is the function running when the date is selected?
Is the calculation giving you the correct value for diffDays?

Bob
Yu
Yudhizth 25 Sep, 2015
Thank you Bob,

Yes, it was show an error "Uncaught TypeError: $ is not a function" when date is selected.
Yu
Yudhizth 25 Sep, 2015
I was able to resolve the issue with the following Load JavaScript code modification: 

function getRange(val) {
	var _myDate = new Date(jQuery("#start_date").val()  );	

	var date2 = new Date();
	var timeDiff = Math.abs(date2.getTime() - _myDate.getTime());
	var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

		var elem = document.getElementById("interval");
		elem.value = (diffDays);
		if (diffDays > 730){
	document.getElementById("fileupload").style.visibility="visible";
}else{
	document.getElementById("fileupload").style.visibility="hidden";
}
}


I can get the interval, but I still can't show the file upload. I set Load State to Hidden. And I put this 
document.getElementById("fileupload").style.visibility="visible";
but doesn't work. Maybe chronoform has another way to show the element?

Thank you
Yu
This topic is locked and no more replies can be posted.