Tweak Increment Step

The rich API of RadDateOnlyPicker allows you to change the increment/decrement step for each date part of the DateOnly value. For example, you can allow the end-user to increment/decrement the day value only by 5 and not by 1 as it is by default. The example below demonstrates how to do this:

Increasing increment/decrement step example

When the user clicks the up/down arrow buttons or presses the arrow keys, the ValueChanged event is fired. We need to handle this event for several reasons. First, we need to understand if the value of the RadDateOnlyPicker is increased or decreased. Second, we use ValueChanged event to additionally modify the changed value of RadDateOnlyPicker in the appropriate direction (up or down). Since we are changing a value in ValueChanged event, we need to set and reset a boolean flag, this is necessary because setting the value in the code will trigger the event as well.

As a prerequisite for the example, RadDateOnlyPicker should show up/down arrow buttons instead of a dropdown button. To these customizations, we need to add the following code:

this.radDateOnlyPicker1.ShowUpDown = true;

Me.RadDateOnlyPicker1.ShowUpDown = True

Here is the approach divided into separate steps:

1. In the form's Load event handler subscribe to the ValueChanged event of RadDateOnlyPicker. Define a DateOnly variable globally which holds the initial value:

DateOnly initialDateOnly;
private void Form1_Load(object sender, EventArgs e)
{
    initialDateOnly = this.radDateOnlyPicker1.Value;
    this.radDateOnlyPicker1.ValueChanged += new EventHandler(radDateOnlyPicker1_ValueChanged);
}

Private initialDateOnly As DateOnly
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    initialDateOnly = Me.RadDateOnlyPicker1.Value
    AddHandler RadDateOnlyPicker1.ValueChanged, AddressOf radDateOnlyPicker1_ValueChanged
End Sub

2. Here comes the ValueChanged handler implementation. In this part we are first checking whether the new value of RadDateOnlyPicker is bigger than the old one or not. Then, we are getting the MaskDateOnlyProvider responsible for the navigation between the date/time parts - hours, months, and years. If the provider states that the currently selected date part is day, we, depending on the the direction in which we want to change the value, call the Up/Down method four times, so that we can have a step of 5 days as a result. Please note that we are setting and resetting the boolean flag suspendValueChanged so that we can safely call Up/Down methods:

bool suspendValueChanged = false;
private void RadDateOnlyPicker1_ValueChanged1(object? sender, EventArgs e)
{
    DateOnly dt = this.radDateOnlyPicker1.Value;
    var daysDifference = dt.DayNumber - initialDateOnly.DayNumber;
    if (!suspendValueChanged)
    {
        MaskDateOnlyProvider provider = (this.radDateOnlyPicker1.DateOnlyPickerElement.TextBoxElement.Provider as MaskDateOnlyProvider);
        if (provider.List[provider.SelectedItemIndex].type  == PartTypes.Day)
        {
            suspendValueChanged = true;
            if (daysDifference < 0)
            {
                for (int i = 0; i < 4; ++i)
                {
                    this.radDateOnlyPicker1.DateOnlyPickerElement.TextBoxElement.Down();
                }
            }
            if (daysDifference > 0)
            {
                for (int i = 0; i < 4; ++i)
                {
                    this.radDateOnlyPicker1.DateOnlyPickerElement.TextBoxElement.Up();
                }
            }
            initialDateOnly = this.radDateOnlyPicker1.Value;
            suspendValueChanged = false;
        }
    }
}

Private suspendValueChanged As Boolean = False

Private Sub RadDateOnlyPicker1_ValueChanged1(ByVal sender As Object?, ByVal e As EventArgs)
    Dim dt As DateOnly = Me.radDateOnlyPicker1.Value
    Dim daysDifference = dt.DayNumber - initialDateOnly.DayNumber

    If Not suspendValueChanged Then
        Dim provider As MaskDateOnlyProvider = (TryCast(Me.radDateOnlyPicker1.DateOnlyPickerElement.TextBoxElement.Provider, MaskDateOnlyProvider))

        If provider.List(provider.SelectedItemIndex).type = PartTypes.Day Then
            suspendValueChanged = True

            If daysDifference < 0 Then

                For i As Integer = 0 To 4 - 1
                    Me.radDateOnlyPicker1.DateOnlyPickerElement.TextBoxElement.Down()
                Next
            End If

            If daysDifference > 0 Then

                For i As Integer = 0 To 4 - 1
                    Me.radDateOnlyPicker1.DateOnlyPickerElement.TextBoxElement.Up()
                Next
            End If

            initialDateOnly = Me.radDateOnlyPicker1.Value
            suspendValueChanged = False
        End If
    End If
End Sub

The result is shown below. Just with a single click of the up arrow key, we increase the value of the day by 5:

See Also

Design Time MaskDateOnlyProvider Properties Structure