有没有办法显示输入文本的默认日期图标？

Question

我有一个输入type="text" 的表单，但它实际上是一个特定格式的日期字段。我需要在此表单的右上角显示日历图标。

<input class="form-control" value="01-12-2020" placeholder="Start date" type="text" name="started_at" id="started_at">

如果我将输入更改为 type="date"，则会显示图标，但它也会更改输入的行为，它会显示在占位符“mm/dd/yyyy”中并破坏此输入的 js 功能。

有没有办法为input=text 显示日历包图标？

Answer 1

我能看到在输入旁边添加图标的唯一方法是添加图像。在输入标签之前添加一个图像标签。

<img src="data.png"><input class="form-control" value="01-12-2020" placeholder="Start date" type="text" name="started_at" id="started_at">

Answer 2

尝试使用<span> 或<i> 标签，例如：

<i class="fa fa-envelope icon"></i> 
<input class="input-field" type="text"> 

您会在<input> 字段中看到一个信封图标。