New to Telerik UI for Xamarin? Download free 30-day trial

DataForm Date Picker and Time Picker do not show up correctly on iOS 14 SDK.

Environment

Product Version 2020.3.1022.1
Product DataForm for Xamarin Cross-Platform

Description

The behavior with the Date and Time pickers visualization on iOS 14 is reported to the Xamarin.Forms. You can find it logged in the Xamarin.Forms GitHub repo.

The purpose of this topic is to show you how to return the old look of the date picker and time picker - using a custom renderer for iOS.

Solution

So you will need to create a custom renderer for the RadDataForm control on iOS and set PreferredDatePickerStyle = UIDatePickerStyle.Wheels for the TKDataFormDatePicker and TKDataFormTimePicker editors.

Create a class inside the iOS project, for example, MyCustomRenderer that inherits from DataFormRenderer

Here is the renderer implementation for iOS:

using App4.iOS;
using Telerik.XamarinForms.Input.DataForm;
using Telerik.XamarinForms.InputRenderer.iOS;
using TelerikUI;
using UIKit;
using Xamarin.Forms;

[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Input.RadDataForm), typeof(MyCustomRenderer))]

namespace App4.iOS
{
    public class MyCustomRenderer : DataFormRenderer
    {
        protected override void InitEditor(TKDataFormEditor editor, IEntityProperty property)
        {
            base.InitEditor(editor, property);

            var dateeditor = (editor as TKDataFormDatePickerEditor);
            if (dateeditor == null)
                return;
            // set the PreferredDatePickerStyle property to Wheels
            dateeditor.DatePicker.PreferredDatePickerStyle = UIDatePickerStyle.Wheels;


            var timeEditor = (editor as TKDataFormTimePickerEditor);
            if (timeEditor == null)
                return;
        // set the PreferredDatePickerStyle property to Wheels
            timeEditor.DatePicker.PreferredDatePickerStyle = UIDatePickerStyle.Wheels;
        }
    }
}
In this article