Picker Buttons

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-calendar/dist/ax5calendar.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-calendar/dist/ax5calendar.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-formatter/dist/ax5formatter.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>Multi Date</label>
        <div class="input-group" data-ax5picker="basic">
            <input type="text" class="form-control" placeholder="yyyy/mm/dd">
            <span class="input-group-addon">~</span>
            <input type="text" class="form-control" placeholder="yyyy/mm/dd">
            <span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
        </div>
    </div>
</div>

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

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

        picker.bind({
            target: $('[data-ax5picker="basic"]'),
            direction: "top",
            content: {
                width: 270,
                margin: 10,
                type: 'date',
                config: {
                    control: {
                        left: '<i class="fa fa-chevron-left"></i>',
                        yearTmpl: '%s',
                        monthTmpl: '%s',
                        right: '<i class="fa fa-chevron-right"></i>'
                    },
                    lang: {
                        yearTmpl: "%s년",
                        months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                        dayTmpl: "%s"
                    }
                }
            },
            onStateChanged: function () {

            },
            btns: {
                today: {
                    label: "Today", onClick: function () {
                        var today = new Date();
                        this.self
                                .setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-mm-dd"}))
                                .setContentValue(this.item.id, 1, ax5.util.date(today, {"return": "yyyy-mm-dd"}))
                                .close()
                        ;
                    }
                },
                thisMonth: {
                    label: "This Month", onClick: function () {
                        var today = new Date();
                        this.self
                                .setContentValue(this.item.id, 0, ax5.util.date(today, {"return": "yyyy-mm-01"}))
                                .setContentValue(this.item.id, 1, ax5.util.date(today, {"return": "yyyy-mm"})
                                        + '-'
                                        + ax5.util.daysOfMonth(today.getFullYear(), today.getMonth()))
                                .close();
                    }
                },
                ok: {label: "Close", theme: "default"}
            }
        });

    });
</script>