Forum Xamarin.Forms

DatePicker FontSize, etc.

There doesn't seem to be any easy way to change the textview's for DatePicker/TimePicker. Has anyone found a way to either turn a label into a datepicker or write a custom renderer that will customize the look of the datepicker. In particular I care about Android first and foremost.

Posts

  • Hi,

    I don't know if you had already the answer for this, but just in case... I had the same issue, and I ended up creating my own DatePicker class (inheriting from DatePicker), and wrote a custom renderer in both Droid and iOS (with the DatePickerRenderer as the base class).

    Here's the code in the Droid renderer for the font, considering your control class has a bindable property for the font:
    private void SetFont(MyExtendedDatePicker view) { if (view.Font != Font.Default) { Control.SetTextSize(Android.Util.ComplexUnitType.Sp, view.Font.ToScaledPixel()); Control.Typeface = view.Font.ToExtendedTypeface(Context); } }

    Let me know if you need a more complete solution to get you started. I've also implemented the text color, and I am trying at the moment to get some kind of placeholder in there instead of the default date.

    Regards,
    Bruno

  • SujaBSujaB USUniversity ✭✭✭

    Hi

    Can i change my datepicker text size in my xaml code.?Is there any other option for this?

  • Matthew.4307Matthew.4307 USMember ✭✭✭

    @BrunoBarrette said:
    Hi,

    I don't know if you had already the answer for this, but just in case... I had the same issue, and I ended up creating my own DatePicker class (inheriting from DatePicker), and wrote a custom renderer in both Droid and iOS (with the DatePickerRenderer as the base class).

    Here's the code in the Droid renderer for the font, considering your control class has a bindable property for the font:
    private void SetFont(MyExtendedDatePicker view) { if (view.Font != Font.Default) { Control.SetTextSize(Android.Util.ComplexUnitType.Sp, view.Font.ToScaledPixel()); Control.Typeface = view.Font.ToExtendedTypeface(Context); } }

    Let me know if you need a more complete solution to get you started. I've also implemented the text color, and I am trying at the moment to get some kind of placeholder in there instead of the default date.

    Regards,
    Bruno

    For the Placeholder you can set the Format = "X" at the Forms level, though that is on the assumption you've forked your picker to have a Nullable date so you can determine if there is a selected date or not.

  • brianduccabrianducca ARMember ✭✭

    @BrunoBarrette could you post the entire solution to solve the datetimepicker / picker problem of fontsize with both iOS & android renderers? Thanks!

  • ShubhamAggarwalShubhamAggarwal INMember ✭✭
    edited May 2017

    I dont know if you require the answer now...but just to promote code sharing...please find the answer below without using custom rendering

    Create MainPage.Xaml file - add the below code

    lt StackLayout Orientation="Vertical" Padding="10" gt
    lt DatePicker x:Name="PickerDate" MinimumDate="05-24-2017" Format="mm-dd-yyyy" MaximumDate="12-31-2050" IsVisible="False" DateSelected="PickerDate_DateSelected" /gt
    lt Label x:Name="DateLabel" Text="Tap to Select Date" FontSize="14" HorizontalOptions="Start" gt
    lt Label.GestureRecognizers gt
    lt TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" /gt
    lt/ Label.GestureRecognizers gt
    lt/ Label gt
    lt/ StackLayout gt

    Create MainPage.Xaml.cs file - add the below code

    private void TapGestureRecognizer_Tapped_1(object sender, EventArgs e)
    {
    PickerDate.Focus();
    }

    private void PickerDate_DateSelected(object sender, DateChangedEventArgs e)
    {
    DateLabel.Text = PickerDate.Date.Date.ToString("MM-dd-yyyy");
    }

    This solved my problem for Android and IOS.

  • ShubhamAggarwalShubhamAggarwal INMember ✭✭

    I dont know if you require answer now, still i am attaching the code which solves the font size problem of date picker without using custom rendering..

    Create MainPage.Xaml file

    lt DatePicker x:Name="PickerDate" MinimumDate="05-24-2017" Format="mm-dd-yyyy" MaximumDate="12-31-2050" IsVisible="False" DateSelected="PickerDate_DateSelected" gt
    lt Label x:Name="DateLabel" Text="Tap to Select Date" FontSize="14" HorizontalOptions="Start" gt
    lt Label.GestureRecognizers gt
    lt TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" gt
    lt Label.GestureRecognizers gt
    lt Label gt

    create MainPage.Xaml.cs File

    private void TapGestureRecognizer_Tapped_1(object sender, EventArgs e)
    {
    PickerDate.Focus();
    }
    private void PickerDate_DateSelected(object sender, DateChangedEventArgs e)
    {
    DateLabel.Text = PickerDate.Date.Date.ToString("MM-dd-yyyy");
    }

    This solves problem in Android and IOS.

  • shalinasangashalinasanga USMember ✭✭

    Custom renderer is the easiest way, without changing any other styling in Date or Time picker

    Android
    [assembly: ExportRenderer(typeof(Xamarin.Forms.TimePicker), typeof(CustomTimePicker))] namespace YOURNAMESPACE { public class CustomTimePicker : TimePickerRenderer { public CustomTimePicker(Context context) : base(context) { } protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TimePicker> e) { base.OnElementChanged(e); if (Control != null) { Control.TextSize = (float)Device.GetNamedSize(NamedSize.Small, typeof(Xamarin.Forms.TimePicker));//Getting named font size or you can use just number } } } }

    iOS
    `[assembly: ExportRenderer(typeof(TimePicker), typeof(CustomTimePicker))]
    namespace YOURNAMESPACE
    {
    public class CustomTimePicker : TimePickerRenderer
    {
    public CustomTimePicker()
    {
    }
    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
    base.OnElementChanged(e);

            if (Control != null)
            {
                var timePicker = (UIDatePicker)Control.InputView;
                timePicker.MinuteInterval = 30;//Picker interval set to 30 min
    
                Control.Font = Control.Font.WithSize((nfloat)Device.GetNamedSize(NamedSize.Small, typeof(Xamarin.Forms.TimePicker)));
            }
        }
    
    }
    

    }`

  • SteveSykesSteveSykes USMember ✭✭

    I really wish we could get past trivial necessary properties like this. This should be built in.

  • @SteveSykes said:
    I really wish we could get past trivial necessary properties like this. This should be built in.

    It is incredibly unwelcoming that things like this won't work.

Sign In or Register to comment.