Date Select

html

<div id="build-target"></div>

<script type="text/javascript">
    $(document.body).ready(function () {
        var
            buildTarget = $("#build-target"),
            today = new Date();

        buildTarget.html(
            '<div id="calendar-target-01" style="width:300px;border:1px solid #888;padding: 10px;float:left;margin: 10px;"></div>'
            + '<div id="calendar-target-02" style="width:300px;border:1px solid #888;padding: 10px;float:left;margin: 10px;"></div>'
            + '<div style="clear:both;"></div>'
        );

        new ax5.ui.calendar({
            target: document.getElementById("calendar-target-01"),
            control: {
                left: '<i class="fa fa-chevron-left"></i>',
                yearTmpl: '%s',
                monthTmpl: '%s',
                right: '<i class="fa fa-chevron-right"></i>',
                yearFirst: true
            },
            displayDate: today,
            multipleSelect: 3
        }).setSelection([ax5.util.date(today, {'add': {d: -2}}), ax5.util.date(today, {'add': {d: -3}}), ax5.util.date(today, {'add': {d: -4}})]);

        new ax5.ui.calendar({
            target: document.getElementById("calendar-target-02"),
            control: {
                left: '<i class="fa fa-chevron-left"></i>',
                yearTmpl: '%s',
                monthTmpl: '%s',
                right: '<i class="fa fa-chevron-right"></i>',
                yearFirst: true
            },
            displayDate: (new Date()),
            multipleSelect: 2
        }).setSelection([ax5.util.date(today, {'add': {d: -2}}), ax5.util.date(today, {'add': {d: -3}})]);

    });
</script>