javascript - 在日期选择器中悬停时显示箭头

Question

我有一个这样的日期选择器:

当我悬停时，会出现三个箭头来更改日期或显示日历。

我想删除这个箭头。

这是代码:

link: function (scope, element, attr, ngModel) {
      if (attr.type !== 'date') return;
          var calendarioIco=angular.element('<div class="input-group-addon"><i class="fa fa-calendar"></i></div>');
          calendarioIco.on('click',function(){
              element.datepicker('show');
          })
          element.before(calendarioIco);
            jQuery(element).datepicker({
                autoclose:true,
                language:'es',
                weekStart:1,
                format:'yyyy-mm-dd',
            }).on('changeDate', function(dateText, inst){
                    jQuery(jQuery(element).data('greater')).datepicker("setStartDate",
                    jQuery(element).datepicker("getDate"));
                 }).on('mouseenter', function (){
                            $(this).removeClass("hover");

                 });
    }

谢谢你，对不起我的英语，

Answer 1

您应该可以使用此代码段删除它们:

input[type="date"]::-webkit-inner-spin-button, 
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  display: none;
}

你可以在这行下面看到一个例子

$('#withoutArrows').datepicker({});
$('#withArrows').datepicker({});

input[type="date"].clear-style::-webkit-inner-spin-button, 
input[type="date"].clear-style::-webkit-calendar-picker-indicator,
input[type="date"].clear-style::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>



<div class="col-md-4"><input id="withoutArrows" type="date" class="form-control clear-style"></div>
<div class="col-md-4"><input id="withArrows" type="date" class="form-control"></div>