Как изменить значок календаря даты ввода типа? - PullRequest
Новая
       13

Как изменить значок календаря даты ввода типа?

0 голосов
/ 03 ноября 2019

Я хочу знать, как я могу изменить логотип календаря, не используя jquery?

Я хочу, чтобы он выглядел, как на картинке:

this is the image

 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

Ответы [ 2 ]

0 голосов
/ 04 ноября 2019 

/* 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>

пожалуйста, ознакомьтесь с приведенной выше реализацией, может быть, это может помочь.

0 голосов
/ 03 ноября 2019

Как насчет этого? Я использовал изображение, полученное из поиска Google, вы, очевидно, использовали бы свое изображение. Я абсолютно разместил изображение на правой стороне ввода текста. Когда ввод становится 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...