BlazorTimePicker

Time picker for Blazor developed by CRX Solutions.

Description

This is a component that will facilitate time picking in a Blazor project. By default it is designed to use the Bootstrap styling. But you can pass your own CSS classes through the following parameters (ContainerClass, RowClass, ColumnClass, and SelectClass)

UI Structure

<div class="@ContainerClass">
    <div class="@RowClass">
        <div class="@ColumnClass">
           <InputSelect class="@SelectClass"></select>
        </div>
        <div class="@ColumnClass">
           <InputSelect class="@SelectClass"></select>
        </div>
    </div>
</div>

Notice

This component is still in development and is not completely finished yet.

Installation

Download and install the BlazorTimePicker package from NuGet

Usage

In _imports.razor file add the following using reference @using BlazorTimePicker
Then in the razor page add the CRXTimePicker component <CRXTimePicker></CRXTimePicker>

Parameters

Parameter Name	Description
Time [TimeSpan]	Initial time you want the BlazorTimePicker to be set to Default value: 0 Example: `Time="@(new TimeSpan(8,30,0))`
MinutesSteps [int]	Minute interval Default value: 5 Example: `MinutesSteps="10"`
StartTime [TimeSpan]	From which time you want the BlazorTimePicker to start from e.g. when you have 'Time From' and 'Time To' and you want the 'Time To' to start from the selected 'Time From' Default value: 0 Example: `StartTime="@(new TimeSpan(12,45,0))`
ContainerClass [string]	Default value: "container" Example: `ContainerClass="container"`
RowClass [string]	Default value: "row" Example: `RowClass="two fields"`
ColumnClass [string]	Default value: "col-sm" Example: `ColumnClass="column"`
SelectClass [string]	Default value: "form-control" Example: `SelectClass="ui fluid dropdown"`
TimeChanged [`EventCallback<TimeSpan>`]	Default value: N/A Example: N/A

Examples

Description	Example
Setting initial time	`<CRXTimePicker Time="@(new TimeSpan(8,30,0))"></CRXTimePicker>`
Setting initial time and minutes interval	`<CRXTimePicker Time="@(new TimeSpan(8,30,0))"MinutesSteps="15" ></CRXTimePicker>`
Two way data binding for Time property	`@code {` `private TimeSpan timeTo;` `}` `<CRXTimePicker @bind-Time"@timeTo"></CRXTimePicker>`

Versions

1.1.9

Replaced <select> elements with <InputSelect>

1.1.8

Updated package details

1.1.7

This version included the feature to have two way data binding for the Time property using a standardized way @bind-Time="<your property here>"

1.1.6

This version included some code improvements and bug fixes

1.0.0

This was the initial version

Upcoming Features

Include Bootstrap classes by default
Support for 12-hour

Contribution & Feedback

Please feel free to use this component and do not hesitate to open an issue should you encouter any.
You are more then welcome to share your feedback with us regarding this component.

tossnet / blazortimepicker Goto Github PK