Picker Basic

picker will be able to enter a value for the input element through the other UI. The “content.type of picker” can be pre-used as such defined “date”. Or to define the “content” to “Function”, you can define the “picker’s content”.

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.

html

<div class="row">
    <div class="col-md-6">
        <label>Area</label>
        <div class="input-group" data-ax5picker="basic">
            <input type="text" class="form-control" placeholder>
            <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
        </div>
    </div>
</div>

js

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

    $(document.body).ready(function () {

        picker.bind({
            target: $('[data-ax5picker="basic"]'),
            direction: "top",
            contentWidth: 280,
            content: function (callBack) {
                var html = ''
                                + '<form style="padding:0 5px;">'
                                + '<div class="form-group">'
                                + '<label for="exampleInputWidth">Width</label>'
                                + '<input type="number" class="form-control" id="exampleInputWidth" placeholder="width" value="10">'
                                + '</div>'
                                + '<div class="form-group">'
                                + '<label for="exampleInputHeight">Height</label>'
                                + '<input type="number" class="form-control" id="exampleInputHeight" placeholder="height" value="10">'
                                + '</div>'
                                + '</form>'
                        ;
                callBack(html);
            },
            onStateChanged: function () {
                if (this.state == "open") {
                    // ..
                    console.log(this);
                }
            },
            btns: {
                ok: {
                    label: "Calculate", theme: "btn-primary", onClick: function () {
                        //console.log(this);
                        var w = this.item.pickerContent.find("#exampleInputWidth").val() || 1;
                        var h = this.item.pickerContent.find("#exampleInputHeight").val() || 1;
                        this.self.setContentValue(this.item.id, 0, w * h);
                        this.self.close();

                    }
                }
            }
        });

    });
</script>

When the user clicks on the btns,onClick is called. Contains a variety of objects necessary for programming of the passed onClick > this from picker. In the example, we used this.item and this.self.

onClick > this

{
"self": [picker class instance],
"item": [Object],
"key": [String], // btns's key
"value": [Object] // btns click object
}