在日期选择器中悬停时显示箭头答案

【问题标题】：Display arrows when hover in datepicker在日期选择器中悬停时显示箭头
【发布时间】：2017-03-01 16:08:05
【问题描述】：

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

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

我想删除这个箭头。

这是代码：

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");

                 });
    }

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

【问题讨论】：

如果没有更多关于您的选择器是如何实现的细节，这个问题是无法回答的。你能发布一个最小的工作示例吗？
完成@nloewen。
你可以为.input-group-addon发布css
我还没有用于 input-group-addon 的 css，只有 bootstrap @ovokuro
我想因为输入有 type="date"，把它改成 type="input"

标签： javascript jquery html css datepicker

【解决方案1】：

你应该可以用这个 sn-p 删除它们：

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>

【讨论】：

谢谢！！ :) @gabrielperales