コンボボックスの選択ボックスに矢印を追加

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(){ 
 
    
 
    // 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); 
 
    }); 
 
    
 
});

.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; 
 
}

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

この

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

を置き換えます

このコードは、広範囲に、このような