https://wgrand.com.ua/core/lib/ui/updownfield/updownfield.js

1function UpDownField( field_id, opts )
2{
3  var defaults = 
4                {
5                  width: '70px',
6                  height: '32px',
7                  defaultValue: 0,
8                  minValue: 0,
9                  maxValue: 32768,
10                  decimalPlaces: 0,
11                  step: 1
12                };
13  var options = opts ? $.extend( defaults, opts ) : defaults;
14  
15  var container, field, buttonMinus, buttonPlus, height;
16  function init()
17  {
18    field = $("#" + field_id);
19    
20    var pre_val = parseFloat( ( $.trim( field.val() ) ).replace( ',', '.' ) );
21    var val = isNaN( pre_val ) ? options.defaultValue : pre_val.toFixed( options.decimalPlaces );
22      
23    field.css({ 'float': 'left', width: options.width, height: options.height, textAlign: 'center' }).val( val ).on( 'blur', function()
24    {
25      var pre_val = parseFloat( ( $.trim( this.value ) ).replace( ',', '.' ) );
26      var val = isNaN( pre_val ) ? options.defaultValue : pre_val.toFixed( options.decimalPlaces );
27      this.value = val;      
28      if( options.onChange )
29      {
30        options.onChange( val );
31      }
32    });
33    container = field.wrap( "<div class='updownfield_container'></div>" );
34    height = options.height; //field.outerHeight();
35    buttonMinus = $( "<button>" )
36                    .addClass( "button updownfield_button updownfield_button_left" )
37                    .attr( { type: 'button' } )
38                    .css( { 'float': 'left', 'width': height, 'height': height } )
39                    .html( "<i class='fa fa-minus' aria-hidden='true'></i>" )
40                    .insertBefore( field )
41                    .on( 'click', function()
42                    {
43                      var fld_val = parseFloat( ( $.trim( field.val() ) ).replace( ',', '.' ) );
44                      var pre_val = ( isNaN( fld_val ) ? options.defaultValue : fld_val ) - options.step;
45                      var val = Math.max( options.minValue, pre_val ).toFixed( options.decimalPlaces );
46                      field.val( val );
47                      if( options.onChange )
48                      {
49                        options.onChange( val );
50                      }
51                    });
52                     
53    buttonPlus = $( "<button>" )
54                    .addClass( "button updownfield_button updownfield_button_right" )
55                    .attr( { type: 'button' } )
56                    .css( { 'float': 'left', 'width': height, 'height': height } )
57                    .html( "<i class='fa fa-plus' aria-hidden='true'></i>" )
58                    .insertAfter( field )
59                    .on( 'click', function()
60                    {
61                      var fld_val = parseFloat( ( $.trim( field.val() ) ).replace( ',', '.' ) );
62                      var pre_val = ( isNaN( fld_val ) ? options.defaultValue : fld_val ) + options.step;
63                      var val = Math.min( options.maxValue, pre_val ).toFixed( options.decimalPlaces );
64                      field.val( val );
65                      if( options.onChange )
66                      {
67                        options.onChange( val );
68                      }
69                    });
70  }
71  init();
72  return this;
73}