Add Spinner for Dates

Environment

Product Version	2018.2.516
Product	Progress® Kendo UI® Date and Time Pickers for jQuery

Description

How can I add spinner buttons and use them to change the date in the DateTimePicker?

Solution

1. Add span with up and down arrows to the k-select element.
2. Handle the click event of the arrows.
3. Use the value method to change the day.

<style>
    .k-datetimepicker{
        width: 60%;
    }

    .myUpArrowClass {
        position: relative;
        left: 10px;
        top: -5px;
    }

    .myDownArrowClass {
        position: relative;
        left: -10px;
        top: 5px;
    }

    .k-datetimepicker .k-picker-wrap {
        padding-right: 7em;
    }

    .k-datetimepicker .k-select {
        width: 7em;
    }

    .k-datetimepicker .k-select .k-link-date {
        margin-left: 5px;
    }
</style>

<input id="datetimepicker" />

<script>
    var dt = $("#datetimepicker").kendoDateTimePicker({
        value: new Date(),
        format: "dd/MM/yyyy hh:mm tt"
    }).data("kendoDateTimePicker");
    var select = dt.wrapper.find(".k-select");
    var arrows = '<span class="arrowsWrapper"><span class="myUpArrowClass k-icon k-i-arrow-60-up"></span><span class="myDownArrowClass k-icon k-i-arrow-60-down"></span></span>';

    $(arrows).appendTo(select);
    $(".myUpArrowClass").on("click", {
        day: 1
    }, changeDay);
    $(".myDownArrowClass").on("click", {
        day: -1
    }, changeDay);

    dt.wrapper.on("keydown", function(e) {
        if (e.keyCode === 107) { //Num +
            e.preventDefault();
            $(".myUpArrowClass").trigger("click");
        } else if (e.keyCode === 109) { //Num -
            e.preventDefault();
            $(".myDownArrowClass").trigger("click");
        }
    });

    function changeDay(data) {
        var dtp = $("#datetimepicker").data("kendoDateTimePicker");
        var val = new Date(dtp.value());

        val.setDate(val.getDate() + data.data.day);
        dtp.value(val);
        dtp.trigger("change");
    };
</script>