Javascript code to populate date and time field based on user Selection..?

I was designing an application to calculate cuf of solar panel on Hourly, Daily, Monthly and yearly basis…
I’ve created dropdown menu so that user can select one of the above mentioned option.

If user selects hourly then I need to populate 2 [input type=“Date”] fields with [yyyy-mm-dd hh] format
If user selects daily then I need to populate [input type=“Date”] with [yyyy-mm-dd] format

Here is my html code

 <select name="options">
        <option>Select The Value</option>
        <option value="a">Hourly</option>
        <option value="b">Daily</option>
  	    <option value="c">Monthly</option>
	    <option value="d">Yearly</option> 
 </select>

What is the javascript code…??

HTML:

<div id="wrapper">
<select id="select" name="options">
        <option>Select The Value</option>
        <option id="hourly" value="a">Hourly</option>
        <option id="daily" value="b">Daily</option>
  	    <option id="monthly" value="c">Monthly</option>
	    <option id="yearly" value="d">Yearly</option> 
 </select>
</div>

JS code:

var select=document.getElementById('select');
var wrappElement=document.getElementById('wrapper');



select.addEventListener('change',function(){
  if(select.value=='a'){
  var dateElement=document.createElement('input');
  dateElement.type='date';  
  wrappElement.appendChild(dateElement);
  var dateElement=document.createElement('input');
  dateElement.type='date'; 
  wrappElement.appendChild(dateElement);
  }
});
1 Like

Thank you @liontas76:slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.