How to add a placeholder with ability to change placeholder color to DatePicker and TimePicker in Dot Net MAUI?

Question

How to add a placeholder with ability to change placeholder color to DatePicker and TimePicker in Dot Net MAUI?

Ruvindra Senevirathne 1

Previously in Xamarin.Forms I used below code to do that?

[assembly: ExportRenderer(typeof(CustomDatePicker), typeof(CustomDatePickerRenderer))]

namespace MyEstateLife.Droid.CustomRenderers

{

    public class CustomDatePickerRenderer : DatePickerRenderer

    {

        CustomDatePicker datePicker = null;

        public CustomDatePickerRenderer(Context context) : base(context) 
        {

        }

        void SetColor(Android.Graphics.Color color)`

        {

            if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)

            {

                Control.BackgroundTintList = ColorStateList.ValueOf(color);

            }

            else

            {

                Control.Background.SetColorFilter(color, PorterDuff.Mode.SrcAtop);

            }

       }

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

        {

            base.OnElementChanged(e);

            if (e.NewElement != null)
            {

                datePicker = Element as CustomDatePicker;

                this.EditText.FocusChange += (sender, ee) => {

                    bool hasFocus = ee.HasFocus;

                    if (hasFocus)

                    {

                        SetColor(datePicker.UnfocusColor.ToAndroid());

                    }

                    else

                   {

                        SetColor(datePicker.BorderColor.ToAndroid());

                    }

                };

                UpdatePickerPlaceholder();

            }

        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)

        {

            base.OnElementPropertyChanged(sender, e);

            if (datePicker != null)

            {

                if (e.PropertyName.Equals(CustomDatePicker.PlaceholderProperty.PropertyName))

                {

                    UpdatePickerPlaceholder();

                }

            }

        }

        void UpdatePickerPlaceholder()

        {

            if (datePicker == null)

                datePicker = Element as CustomDatePicker;

            if (datePicker.Placeholder != null)

            {

                if (!string.IsNullOrWhiteSpace(datePicker.Placeholder))

                {

                    Control.Text = datePicker.Placeholder;

                }

                this.Control.TextChanged += (sender, arg) => {

                    var selectedDate = arg.Text.ToString();

                    if (selectedDate == datePicker.Placeholder)

                    {

                        Control.Text = DateTime.Now.ToString("dd/MM/yyyy");

                    }

                };

                Control.SetHintTextColor(datePicker.PlaceholderColor.ToAndroid());

                SetColor(datePicker.BorderColor.ToAndroid());

            }

        }

    }

}

but how to do this in Dot Net MAUI with handlers?

Anonymous

Can you share code about CustomDatePicker?

Do you have some properties in the CustomDatePicker? Such as Placeholder, UnfocusColor and BorderColor.

If so. If you just have android platform custom renderer, you can use hanlder in the layout background code or just it in the App.xaml.cs for entire application.

#if ANDROID
using Android.Content.Res;
using Android.Graphics;
using Android.OS;
using Android.Widget;


#endif
using Microsoft.Maui.Platform;


namespace MauiDatapicker
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            Microsoft.Maui.Handlers.DatePickerHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
            {
                if (view is CustomDatePicker)
                {
#if ANDROID
                    CustomDatePicker datePicker = view as CustomDatePicker;
                    EditText editText = handler.PlatformView as EditText;


                    editText.FocusChange += (sender, ee) =>
                    {
                        bool hasFocus = ee.HasFocus;


                       if (hasFocus)


                       {


                           SetColor(datePicker.UnfocusColor.ToPlatform(), editText);


                       }


                       else


                       {


                           SetColor(datePicker.BorderColor.ToPlatform(), editText);


                       }


                   };


                   UpdatePickerPlaceholder(datePicker, editText);


#endif
                }
            });
            MainPage = new AppShell();
        }


#if ANDROID
        void SetColor(Android.Graphics.Color color, EditText editText)
        {
            if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
            {
                editText.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Red);
                // editText.BackgroundTintList = ColorStateList.ValueOf(color);
            }
            else
            {
                editText.Background.SetColorFilter(color, PorterDuff.Mode.SrcAtop);
            }


       }


       void UpdatePickerPlaceholder(CustomDatePicker datePicker, EditText editText)


       {


           //if (datePicker == null)


           //    datePicker = Element as CustomDatePicker;


           if (datePicker.Placeholder != null)


           {


               if (!string.IsNullOrWhiteSpace(datePicker.Placeholder))


               {


                   editText.Text = datePicker.Placeholder;


               }


               editText.TextChanged += (sender, arg) => {


                   var selectedDate = arg.Text.ToString();


                   if (selectedDate == datePicker.Placeholder)


                   {


                       editText.Text = DateTime.Now.ToString("dd/MM/yyyy");


                   }


               };


               editText.SetHintTextColor(datePicker.PlaceholderColor.ToPlatform());


               SetColor(datePicker.BorderColor.ToPlatform(), editText);


           }


       }
#endif


   }
}

Share via

How to add a placeholder with ability to change placeholder color to DatePicker and TimePicker in Dot Net MAUI?

Your answer