Question

有没有办法我们可以调整或破解默认的共同作用？请检查here。它是<input>，由<select>标记取代。现在，想要在<input type="number">向上和向下箭头中的选择框选项上添加箭头。

段：

<input type="text" id="date" data-format="DD-MM-YYYY" data-template="D MMM YYYY" name="date" value="09-01-2013">

<script>
$(function(){
    $('#date').combodate();    
});
</script>

Answer 1

您可以创建自己的按钮并使用jquery将它们覆盖在选择的输入上：

替换此

$(function(){
    $('#date').combodate();    
});

与

＆＃13;

$(function(){
  
    // create select wrapper and arrows
    function createSelectWrapper(){
      // select wrapper and arrows
      var select_wrapper = $("<span>", {"class": "select-wrapper"});
      var select_carets = $("<div>", {"class": "select__carets"}).appendTo(select_wrapper);
      var select_caretUp = $("<div>", {"class": "select__caret select__caret--up fa fa-caret-up"}).appendTo(select_carets);
      var select_caretDown = $("<div>", {"class": "select__caret select__caret--down fa fa-caret-down"}).appendTo(select_carets);

      return select_wrapper;
    }

    // add custom arrows to select input
    function upgradeSelect(){  
      // add all select inputs to the wrappers
      $("select").each(function(){
        var wrapper = createSelectWrapper();
        $(this).replaceWith(wrapper)
        $(this).appendTo(wrapper);
      });
    }
  
    $('#date').combodate();
  
    upgradeSelect();
    
    // handles select down arrow click
    $(".select__caret--down").on("click", function() {
      // find the select input we need
      var sel = $(this).parents(".select-wrapper").find("select");
      console.log(sel);
      // set focus to select input so we can use arrow keys
      $(sel).focus();
      // increment select next option
      $(sel).find("option:selected").prop("selected", false).next().prop("selected", true);
    });

    // handles select up arrow click
    $(".select__caret--up").on("click", function() {
      // find the select input we need
      var sel = $(this).parents(".select-wrapper").find("select");
      // set focus to select input so we can use arrow keys
      $(sel).focus();
      // increment select next option
      $(sel).find("option:selected").prop("selected", false).prev().prop("selected", true);
    });
  
});

＆＃13;

.select-wrapper{
  height: 30px;
  width: 100px; 
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
}
select{
  height: 100% !important;
  width: 100% !important;
  text-align: center;
  padding-left: 5px;
}
.select__carets{
  cursor: pointer;
  background-color: #999;
  width: 20px;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
}
.select__caret{
  height: 10px;
  color: #e5e5e5;
  display: block !important;
}
.select__caret:hover, .select__caret:focus{
  color: #555;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<input type="text" id="date" data-format="DD-MM-YYYY" data-template="D MMM YYYY" name="date" value="09-01-2013">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.16.0/moment.min.js"></script>
<script src="https://rawgit.com/vitalets/combodate/master/src/combodate.js"></script>

＆＃13;

此代码尚未经过广泛测试

在combodate选择框中添加箭头

1 个答案: