Struggling to create a dynamic form that reveals additional fields when a date picker is used? I've searched for solutions, but everything I find involves complex validations and logic that exceed my needs.
I've had some success with revealing elements using :checked for radio inputs. Is there a similar method that works for date inputs? I'm open to using jQuery as well, especially since I'm already using it to prevent selecting past dates.
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
$('#date').attr('min', maxDate);
});.when, .form {display:none;}
input:checked ~ .when {display:block;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<h4>Are you sending or receiving?</h4>
<input type="radio" id="sender" name="clienttype"><label for="sender">Sending</label>
<input type="radio" id="receiver" name="clienttype"><label for="receiver">Receiving</label>
<div class="when">
<h4>When?</h4>
<input type="date" id="date" name="Date">
</div>
<div class="form">
Additional form fields can be added here
</div>