Date/Time Picker set enabled time range for different days

4 posts, 0 answers
  1. Ian
    Ian avatar
    4 posts
    Member since:
    Jan 2014

    Posted 02 Oct 2018 Link to this post

    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

     

     

  2.
  3. Hristo
    Admin
    Hristo avatar
    1522 posts

    Posted 03 Oct 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Ian
    Ian avatar
    4 posts
    Member since:
    Jan 2014

    Posted 03 Oct 2018 in reply to Hristo Link to this post

    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

  7. Hristo
    Admin
    Hristo avatar
    1522 posts

    Posted 03 Oct 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
Back to Top