jQuery NumberInput

Invoke the setDecimal method of the jqxNumberInput. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div class='hidden' id='jqxNumberInput'></div>
<div>
    <input style="margin-top: 20px;" type="button" id='toggleVisible' value="Set the visibility" />
</div>

CSS

.hidden {
    display: none;
}
.visible {
    display: block;
}
.jqx-nullable-number-input {
    position: relative;
    padding-right: 20px !important;
}
.clr-btn {
    background: white;
    border: none;
    border-radius: 3px;
    position: absolute;
    padding: 0;
    right: 1px;
    top: 0;
    height: 24px;
    width: 15px;
}

JavaScript

$("#jqxNumberInput").jqxNumberInput({
     width: '250px',
     height: '25px',
     theme: 'energyblue',
     decimal: null,
     inputMode: 'simple'
 });

 var clearBtn = document.createElement("button");
 var $clearBtn = $(clearBtn);
 $clearBtn.attr('type', 'button');
 $clearBtn.addClass('clr-btn');
 $clearBtn.append('<i>x</i>');
 $clearBtn.on('click', function () {
     $("#jqxNumberInput").jqxNumberInput('setDecimal', null);
 });

 $("#jqxNumberInput").append($clearBtn);

 $("#jqxNumberInput").addClass('jqx-nullable-number-input');


 $clearBtn.on('click', function () {
     $("#jqxNumberInput").jqxNumberInput('setDecimal', null);
 });

 $("#jqxNumberInput").addClass('jqx-nullable-number-input');

 $('#toggleVisible').on('click', function () {
     if ($('#jqxNumberInput').hasClass('hidden')) {
         $('#jqxNumberInput').removeClass('hidden');
         $('#jqxNumberInput').addClass('visible');
     } else {
         $('#jqxNumberInput').removeClass('visible');
         $('#jqxNumberInput').addClass('hidden');
     }

 });