DatePicker Placeholder And Border Style Using CustomRenderer

Introduction

In Xamarin.Forms, there is no properties like Placeholder, BorderRadius, BorderColor, and BorderWidth for DatePicker Control. So in this article, we will learn how to set those properties for DatePicker using CustomRenderer.

Requirements

This article's source code is prepared by using Visual Studio. And it is better to install the latest Visual Studio updates from here.
This article is prepared on a MAC machine.
This sample project is Xamarin.Forms PCL project.
This sample app is targeted for Android, iOS. And, tested for Android & iOS.

Description

The creation of a Xamarin.Forms project is very simple in Visual Studio for Mac. It will create three projects:

Shared Code
Xamarin.Android
Xamarin.iOS

The Mac system with Visual Studio for Mac doesn't support Windows projects (UWP, Windows, Windows Phone). The following steps will show you how to create Xamarin.Forms projects in a Mac system with Visual Studio.

First, open Visual Studio and click on New Project.

After that, we need to select among Xamarin.Forms or Xamarin.Android or Xamarin.iOS project. If we want to create Xamarin.Forms project, just follow the below screenshot.

Then, we have to give the app name; i.e., DatePickerDefaultTextDemo.

Note
In the above screen, under Shared Code, select Portable Class Library or use Shared Library.

Then, click "Next" and the following screen will be displayed. In that screen, we have to browse the file path where we want to save that application on our PC.

After clicking on the "Create" button, it will create the DatePickerDefaultTextDemo Xamarin.Forms project like below.

And the project structure will be:

DatePickerDefaultTextDemo
It is for Shared Code
DatePickerDefaultTextDemo.Droid
It is for Android.

DatePickerDefaultTextDemo.iOS
It is for iOS.

Now, follow the below steps.

Portable Class Library (PCL)

Step 1

In PCL, create a class name DatePickerCtrl inside the CustomControls folder and it should inherit from DatePicker like below.

DatePickerCtrl.cs

using Xamarin.Forms;
namespace DatePickerDefaultTextDemo.CustomControls {
public class DatePickerCtrl: DatePicker {
public static readonly BindableProperty EnterTextProperty = BindableProperty.Create(propertyName: "Placeholder", returnType: typeof(string), declaringType: typeof(DatePickerCtrl), defaultValue: default (string));
public string Placeholder {
get;
set;
}
}
}

Added a Bindable property for DatePicker placeholder in the above class.

Step 2

Create your own XAML page named DatePickerTextPage.xaml inside the Views folder and make sure to refer to "DatePickerCtrl" class in XAML by declaring a namespace for its location and using the namespace prefix on the control element. The following code example shows how the "DatePickerCtrl" renderer class can be consumed by an XAML page:

DatePickerTextPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
BackgroundColor="White"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:custom="clr-namespace:DatePickerDefaultTextDemo.CustomControls;assembly=DatePickerDefaultTextDemo"
x:Class="DatePickerDefaultTextDemo.Views.DatePickerTextPage">
<StackLayout VerticalOptions="Start" Padding="25">
<custom:DatePickerCtrl x:Name="datePicker" Placeholder="Select Date of birth" HeightRequest="45" HorizontalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>

Note

The "custom" namespace prefix can be named anything. However, the clr-namespace and assembly values must match the details of the custom renderer class. Once the namespace is declared the prefix is used to reference the custom control.

DatePickerTextPage.xaml.cs

using Xamarin.Forms;
namespace DatePickerDefaultTextDemo.Views {
public partial class DatePickerTextPage: ContentPage {
public DatePickerTextPage() {
InitializeComponent();
}
}
}

Xamarin.Andriod

In an Android project, create a class and add the code like below

DatePickerCtrlRenderer.cs

using System;
using Android.Graphics.Drawables;
using DatyePickerDefaultTextDemo.CustomControls;
using DatyePickerDefaultTextDemo.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(DatePickerCtrl), typeof(DatePickerCtrlRenderer))]
namespace DatyePickerDefaultTextDemo.Droid {
public class DatePickerCtrlRenderer: DatePickerRenderer {
protected override void OnElementChanged(ElementChangedEventArgs < DatePicker > e) {
base.OnElementChanged(e);
this.Control.SetTextColor(Android.Graphics.Color.#533f95;
this.Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
this.Control.SetPadding(20,0,0,0);
this.Control.SetBackgroundDrawable(gd);
GradientDrawable gd = new GradientDrawable();
SetCornerRadius(25); //increase or decrease to changes the corner look
SetColor(Android.Graphics.Color.Transparent);
SetStroke(3, Android.Graphics.Color.#533f95;
DatePickerCtrl element = Element as DatePickerCtrl;
if (!string.IsNullOrWhiteSpace(element.Placeholder)) {
Control.Text = element.Placeholder;
}
this.Control.TextChanged += (sender, arg) => {
var selectedDate = arg.Text.ToString();
if (selectedDate == element.Placeholder) {
Control.Text = DateTime.Now.ToString("dd/MM/yyyy");
}
};
}
}
}

The call to the base class's OnElementChanged method instantiates an Android DatePicker, with a reference to the control being assigned to the renderer's property. And the assigned below properties and events are for DatePicker.

Properties

BorderWidth
SetStroke
SetCornerRadius
SetColor
SetPadding
Placeholder text

Events

TextChanged

Output:

Xamarin.iOS

In iOS project, create a class and add the code like below

DatePickerCtrlRenderer.cs

using System;
using DatyePickerDefaultTextDemo.CustomControls;
using DatyePickerDefaultTextDemo.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(DatePickerCtrl), typeof(DatePickerCtrlRenderer))]
namespace DatyePickerDefaultTextDemo.iOS {
public class DatePickerCtrlRenderer: DatePickerRenderer {
protected override void OnElementChanged(ElementChangedEventArgs < DatePicker > e) {
base.OnElementChanged(e);
if (this.Control == null)
return;
var element = e.NewElement as DatePickerCtrl;
if (!string.IsNullOrWhiteSpace(element.Placeholder)) {
Control.Text = element.Placeholder;
}
Control. BorderStyle = UITextBorderStyle.RoundedRect;
Control.Layer.BorderColor = UIColor.From#533f95.CGColor;
Control.Layer.CornerRadius = 10;
Control.Layer.BorderWidth = 1f;
Control.AdjustsFontSizeToFitWidth = true;
Control.TextColor = UIColor.From#533f95;
Control.ShouldEndEditing +=(textField) => {
var seletedDate = (UITextField) textField;
var text = seletedDate.Text;
if (text == element.Placeholder) {
Control.Text = DateTime.Now.ToString("dd/MM/yyyy");
}
return true;
};
}
private void OnCanceled(object sender, EventArgs e) {
Control.ResignFirstResponder();
}
private void OnDone(object sender, EventArgs e) {
Control.ResignFirstResponder();
}
}
}

The call to the base class's method OnElementChanged instantiates an iOS control UIDatePicker, with a reference to the control being assigned to the renderer's property Control. And the assigned below properties and Events are for DatePicker.

Properties

BorderStyle
BorderColor
CornerRadius
BorderWidth
Placeholder text

Events

ShouldEndEditing
OnDone
OnCanceled

Output:

Note

If you want to set Placeholder text, CornerRadius, and BorderStyle for TimePicker follow the steps like above.

Common properties for every Control in Xamarin.Forms CustomRenderer.

Android

this.Control.SetTextColor(Android.Graphics.Color.#533f95);
this.Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
this.Control.SetPadding(20,0,0,0);
GradientDrawable gd = new GradientDrawable();
SetCornerRadius(25); //increase or decrease to changes the corner look
SetColor(Android.Graphics.Color.Transparent);
SetStroke(3, Android.Graphics.Color.#533f95);
this.Control.SetBackgroundDrawable(gd);

iOS

Control.BorderStyle=UITextBorderStyle.RoundRect;
Control.Layer.BorderColor=UIColor.From#533f95.CGColor;
Control.Layer.CornerRadius=10;
Control.Layer.BorderWidth=1f;
Control.AdjustsFontSizeToFitWidth=true;
Control.TextColor=UIColor.From#533f95;

Please, download the sample from here.

3 Comments

Join the conversation! Your thoughts help the community grow.

Geervani BS7y ago
Hello, I tried using this custom date picker. My requirement was to show the placeholder which I achieved using the above. But When I open the datepicker, control it still points to 01/01/1900 in the picker instead of showing the current month in the picker. I tried setting element.Date = DateTime.Now; in the rendered. This shows the placeholder and also current month when the picker is opened. But I want the user the select the Date of birth and if not selected should show a validation message. The validation isn't firing because picker control has the date property set to Datetime.Now. Thanks in advance. Any help is highly appreciated.
Gadikota Nagarjuna7y ago
Nice article
anuj singh8y ago
Now hire Xamarin Development Company in India & USA, Hire xamarin developer (HXD). It is one of the most renowned development companies who are well experienced in Xamarin app development. Ideal to build apps for iOS, Android and Windows, you can now hire India’s leading Xamarin Development Company, Hire xamarin development software company. so if you need any type of websites or softwares so please contact with me ?? skype or gmail-: [email protected] ?? Get Quotation - http://hire-xamarin-developer.com/contact-xamarin-developers.php ?? any time contact with me i am here wait for your response