Is it possible to restrict the selections and shown options to just be the month and year and not show the days?
I have set the format to MMMM yyyy - which all works fine, I just do not want the days to show up to select from, just the months and year.
I have attached how the picker currently looks, but I do not want the calendar.
Thanks in advance.
3 Answers, 1 is accepted
0
Damien
Top achievements
Rank 1
Rank 1
answered on 09 Feb 2021, 07:49 AM
private void SetupUsageDateTimePicker(){ RadDateTimePickerCalendar calendarBehavior = this.UsageDateTimePicker.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar; // UsageDateLabel2 = new RadLabelElement(); UsageDateLabel2.TextAlignment = ContentAlignment.MiddleLeft; UsageDateLabel2.ForeColor = Color.Black; UsageDateLabel2.Click += UsageDateLabel2_Click; // RadMaskedEditBoxElement maskElement = this.UsageDateTimePicker.DateTimePickerElement.TextBoxElement; maskElement.Visibility = ElementVisibility.Collapsed; // UsageDateLabel2.Text = maskElement.Text; UsageDateLabel2.AutoSize = false; UsageDateLabel2.Size = new Size(UsageDateTimePicker.Size.Width - calendarBehavior.ArrowButton.Size.Width, UsageDateTimePicker.Size.Height - 2); // this.UsageDateTimePicker.DateTimePickerElement.TextBoxElement.Parent.Children.Insert(0, UsageDateLabel2); this.UsageDateTimePicker.DateTimePickerElement.TextBoxElement.TextChanged += UsageDateTimePickerTextBoxElement_TextChanged; this.UsageDateTimePicker.Opening += UsageDateTimePicker_Opening; // UsageDateTimePicker.DateTimePickerElement.Calendar.HeaderNavigationMode = HeaderNavigationMode.Zoom; UsageDateTimePicker.DateTimePickerElement.Calendar.RangeMaxDate = DateTime.Now; UsageDateTimePicker.DateTimePickerElement.CalendarSize = new Size(270, 270); UsageDateTimePicker.DateTimePickerElement.Value = DateTime.Now; calendarBehavior.PopupControl.PopupClosing += UsageDateTimePickerPopupControl_PopupClosing; calendarBehavior.DropDownSizingMode = SizingMode.None; calendarBehavior.Calendar.ShowFooter = true; calendarBehavior.Calendar.ClearButton.Visibility = ElementVisibility.Hidden; calendarBehavior.Calendar.TodayButton.Click += UsageDateTimePickerTodayButton_Click; calendarBehavior.ArrowButton.FindDescendant<ImagePrimitive>().Image = Resources.CalStock24; this.UsageDateTimePicker.DateTimePickerElement.Calendar.ElementRender += UsageDateTimePickerCalendar_ElementRender;}private void UsageDateTimePickerTextBoxElement_TextChanged(object sender, EventArgs e){ UsageDateLabel2.Text = this.UsageDateTimePicker.DateTimePickerElement.TextBoxElement.TextBoxItem.Text;}private void UsageDateLabel2_Click(object sender, EventArgs e){ RadDateTimePickerCalendar calendarBehavior = this.UsageDateTimePicker.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar; if (!calendarBehavior.IsDropDownShow) { calendarBehavior.ShowDropDown(); }}private void UsageDateTimePickerPopupControl_PopupClosing(object sender, RadPopupClosingEventArgs args){ if (args.CloseReason != RadPopupCloseReason.Mouse) { return; } RadLabelElement element = UsageDateLabel2.ElementTree.GetElementAtPoint(UsageDateLabel2.PointFromScreen(Control.MousePosition)) as RadLabelElement; if (element != null) { args.Cancel = true; }}private void UsageDateTimePickerTodayButton_Click(object sender, EventArgs e){ UsageDateTimePicker.DateTimePickerElement.Value = DateTime.Now; RadDateTimePickerCalendar calendarBehavior = this.UsageDateTimePicker.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar; calendarBehavior.PopupControl.HideControl();}private void UsageDateTimePickerCalendar_ElementRender(object sender, RenderElementEventArgs e){ if (this.UsageDateTimePicker.DateTimePickerElement.Calendar.ZoomLevel == ZoomLevel.Months) { return; } CalendarCellElement element = e.Element as CalendarCellElement; if (element != null) { element.WeekEnd = false; }}private void UsageDateTimePicker_Opening(object sender, CancelEventArgs e){ var args = e as RadPopupOpeningEventArgs; RadDateTimePickerCalendar calendarBehavior = this.UsageDateTimePicker.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar; args.CustomLocation = new Point(args.CustomLocation.X + UsageDateTimePicker.Width - (int)calendarBehavior.ArrowButton.Size.Width + 3, args.CustomLocation.Y - this.UsageDateTimePicker.Height);}0
Damien
Top achievements
Rank 1
Rank 1
answered on 09 Feb 2021, 07:50 AM
this is how I have it coded at the moment too.
1
Hello, Damien,
The embedded RadCalendar in the RadDateTimePicker's popup has HeaderNavigationMode property, which determines what will be the behavior of the control when the end-users clicks on the header of RadCalendar. I believe that if you set the DateTimePickerElement.Calendar.HeaderNavigationMode to Zoom and handle the ZoomChanging event to restrict zooming down to days, you can benefit the zooming behavior that RadDateTimePicker offers out of the box.
I have prepared a sample code snippet for your reference. The attached gif file illustrates the achieved result. Now, you can navigate through months and years and easily select the desired month/year:
I hope this information helps. If you need any further assistance please don't hesitate to contact me.
The embedded RadCalendar in the RadDateTimePicker's popup has HeaderNavigationMode property, which determines what will be the behavior of the control when the end-users clicks on the header of RadCalendar. I believe that if you set the DateTimePickerElement.Calendar.HeaderNavigationMode to Zoom and handle the ZoomChanging event to restrict zooming down to days, you can benefit the zooming behavior that RadDateTimePicker offers out of the box.
I have prepared a sample code snippet for your reference. The attached gif file illustrates the achieved result. Now, you can navigate through months and years and easily select the desired month/year:
public RadForm1()
{
InitializeComponent();
this.radDateTimePicker1.Format = DateTimePickerFormat.Custom;
this.radDateTimePicker1.CustomFormat = "MMMM yyyy";
this.radDateTimePicker1.DateTimePickerElement.Calendar.HeaderNavigationMode = HeaderNavigationMode.Zoom;
this.radDateTimePicker1.DateTimePickerElement.Calendar.ZoomLevel = ZoomLevel.Months;
this.radDateTimePicker1.DateTimePickerElement.Calendar.ZoomChanging+=Calendar_ZoomChanging;
}
private void Calendar_ZoomChanging(object sender, CalendarZoomChangingEventArgs e)
{
if (this.radDateTimePicker1.DateTimePickerElement.Calendar.ZoomLevel== ZoomLevel.Months && e.Direction == DrillDirection.Down )
{
e.Cancel = true;
}
} I hope this information helps. If you need any further assistance please don't hesitate to contact me.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.