TimeDuration.cshtml

@using Syncfusion.EJ2


@section ControlsSection{
    <div class=" control-section">
        <div class="timepicker-section">
            <div id="wrapper">
                <div class="tabs-wrap">
                    <div class="wrap">
                        <ejs-timepicker id="timepicker" value="ViewBag.value" itemRender="itemRanderHandler" open="onOpen"></ejs-timepicker>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

<script>
    //initial time variable declaration
    var startTime;
    function onOpen(args) {
        var timeObj = document.getElementById('timepicker').ej2_instances[0];
        if (timeObj.value && !isNaN(+timeObj.value))
            //assign the current value as the scrollTo value
            timeObj.scrollTo = timeObj.value;
    }
    //utilizing ItemEventArgs to access the beforeItemRender event argument
    function itemRanderHandler(args) {
        // inner element declaration for text
        var span = document.createElement('span');
        if (args.text === '12:00 AM') {
            //assign the initial value to the variable
            startTime = args.value;
        }
        //get the minutes details
        var minutes = (+args.value - +startTime) / 60000;
        //get the hours details
        var hours = parseInt('' + (minutes / 60), 10);
        var mins = (minutes % 60) / 6;
        //displayed text formation for each LI element.
        var minText;
        if (minutes === 0 || minutes === 30) {
            minText = minutes + ' mins';
        } else {
            minText = (mins > 0) ? ('.' + mins) : '';
        }
        span.innerHTML = ' (' + ((hours > 0) ? (hours + minText + ' hrs') : ('' + minText)) + ')';

        //disable the specific time from the selection
        if ((minutes / 60) % 3 === 0) {
            //disable the time values by addeding the e-disabled class.
            args.element.classList.add('e-disabled');
        }

        //append the custom SPAN element into LI element
        args.element.appendChild(span);
    }
</script>
@*custom code start*@
<style>
    #wrapper {
        display: block;
        margin: 0 auto;
        max-width: 300px;
        padding: 5% 0;
    }

    .tabs-wrap {
        padding: 0 0px 10px;
    }

    .e-bigger .control-section {
        margin-top: 60px;
    }

    .e-custom-style.e-timepicker.e-popup li.e-disabled span {
        color: #b7b1b1;
    }

    .e-custom-style.e-timepicker.e-popup li span {
        color: #727070;
    }

    .e-custom-style.e-timepicker.e-popup li.e-disabled span {
        height: 25px;
        width: 25px;
        font-size: 15px;
    }

    body.highcontrast .e-custom-style.e-timepicker.e-popup li.e-hover span:hover,
    body.highcontrast .e-custom-style.e-timepicker.e-popup li.e-active.e-hover span {
        color: #fff;
    }

    body.highcontrast .e-custom-style.e-timepicker.e-popup li.e-active span {
        color: #000;
    }
</style>
@*custom code end*@


@section ActionDescription{
    <div id="action-description">
        <p>
           The following sample demonstrates the popup list element in specific time duration. Click/Touch the TimePicker popup icon to select the desired value.
        </p>
    </div>


}

@section Description{
    <div id="description">
        <p>
            The Time Duration sample illustrates, how to customize or disable the time values in time list popup by using
            <code>itemRender</code> event. Here, all the time values has addition information on duration between them in sequence and some of the values
            are disabled through itemRender event by adding the
            <code>e-disabled</code> class.By using the
            <code>scrollTo</code> property can set the scroll position to the given value when no value is selected or the selected value is not availble
            in the timepicker popup list.
        </p>
        <p>
            More information about the TimePicker and it's configuration can be found in the
            <a href="https://ej2.syncfusion.com/aspnetcore/documentation/timepicker/getting-started-core/" target="_blank"> documentation section</a>.
        </p>
    </div>


}

@section Meta{

       <meta content="This example demonstrates how to disable specific times like past time, current time in the ASP.NET Core TimePicker."/>
}