This is a migrated thread and some comments may be shown as answers.

DateTimePicker > PerformClick / Disable Sundays

7 Answers 779 Views
Calendar, DateTimePicker, TimePicker and Clock
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 01 Mar 2018, 12:30 AM

I am using Version 2016.2.608.20 of WinControls.UI.  

 

WHERE IS PERFORMCLICK EVENT?

My client is very particular that they do not want anyone hand-typing a date into a control, so I need the date part of the DateTimePicker to be read-only.  Unfortunately, all attempts to do this do not work, and it appears that is not supported.  My workaround is a standard LABEL control placed OVER the date area of the DateTimePicker, with a painted border.  But the client wants to be able to CLICK on that now and have the calendar appear.

I considered using a standard RadButton and RadCalendar, but then I need to do a lot of extra work to make it extend beyond the modal dialog form bounds, etc.  I am hoping there is an easier way to just do a built-in PERFORMCLICK, if only I can find where it's hidden.

 

DISABLE SUNDAYS ON THE CALENDAR

I found other answers to this question, and it certainly makes the Sunday dates APPEAR disabled, but they can still click on them, and the date changes.  I am handling in the CLOSED event, adjusting the date accordingly to the next Monday... but it would be better if the Sundays actually stayed disabled / un-clickable.

 

HIDE THE CLEAR BUTTON

Minor issue, I can show the footer and disable the clear button... but is there any way to completely remove it?  (They like having the [TODAY] button in the footer.  This is minor... they can live with a disabled button... but if there's an easy way to hide it, how?

 

Thanks for your help!

 

Here is my code:

/// PART ONE - WHERE IS THE PERFORMCLICK EVENT?
 
private void MyLabel_MouseClick(object sender, MouseEventArgs e)
{
     // Attempts to locate the PerformClick event...
 
     MyRadDateTimePicker.DateTimePickerElement.PerformClick();
     MyRadDateTimePicker.DateTimePickerElement.ArrowButton.PerformClick();
 
     foreach (Telerik.WinControls.RadElement _Element in
          MyRadDateTimePicker.DateTimePickerElement.ArrowButton.Children)
                _Element.PerformClick();
 
     foreach (Telerik.WinControls.RadElement _Element in
          MyRadDateTimePicker.DateTimePickerElement.Calendar.CalendarElement.Children)
                _Element.PerformClick();
}
 
 
// PART TWO - HOW TO DISABLE SUNDAYS IN CALENDAR
 
private void MyRadDateTimePicker_Opened(object sender, EventArgs e)
{
     MyRadDateTimePicker.DateTimePickerElement.Value = this.SelectedDate;
             
     RadCalendar _Calendar = MyRadDateTimePicker.DateTimePickerElement.Calendar;
     CalendarTableElement _Table
        = (CalendarTableElement)_Calendar.CalendarElement.CalendarVisualElement.Children[0].Children[1];
 
     foreach (CalendarCellElement _Cell in _Table.Children)
     {
         if (_Cell.Date.DayOfWeek == DayOfWeek.Sunday)
         {
             _Cell.Enabled = false;   // Disables, but still leaves it clickable
         }
     }
     _Calendar.ClearButton.Enabled = false// Would actually prefer to HIDE this!
     _Calendar.ShowFooter = true;
}

7 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 02 Mar 2018, 12:46 PM
Hello, Peter, 

Thank you for writing.  

If I understand your requirement correctly you are trying to disable the date part of RadDateTimePicker's editable part. You can forbid the user to select the date by using the following code snippet: 

MaskDateTimeProvider provider;
 
public RadForm1()
{
    InitializeComponent();
 
    this.radDateTimePicker1.Format = DateTimePickerFormat.Custom;
    this.radDateTimePicker1.CustomFormat = "dd-MM-yyyy";
    provider = this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.Provider as MaskDateTimeProvider;
    provider.SelectedItemChanged += provider_SelectedItemChanged;
}
 
protected override void OnShown(EventArgs e)
{
    base.OnShown(e);
               
    provider.SelectNextItem();
}
 
private void provider_SelectedItemChanged(object sender, EventArgs e)
{
    MaskDateTimeProvider provider = this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.Provider as MaskDateTimeProvider;
    provider.SelectedItemChanged -= provider_SelectedItemChanged;
    if (provider.SelectedItemIndex == 0)
    {
        provider.SelectNextItem();
    }
    provider.SelectedItemChanged += provider_SelectedItemChanged;
}

You can disable Sundays in the popup calendar by handling the ElementRender event: 

    RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;
    calendarBehavior.Calendar.ElementRender+=Calendar_ElementRender;
 
private void Calendar_ElementRender(object sender, RenderElementEventArgs e)
{
    if (e.Day.Date.DayOfWeek == DayOfWeek.Sunday)
    {
        e.Element.Enabled = false;
    }
    else
    {
        e.Element.Enabled = true;
    }
}

In order to hide the clear button you can use the following code snippet: 

RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;
calendarBehavior.Calendar.ShowFooter = true;
calendarBehavior.Calendar.ClearButton.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;

I hope this information helps. Should you have further questions I would be glad to help. 
 
 Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Peter
Top achievements
Rank 1
answered on 02 Mar 2018, 02:10 PM

Hello Dess!

Thank you, the code to disable Sundays and hide the [Clear] button in the footer worked perfectly!

But the text part in the date can still be selected and does not activate the calendar when clicked. With the code provided, it appears to emulate the "AutoNextElement" function when clicked.  I was hoping it was cleverly skipping on to the calendar button element, but that did not appear to be the case.  

This is what I am looking for:  Essentially, I need the MM/DD/YYYY text to be entirely non-selectable in any way (no selection highlights at all), but when clicked with the mouse, the calendar pops up.

This is a requirement from my client who does not want his field managers able to type in a date, or think they can type in a date (because the date parts appear with a highlight), and only wants them to use the calendar.  I can achieve this with the standard label "on top" of the text part... but then clicking that label does nothing.  The client said this is acceptable, but I would like to let them click the visible date text to bring up the calendar as well.

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 02 Mar 2018, 02:53 PM
Hello, Peter,   

Thank you for writing back. 

The provided detailed explanation is greatly appreciated. It helped me get a better understanding of the exact requirement. In order to disable the entire selection in the editable part of RadDateTimePicker you can use the following code snippet: 
this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.TextBoxControl.Enabled = false;
this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.Click+=TextBoxItem_Click;

private void TextBoxItem_Click(object sender, EventArgs e)
{
     RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;
     calendarBehavior.ShowDropDown();
}

The attached gif file illustrates the achieved behavior.

I hope this information helps. If you have any additional questions, please let me know. 

 Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Peter
Top achievements
Rank 1
answered on 02 Mar 2018, 03:32 PM

Thank you Dess, that works brilliantly!  Exactly what we needed.

As one minor remaining issue... is there any way I can override the standard disabled color?  I'd like it to remain our standard (64,64,64) text color if possible.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 05 Mar 2018, 02:29 PM
Hello, Peter,   

Thank you for writing back. 
 
I am glad that the suggested solution was suitable for your case. Note that RadDateTimePicker hosts the standard MS TextBox. Hence, it is not possible to affect its disabled state. That is why I can suggest you instead of setting the Enabled property to false, use the ReadOnly property and hide the selection. Here is demonstrated a sample code snippet: 
this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.Click += TextBoxItem_Click;
this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.ReadOnly = true;
this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.PropertyChanged += TextBoxItem_PropertyChanged;

private void TextBoxItem_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.SelectionLength != 0)
    {
        this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.SelectionLength = 0;
        this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.SelectionStart = 0;
    }
}
  
private void TextBoxItem_Click(object sender, EventArgs e)
{
    RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;
    calendarBehavior.ShowDropDown();
}

I hope this information helps. If you have any additional questions, please let me know. 

 Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Peter
Top achievements
Rank 1
answered on 05 Mar 2018, 04:22 PM

Thank you Desislava!  You are quite wonderful!  

This is exactly what I needed.

One final question, which I discovered you answered for someone else... how to disable the calendar from being resized.  You suggested this code, and it works great:

RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;
calendarBehavior.DropDownSizingMode = SizingMode.None;

 

This certainly disables the resizing bar at the bottom... but appears to use a preset size for the calendar.

Is there also a way to FIX the size of that calendar element?

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 06 Mar 2018, 10:53 AM
Hello, Peter,   

Thank you for writing back. 
 
Setting the DropDownSizingMode property to SizingMode.None disables the popup's resizing. It is possible to specify a fixed size of the drop down by setting the DateTimePickerElement.CalendarSize property to the desired Size:
this.radDateTimePicker1.DateTimePickerElement.CalendarSize = new Size(400, 400);

I hope this information helps. If you have any additional questions, please let me know. 

 Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Calendar, DateTimePicker, TimePicker and Clock
Asked by
Peter
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Peter
Top achievements
Rank 1
Share this question
or