xamarin.formsxamarin.androiddatepickerxamarin.ioscustom-renderer

How to change DatePicker Ok and Cancel button text in Xamarin forms?


I have an Xamarin.Forms app that supports many languages. How do I show the Calender for the DatePicker with DatePicker Ok and Cancel button text in local language text from resource file?enter image description here

My custom renderer

 [assembly: ExportRenderer(typeof(CustomImageDatePicker), typeof(CustomImageDatePickerRenderer))]
 namespace AMS.Droid.Renderers
{
public class CustomImageDatePickerRenderer : DatePickerRenderer
{
    public CustomImageDatePickerRenderer(Context context) : base(context)
    {
    }

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

            CustomImageDatePicker element = (CustomImageDatePicker)this.Element;
            if (Control == null)
                return;
            Control.Background = null;

            if (Control != null && this.Element != null && !string.IsNullOrEmpty(element.Image))
            {
                Control.Background = AddPickerStyles(element.Image);
            }
           
        }
        catch (Exception ex)
        {
            var message = ex.Message;
        }
        
    }

    public LayerDrawable AddPickerStyles(string imagePath)
    {
        GradientDrawable gd = new GradientDrawable();
        gd.SetColor(Android.Graphics.Color.Transparent);
        gd.SetCornerRadius(25);
        gd.SetStroke(3, Android.Graphics.Color.Black);
        this.Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
        this.Control.SetPadding(20, 10, -50, 10);

        Drawable[] layers = { gd, GetDrawable(imagePath) };
        LayerDrawable layerDrawable = new LayerDrawable(layers);
        layerDrawable.SetLayerInset(1, 0, 0, 30, 0);
        return layerDrawable;
    }

    private BitmapDrawable GetDrawable(string imagePath)
    {
        try
        {
            int resID = Resources.GetIdentifier(imagePath.ToLower(), "drawable", this.Context.PackageName);
            var drawable = ContextCompat.GetDrawable(this.Context, Resource.Drawable.brandIcon);
            drawable.SetBounds(0, 0, (int)(drawable.IntrinsicWidth * 0.5),
                (int)(drawable.IntrinsicHeight * 0.5));
            var bitmap = ((BitmapDrawable)drawable).Bitmap;

            var result = new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, 60, 60, true));
            
            result.Gravity = Android.Views.GravityFlags.Right;
            //result.SetBounds(10, 10, 50, 0);

            return result;
        }
        catch(Exception ex)
        {
            var message = ex.Message;
        }

        return null;
    }`

Xaml:

<customDatePicker:CustomDatePicker
                                    x:Name="dpFromDate"
                                    DateSelected="FromDate_Selected"
                                    Margin="10,5,10,0"
                                    Image="brandIcon.png"/>

Solution

  • You could do this with custom renderer.

    On Android, the DatePicker dialog can be customized by overriding the CreateDatePickerDialog method in a custom renderer.

    [assembly: ExportRenderer(typeof(Xamarin.Forms.DatePicker), typeof(CustomDatePickerRenderer))]
    namespace App10.Droid
    {
    public class CustomDatePickerRenderer : DatePickerRenderer
    {
        public CustomDatePickerRenderer(Context context) : base(context)
        {
    
        }
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.DatePicker> e)
        {
            base.OnElementChanged(e);
            //Disposing
            if (e.OldElement != null)
            {
                datePicker = null;
            }
            //Creating
            if (e.NewElement != null)
            {
                datePicker = e.NewElement;
    
    
            }
    
        }
    
        DatePickerDialog pickerDialog;
        private Xamarin.Forms.DatePicker datePicker;
        protected override DatePickerDialog CreateDatePickerDialog(int year, int month, int day)
        {
            pickerDialog = new DatePickerDialog(Context, (o, e) =>
             {
                 datePicker.Date = e.Date;
                 ((IElementController)datePicker).SetValueFromRenderer(VisualElement.IsFocusedPropertyKey, false);
             }, year, month, day);
    
            //ok
            pickerDialog.SetButton((int)DialogButtonType.Positive, "(FR)-DONE", OnDone);
    
            //cancel
            pickerDialog.SetButton((int)DialogButtonType.Negative, "(FR)-CLEAR", OnCancel);
    
            return pickerDialog;
        }
    
        private void OnCancel(object sender, DialogClickEventArgs e)
        {
            datePicker.Unfocus();
        }
    
        private void OnDone(object sender, DialogClickEventArgs e)
        {
            datePicker.Date = ((DatePickerDialog)sender).DatePicker.DateTime;
            datePicker.Unfocus();
        }
    }
    }
    

    You could replace the (FR)-DONE and (FR)-CLEAR with your own local language text from resource file

      //ok
            pickerDialog.SetButton((int)DialogButtonType.Positive, "(FR)-DONE", OnDone);
    
            //cancel
            pickerDialog.SetButton((int)DialogButtonType.Negative, "(FR)-CLEAR", OnCancel);
    

    enter image description here