How to make a button of this type? Is there such a standard form element to choose from?

alt text

    4 answers 4

    The element that you demonstrated is not a counter. This is a select box. There is no counter, but the element indicated by comrade @ emil will only work in Chrome. You can use the jQuery-UI threads. If memory serves there is such an element. Or use <input type="range" /> It is at least supported by 3 out of 4 major ones. If you want of course, you can write with pens on JS. Suppose so:

     <form> <input type=text id=month value="Январь" style="height:30px;"/> <input type=hidden id=incdec value=0 /> <input type=button id=inc value=ˆ style="margin-left:-35px;max-height:15px;margin-top:-15px" onclick="var monthYear = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь']; if(this.form.incdec.value<11){this.form.incdec.value++;this.form.month.value = monthYear[this.form.incdec.value];}"> <input type=button id=dec value=ˇ style="margin-left:-32px;max-height:15px;margin-top:15px" onclick="var monthYear = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь']; if(this.form.incdec.value>0){this.form.incdec.value--;this.form.month.value = monthYear[this.form.incdec.value];}"> </form>

    It remains to add input validation.

    • Well, maybe not a counter, but a select. The main thing that was like in the picture, the choice of the month by pressing the up and down arrows. - nMike
    • @nMike, the code is fixed. The truth is too thick;]. It is better to take out of the context of the form it is - stck

     <select size="1" multiple> 

       <input type='number'>

      This is from HTML5. The truth here is only numbers. So you can use numbers instead of the month 1..12. To not enter other values, set the parameters max and min.

      I also advise you to read here.

        Regular spiner J Kveri, but instead of numbers you substitute months from the array.

        Spiner

         $("#myinput") .spinner({min: 0, max: 11, increment: 1}) .on('change', function(){ var val = parseInt($(this).val(), 10), arrMonth = ['январь', 'февраль']; $(this).val(arrMonth[val]); });