Picker Numpad

Paste the following code into the head section of your site’s HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/ax5ui/ax5ui-picker/dist/ax5picker.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-picker/master/dist/ax5picker.min.js"></script>

Required file picker to use the plug-in is a “jQuery, ax5core, ax5 picker”. If you want to use UI such as the picker calendar will ax5ui-calendar needs.

<div class="row">
    <div class="col-md-6">
        <label>Numpad</label>
        <input type="text" data-ax5picker="numpad" class="form-control" placeholder>
    </div>
</div>

<script type="text/javascript">
    var picker = new ax5.ui.picker();

    $(document.body).ready(function () {
        picker.bind({
            target: $('[data-ax5picker="numpad"]'),
            direction: "auto",
            content: {
                width: 200,
                margin: 10,
                type: 'numpad',
                config: {
                    btnWrapStyle: "padding:3px;width:25%;",
                    btnStyle: "width:100%",
                    btnTheme: "primary",
                    specialBtnWrapStyle: "padding:3px;width:25%;",
                    specialBtnStyle: "width:100%;padding-left:0px;padding-right:0px;",
                    specialBtnTheme: ""
                    /*
                     keyArray: [
                     {value: "7"},
                     {value: "8"},
                     {value: "9"},
                     {label: "BS", fn: "back"},
                     {value: "4"},
                     {value: "5"},
                     {value: "6"},
                     {value: "-"},
                     {value: "1"},
                     {value: "2"},
                     {value: "3"},
                     {value: ""},
                     {value: "."},
                     {value: "0"},
                     {value: ""},
                     {label: "OK", fn: "close"}
                     ]
                     */
                },
                formatter: {
                    pattern: 'number'
                }
            },
            onStateChanged: function () {
                //console.log(this);
            }
        });
    });
</script>