无法在datalist中显示用户输入日期

Question

我有一个名为创建日期的输入字段，用户可以在其中输入日期信息。当用户输入日期时，该日期应自动列在<datalist>中。但我没有得到预期的结果。

Creation Date <input type="text" list="cdate" id="cdate" class="tb1">
		<datalist id="cdate">
	    <option value="<%= new SimpleDateFormat("dd-MM-yyyy").format(new java.util.Date())%>">UNIT 1</option>
</datalist>

Answer 1

<datalist>表示一组选项，需要挂钩到控件元素（在这种情况下为<input>）。 id和<datalist>之间存在<input>冲突。这就是代码段不起作用的原因。

但是，即使修复了id冲突，此代码也可能无法正常工作（如果我的理解是正确的） - 最终结果是：<input>元素可以选择值来自<datalist>选项。由于<datalist>互动，<input>内容不会动态更改。

Answer 2

您向输入和datalist提供了相同的ID cdate，这是不正确的。

这是javascript的工作示例。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Creation Date <input type="text" list="cdate" class="tb1">
		<datalist id="cdate">
    </datalist>
    
 <script>
(function() {
    var todaysDate = new Date();
    $('#cdate').append("<option value='" + todaysDate + "'>");

})();
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如上所述。将代码更改为

Creation Date <input type="date" name="cdate" id="cdate" class="inp" value="<%= new SimpleDateFormat("dd-MM-yyyy").format(new java.util.Date())%>"><br><br></p><br><br>

这样它也会从用户那里收到日期