如何更改输入类型日期的日历图标？答案

【问题标题】：How to change the calendar icon of an input type date?如何更改输入类型日期的日历图标？
【发布时间】：2019-11-04 19:49:16
【问题描述】：

我想知道如何在不使用 jquery 的情况下更改日历徽标？

我希望它看起来像图片中的那样：

 input
 {
        width: 50%;
        padding: 8px;
        border-radius: 10px;
        margin-bottom: 5%;
        border: 1px solid #CCCCCC;
        font-size: 13px;
    }
  
  
  
  .fecha input[type="date"]::-webkit-calendar-picker-indicator
  
    {
        color: rgba(0, 0, 0, 0);
        opacity: 1;
        background-image: url("./../some-folder/some-file.svg");
        background-repeat: no-repeat;
        background-position: 100% center;
        background-size: 20px;
        cursor: pointer;
    }

<div class="form-row fecha">
       <div class="col-12">
         <input placeholder="Fecha de Inicio"  type="text" onfocus="  (this.type='date')" onblur="(this.type='text')">
         </div>

但我不喜欢它的样子，它看起来不像图片。

我正在使用 bootstrap4（没有 Jquery）和 sass

【问题讨论】：

哪个图标？我们在您发布的代码示例中看不到该图标。

标签： html css sass bootstrap-4

【解决方案1】：

/* Styles for wrapping the search box */

.main {
    width: 50%;
    margin: 50px auto;
}

/* Bootstrap 4 text input with search icon */

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #000;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



    <title>Hello, world!</title>
  </head>
  <body>
  <div class="row">
  <div class="col-6">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="">
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">
     <i class="fa fa-calendar" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  </div>
  </div>
  
  <br>
  <p>Other Way using no css</p>
  <!--Another way-->
  <div class="row">
  <div class="col-6">
   <div class="input-group mb-2 mr-sm-2">
   <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    <div class="input-group-append">
     <i class="input-group-text fa fa-calendar" aria-hidden="true"></i>
     
    </div>
    
  </div>
  </div>
  </div>

  
  

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

请看上面的实现，可能会有所帮助。

【讨论】：

它看起来很棒，谢谢，但我不知道如何使用输入类型 =“日期”来实现这种风格。当点击图标时，会出现一个日历并选择日期你知道我该怎么做吗？

【解决方案2】：

这个怎么样？我使用了一张从谷歌搜索得到的图片，你显然会使用你的图片。我将图像绝对定位在文本输入的右侧。当输入变为 type="date" 时，它就消失了。

input {
  width: 50%;
  padding: 8px;
  border-radius: 10px;
  margin-bottom: 5%;
  border: 1px solid #CCCCCC;
  font-size: 13px;
}

.fecha input[type="date"]::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  position: relative;
  opacity: 1;
  cursor: pointer;
}
    
.calendar {
  position: absolute;
  right: 50%;
  top: 12px;
}
input[type="date"] + .calendar {
  display: none;
}

<div class="form-row fecha">
  <div class="col-12">
    <input placeholder="Fecha de Inicio"  type="text" onfocus="  (this.type='date')" onblur="(this.type='text')">
    <img class="calendar" src="https://freeiconshop.com/wp-content/uploads/edd/calendar-solid.png" height="24" width="24" />
  </div>
</div>

【讨论】：

它非常接近，但是......我希望它一直被看到并且箭头消失。你知道怎么做吗？
听起来您不想使用日期选择器。您是否考虑过使用带有掩码和/或 JS 输入验证的文本输入？
不，我没想到你知道如何执行它
您到底想要什么？更改您的问题以描述您想要的确切功能。