无法在数据列表中显示用户输入日期

我有一个输入字段叫做创建日期，用户可以输入日期信息。当用户输入日期时，该日期应自动列在<datalist>中。但我没有得到预期的结果。无法在数据列表中显示用户输入日期

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

来源

2017-03-17 kavi

你的意思是，输入的日期应该是动态的数据列表改变？ –

<datalist>表示一组选项和需要被钩住，以控制（在这种情况下<input>）元素。 <datalist>和<input>之间有id冲突。这就是为什么代码片段不起作用。

然而，即使id冲突是固定的，这个代码可能并不如你预期的工作（如果我的理解是正确的） - 最后的结果是：<input>元素能够从<datalist>选项中选择值。由于<input>互动，<datalist>内容不会动态变化。

来源

2017-03-17 06:16:05 shaochuancs

然后，获得预期结果的正确方法是当前日期（自动列表）还是用户必须输入 – kavi

有多种方法可以获得预期结果。如果你可以使用数据绑定框架，比如AngularJS，React等，它将非常简单：将显示的文本绑定到变量X，并为该变量X（当前日期）指定一个默认值。用户输入新日期后，将新日期分配给X，并且显示的文本将自动更改。 – shaochuancs

如果你不能使用框架，只允许使用jQuery，或者甚至只允许使用原生JavaScript。代码将如下工作：1.在html中显示当前日期。 2.听用户输入事件。 3.当用户输入新的日期时，在html中更改显示的日期。 – shaochuancs

你给同一个ID cdate输入和数据列表这是不正确。

这是javascript的工作示例。

<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"> 
 
\t \t <datalist id="cdate"> 
 
    </datalist> 
 
    
 
<script> 
 
(function() { 
 
    var todaysDate = new Date(); 
 
    $('#cdate').append("<option value='" + todaysDate + "'>"); 
 

 
})(); 
 
</script>

来源

2017-03-17 06:09:28 RRajani

如上所述。改变代码

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>

因此，它会收到最新的用户也

来源

2017-03-17 06:55:54 kavi

无法在数据列表中显示用户输入日期

回答

相关问题