We’ve heard your demands for a time span picker and we’ve answered them. No more using two date time pickers to setup your time intervals. We are happy to introduce the brand new RadTimeSpanPicker.

Default Components

We provide five default time span part components so you can easily set up the time intervals you wish to pick: DayTimeSpanComponent, HourTimeSpanComponent, MinuteTimeSpanComponent, SecondTimeSpanComponent and MillisecondTimeSpanComponent.

Each default component has three properties that determine the values available for picking: Minimum, Maximum and Step. When these properties are set the component’s ItemsSource is populated with decimal values that start from the Minimum value and end with the Maximum value, each time incremented with the Step value.

For example, if we wish to be able to pick intervals of time by day, but no more than 20 days, we should just add a DayTimeSpanComponent to our RadTimeSpanPicker and set its Maximum property:

<telerik:RadTimeSpanPicker>
    <telerik:RadTimeSpanPicker.TimeSpanComponents>
        <telerik:DayTimeSpanComponent Maximum="20"/>
    </telerik:RadTimeSpanPicker.TimeSpanComponents>
</telerik:RadTimeSpanPicker>
DaysComponent

Below you can find a sample definition of a RadTimeSpanPicker:

<telerik:RadTimeSpanPicker  GenerateDefaultComponents="true" />

When we set the GenerateDefaultComponents = true we set up our RadTimeSpanPicker to include three components: one HourTimeSpanComponent, one MinuteTimeSpanComponent and one SecondTimeSpanComponent with their default values for Minimum, Maximum and Step.


DefaultComponents

The five default components make the setup of a regular RadTimeSpanPicker very easy and fast.

Custom StepTimeSpanComponent

However, there might be more custom scenarios that require custom time span components. We’ve provided a way to handle that too.

For example, let’s say we want to be able to pick week intervals. To achieve this we would need to create a custom StepTimeSpanComponent and override its GetTicksForItem() method that returns a TimeSpan as ticks value corresponding to the passed item from the ItemsSource:

public class WeekTimeSpanComponent : StepTimeSpanComponentBase
{
    protected override Freezable CreateInstanceCore()
    {
        return new WeekTimeSpanComponent();
    }
 
    public override long GetTicksFromItem(object item)
    {
        if (item != null)
        {
            var ticksForOneUnit = 7;
            decimal selectedItemDecimal;
            if (decimal.TryParse(item.ToString(), out selectedItemDecimal))
            {
                return TimeSpan.FromDays((double)(ticksForOneUnit * selectedItemDecimal)).Ticks;
            }
        }
 
        return 0;
    }
}

Then just add it as component for our RadTimeSpanPicker:

<telerik:RadTimeSpanPicker>
    <telerik:RadTimeSpanPicker.TimeSpanComponents>
        <local:WeekTimeSpanComponent Header="Weeks" Minimum="1" Maximum="4" Step="1.5"/>
    </telerik:RadTimeSpanPicker.TimeSpanComponents>
</telerik:RadTimeSpanPicker>
WeekComponent

The default components as well as the custom WeekTimeSpanComponent rely on their Minimum, Maximum and Step properties to generate their ItemsSource

Custom TimeSpanComponentBase

However, there might be scenarios when we would like to set the ItemsSource of our custom component ourselves.

For example, if we wish to create a composite component that accepts TimeSpan values that can be any size of time interval: 1 hour, 5 days, 1 week, etc. We can achieve that by creating a custom TimeSpanComponentBase:

public enum TimePart
{
    Hours,
    Days,
    Weeks
}
 
public class MyDataObject
{
    public double Value { get; set; }
 
    public TimePart TimePart { get; set; }
 
    public override string ToString()
    {
        return this.Value + " " + this.TimePart.ToString();
    }
}
 
public class CompositeTimeSpanComponent : TimeSpanComponentBase
{
    public override long GetTicksFromItem(object item)
    {
        var dobj = (MyDataObject)item;
        if (dobj != null)
        {
            switch (dobj.TimePart)
            {
                case TimePart.Weeks:
                    var ticksForOneUnit = 7;
                    return TimeSpan.FromDays(ticksForOneUnit * dobj.Value).Ticks;
                case TimePart.Days:
                    return TimeSpan.FromDays(dobj.Value).Ticks;
                case TimePart.Hours:
                default:
                    return TimeSpan.FromHours(dobj.Value).Ticks;
            }
        }
 
        return 0;
    }
 
    protected override System.Windows.Freezable CreateInstanceCore()
    {
        return new CompositeTimeSpanComponent();
    }
}
     
public List<MyDataObject> CompositeItemsSource
{
    get
    {
        return new List<MyDataObject>()
        {
            new MyDataObject(){Value = 0.5, TimePart = TimePart.Weeks},
            new MyDataObject(){Value = 1, TimePart = TimePart.Weeks},
            new MyDataObject(){Value = 1.5, TimePart = TimePart.Weeks},
            new MyDataObject(){Value = 2, TimePart = TimePart.Weeks},
            new MyDataObject(){Value = 1, TimePart = TimePart.Days},
            new MyDataObject(){Value = 5, TimePart = TimePart.Days},
            new MyDataObject(){Value = 7, TimePart = TimePart.Days},
            new MyDataObject(){Value = 1, TimePart = TimePart.Hours},
            new MyDataObject(){Value = 8, TimePart = TimePart.Hours},
            new MyDataObject(){Value = 12, TimePart = TimePart.Hours}
        };
    }
}

Then just add it as component for our RadTimeSpanPicker:

<telerik:RadTimeSpanPicker >
    <telerik:RadTimeSpanPicker.TimeSpanComponents>
        <local:CompositeTimeSpanComponent ItemsSource="{Binding CompositeItemsSource}" Header="Choose interval"/>
    </telerik:RadTimeSpanPicker.TimeSpanComponents>
</telerik:RadTimeSpanPicker>
CompositeComponent

For more details about RadTimeSpanPicker you can visit our online documentation and take a look at our demos.

Go ahead and try it out, create your custom components and let us know what you think about it.


polya-pelova
About the Author

Polya Pelova

Software Developer, Telerik XAML Team

Related Posts

Comments

Comments are disabled in preview mode.