日期选择器如何只显示日历图标不显示input框

你可以使用CSS将input框设置为不可见，然后在其旁边添加一个带有日历图标的元素，使用JavaScript代码将日历图标与日期选择器关联起来。以下是一个简单的示例：

HTML代码：

<div class="date-picker">
  <input type="text" id="datepicker" name="datepicker" style="display:none;">
  <label for="datepicker" class="calendar-icon"><i class="fa fa-calendar"></i></label>
</div>

CSS代码：

.calendar-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.calendar-icon i {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
}

.date-picker input[type="text"] {
  display: none;
}

JavaScript代码：

$(function() {
  $("#datepicker").datepicker();
});

这里使用了jQuery库中的datepicker插件来实现日期选择器功能。当用户点击日历图标时，会触发与id为“datepicker”的input元素相关联的datepicker插件，并弹出日期选择器。