Date/Time Picker set enabled time range for different days

[Ian]

Hi Telerik

I am using the RadDateTimePicker to allow the user to select a date and a time.

I have successfully set the MinDate and MaxDate to limite the user to a date range and I also set the MinTime and MaxTime to limit the user to an allowable timeslot.

We now require the user to be restricted to different time slots on different days i.e. Monday to Friday 09:00 - 17:00, Saturday 10:00 - 14:00 and Sunday 12:00 - 13:00 to reflect different opening hours of a shop.

When setting the MinTime and MaxTime i use the following code:

var rdtpc = this.rdtp_TargetDate.DateTimePickerElement.CurrentBehavior as RadDateTimePickerCalendar;
rdtpc.ShowTimePicker = true;
rdtpc.TimePicker.TimePickerElement.MinValue = DateTime.Today.Date.AddHours(9);
rdtpc.TimePicker.TimePickerElement.MaxValue = DateTime.Today.Date.AddHours(17);

 

This is fine for a single time range, but what event do I need to wire up to allow me to set different enabled time range for different days/dates?

Thanks

 

 

[Hristo]

Hi Ian,

You can restrict the available hours, by handling the ValueChanged event of the control. In the event handler, you can validate the selected value according to the day of the week and set different working hours. In order to update the element with the new min and max values, it will be also necessary to call its PrepareContent method: 

public partial class RadForm1 : Telerik.WinControls.UI.RadForm
{
    public RadForm1()
    {
        InitializeComponent();

        var rdtpc = this.radDateTimePicker1.DateTimePickerElement.CurrentBehavior as RadDateTimePickerCalendar;
        rdtpc.ShowTimePicker = true;
        rdtpc.TimePicker.Culture = new System.Globalization.CultureInfo("DE-de");

        rdtpc.TimePicker.TimePickerElement.InvalidateChildrenOnChildChanged = true;
        this.radDateTimePicker1.ValueChanged += RadDateTimePicker1_ValueChanged;
    }

    private void RadDateTimePicker1_ValueChanged(object sender, EventArgs e)
    {
        var rdtpc = this.radDateTimePicker1.DateTimePickerElement.CurrentBehavior as RadDateTimePickerCalendar;
        DayOfWeek dayOfWeek = this.radDateTimePicker1.Value.Date.DayOfWeek;
        switch (dayOfWeek)
        {
            case DayOfWeek.Sunday:
                rdtpc.TimePicker.TimePickerElement.MinValue = DateTime.Today.Date.AddHours(12);
                rdtpc.TimePicker.TimePickerElement.MaxValue = DateTime.Today.Date.AddHours(13);
                break;
            case DayOfWeek.Monday:
            case DayOfWeek.Tuesday:
            case DayOfWeek.Wednesday:
            case DayOfWeek.Thursday:
            case DayOfWeek.Friday:
                rdtpc.TimePicker.TimePickerElement.MinValue = DateTime.Today.Date.AddHours(9);
                rdtpc.TimePicker.TimePickerElement.MaxValue = DateTime.Today.Date.AddHours(17);
                break;
            case DayOfWeek.Saturday:
                rdtpc.TimePicker.TimePickerElement.MinValue = DateTime.Today.Date.AddHours(10);
                rdtpc.TimePicker.TimePickerElement.MaxValue = DateTime.Today.Date.AddHours(14);
                break;
        }

        rdtpc.TimePicker.TimePickerElement.PrepareContent();
    }
}

I am also attaching a short video showing the result on my end.

Regards,
Hristo
Progress Telerik

[Ian]

Hi Hristo

Many thanks for the quick response.

I had all the code already but was just missing this line.

rdtpc.TimePicker.TimePickerElement.PrepareContent();

All fixed and working now.

Many thanks

Ian

[Hristo]

Hi Ian,

Than you for writing back. I am glad that the suggested approach is working well in your actual project.

Let me know if you have other questions.

Regards,
Hristo
Progress Telerik