如何在input[type=date]获取值时显示元素？渐进式表单字段显示方案咨询

好问题！可惜的是，CSS里并没有类似:checked这种能直接监听日期输入框是否有值的伪类——CSS没法追踪输入框的value变化状态。不过既然你已经在使用jQuery，我们可以轻松实现这个需求，而且能和你现有的日期限制代码无缝结合。

解决方案思路 #

我们可以通过监听日期输入框的change事件（或者input事件，看需求），当用户选择了有效日期时，显示你的额外表单字段；如果用户清空了日期，则隐藏它。

完整代码示例 #

HTML（保留你的原有结构）

<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"> 
    Extra form fields go here 
</div>

CSS（沿用你的现有样式）

.when, .form {display:none;} 
input:checked ~ .when {display:block;}

JavaScript（整合日期限制+新增显示逻辑）

$(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); 

    // 新增逻辑：监听日期选择变化，控制额外表单显示
    $('#date').on('change', function() {
        // 检查日期输入框是否有有效值
        if ($(this).val()) {
            $('.form').show();
        } else {
            $('.form').hide();
        }
    });
});

额外优化点 #

如果你想要更即时的反馈（比如用户手动输入日期字符时就触发显示，而不是必须点击选择器完成后），可以把change事件换成input事件：

$('#date').on('input', function() {
    if ($(this).val()) {
        $('.form').show();
    } else {
        $('.form').hide();
    }
});

说明 #

• 这个方案完全基于你已经在使用的jQuery，不需要引入额外库
• 逻辑简单直接：只要日期输入框有有效值，就显示额外表单，否则隐藏
• 和你现有的单选框显示逻辑、日期限制逻辑完美兼容

内容的提问来源于stack exchange，提问作者Tom Novella