RangeSliders for hours and days

Kendo range-style widgets for manipulating hours and days. Rachel Hagerman

by Dan Mathisen

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.1.429/styles/kendo.common.min.css">
<script src="https://kendo.cdn.telerik.com/2015.1.429/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.1.429/js/kendo.ui.core.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.1.429/styles/kendo.default.min.css">
<h3>Hours</h3>
 <div id="timeSlider" data-bind="value: selectedTimeRange" data-role="rangeslider" data-small-step="900000" data-min="21600000" data-max="108000000" data-large-step="3600000" data-tickplacement="none" data-tooltip="{
                 template:'#=kendo.toString(new Date(selectionStart), \'h:mm tt\' ) # to #=kendo.toString(new Date(selectionEnd), \'h:mm tt\' ) #'
                 }" >
    <input />     
    <input />
</div>

<div>
    <span data-bind="text: hoursStart"></span> to <span data-bind="text: hoursEnd"></span>
</div>

CSS

.k-tick > .k-label{
    display: none;
}

JavaScript

(function () {
    var viewModel = kendo.observable({
        selectedTimeRange: [],
        hoursStart: '12:00am',
        hoursEnd: '12:00am',
        timeRangeChanged: function(){
            var timeRange = viewModel.selectedTimeRange;
            var startTime = kendo.toString(new Date(timeRange[0]), 'h:mm tt' );
            var endTime = kendo.toString(new Date(timeRange[1]), 'h:mm tt' );
            viewModel.set('hoursStart', startTime);
            viewModel.set('hoursEnd', endTime);
        },
        dateRangeChanged: function(){
            var dateRange = $("#dateSlider").data("kendoRangeSlider").value();
            var startdate = kendo.toString(new Date(dateRange[0]), 'M/d/yyyy' );
            var enddate = kendo.toString(new Date(dateRange[1]), 'M/d/yyyy' );
            viewModel.set('dateStart', startdate);
            viewModel.set('dateEnd', enddate);
            viewModel.set('selectedDateRange', dateRange);
        },
        updateDateSlider: function(){
            if ( viewModel.selectedStartDate <= viewModel.selectedEndDate)
            {
                // reinitialize the date slider, since sliders do not support dynamic changes
                var slider = $("#dateSlider").data("kendoRangeSlider");
                    if (slider){
                var wrapper = slider.wrapper;
                var element = slider.element;
                slider.destroy();
                wrapper.before(element.show());
                wrapper.remove();
            }
            $("#dateSlider").kendoRangeSlider({
                largeStep: 86400000,
                smallStep: 86400000,
                min: viewModel.selectedStartDate.getTime(),
                max: viewModel.selectedEndDate.getTime(),
                value: [viewModel.selectedStartDate.getTime(), viewModel.selectedEndDate.getTime()],
                tooltip: {
                    template: kendo.template('#=kendo.toString(new Date(selectionStart), \'M/d/yyyy\' ) # to...