TimePickerFor.cshtml

@using Syncfusion.EJ2
@*@model directive allows you to access the model values*@
@model EJ2CoreSampleBrowser.Controllers.TimeValue
@section ControlsSection{
    <div class=" control-section">
        <div class="timepicker-section">
            <div id="wrapper" class="timepicker-control">
                <div class="tabs-wrap">
                    <div class="wrap">
                        <form method="post">
                            <ejs-timepicker id="timepicker" name="value" ejs-for="@Model.value"></ejs-timepicker>
                            <div id="errorMessage">
                                <span asp-validation-for="value"></span>
                            </div>
                            <div id="submitbutton">
                                <ejs-button id="submitButton" content="Submit"></ejs-button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
@*custom code start*@
<style>
    #wrapper {
        max-width: 246px;
        margin: 30px auto;
        padding-top: 20px;
    }

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

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

    #submitbutton {
        margin: 10px auto;
        text-align: center;
    }

    #errorMessage {
        color: red;
        text-align: center
    }
</style>
@*custom code end*@

@section ActionDescription{
    <div id="action-description">
        <p>
            Click/Touch the submit button to post the selected value in the TimePicker. When posting the null value, validation error message will be shown below the TimePicker.
        </p>
    </div>
}

@section Description{
    <div id="description">
        <p>
            This sample demonstrates the strongly typed extension support in TimePicker. Value is set as model object to the TimePicker from the code behind, and its set to TimePicker in view page by invoking the strongly typed TimePickerFor helper with the lamba expression.
        </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>

}