I am making themes for a cross-platform Xamarin Forms application. I've gotten to a point where I need to style a date picker depending on light/dark modes. The picker itself and the text it displays are okay depending the mode, however the dialog pop-up appears to have white text and a white background, making it kind of useless. Is there a way for me to customise this?

In styles.xml

   <item name="android:datePickerDialogTheme">@style/CustomDatePickerDialog</item>
  </style>
  <style name="CustomDatePickerDialog" parent="ThemeOverlay.AppCompat.Dialog">
      <!--header background-->
      <item name="colorAccent">#009933</item>
      <!--header textcolor-->
      <item name="android:textColorPrimaryInverse">#ff9900</item>
      <!--body background-->
      <item name="android:windowBackground">#000099</item>
      <!--selected day-->
      <item name="android:colorControlActivated">#ff8000</item>
      <!--days of the month-->
      <item name="android:textColorPrimary">#ffff00</item>
      <!--days of the week-->
      <item name="android:textColorSecondary">#ff0066</item>
      <!--cancel&ok-->
      <item name="android:textColor">#00ffff</item>
  </style>

Add Class in iOS

using DatePickerStackO.iOS;
using Foundation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

[assembly: ExportRenderer(typeof(Xamarin.Forms.DatePicker), typeof(DateTimeRenderer))]
namespace DatePickerStackO.iOS
{
    public class DateTimeRenderer : DatePickerRenderer
    {
        private UIDatePicker _picker;
        bool _disposed;

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.DatePicker> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                _picker = new UIDatePicker { Mode = UIDatePickerMode.Date, TimeZone = new NSTimeZone("UTC") };

                if (UIDevice.CurrentDevice.CheckSystemVersion(14, 0))
                {
                    _picker.PreferredDatePickerStyle = UIKit.UIDatePickerStyle.Wheels;
                }

                _picker.BackgroundColor = Color.Red.ToUIColor(); // YOUR COLOR HERE
                _picker.ValueChanged -= HandleValueChanged;
                _picker.ValueChanged  = HandleValueChanged;
                Control.InputView = _picker;
            }
        }

        void HandleValueChanged(object sender, EventArgs e)
        {
            if (Element != null && Element.OnThisPlatform().UpdateMode() == UpdateMode.Immediately)
            {
                UpdateElementDate();
            }
        }

        void UpdateElementDate()
        {
            Element?.SetValueFromRenderer(Xamarin.Forms.DatePicker.DateProperty, _picker.Date.ToDateTime().Date);
        }

        protected override void Dispose(bool disposing)
        {
            if (_disposed)
                return;

            _disposed = true;

            if (disposing)
            {

                if (_picker != null)
                {
                    _picker.RemoveFromSuperview();
                    _picker.ValueChanged -= HandleValueChanged;
                    _picker.Dispose();
                    _picker = null;
                }
            }

            base.Dispose(disposing);
        }
    }
}

CodePudding user response：

I have used a nuget package called XamForms.Controls.Calendar which provides an easily customisable calendar:

screenshot of package

Here is a small guide on how to implement

Hopefully this is good enough for you use :)