Time Picker In a 24 Hour Format In Xamarin.Forms

Introduction

This article describes how we can set a 24 hour format for TimePicker Control. Sometimes, we may get the requirement to set 24 hours for TimePicker. So in this article, we can learn how to achieve this functionality using CustomRenderer.

Requirements

• This article 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:

1. Shared Code
2. Xamarin.Android
3. 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 for Mac. And click on New Project.

After that, we need to select whether you're doing 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., TimePickerDemo.

Note

In the above screen under Shared Code, select Portable class Library or Use Shared Library.

Then, click on Next Button and the following screenshot 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 RoundedCornerViewDemo Xamarin.Forms project like below.

And the project structure will be:

• TimePickerDemo:  It is for Shared Code
• TimePickerDemo.Droid:  It is for Android.
• iTimePickerDemo.OS:  It is for iOS

We need to follow the below steps to set 24 hours for TimePicker.

Portable Class Library (PCL)

Step 1

In PCL, create a class name CustomTimePicker24H which should inherit any TimePicker like below.

CustomTimePicker24H.cs

using System;
using Xamarin.Forms;
namespace TimePickerDemo
{
public class CustomTimePicker24H : TimePicker
{

}

Step 2  

Create your own Xaml page named TimePicker24HPage.xaml, and make sure to refer to  "CustomTimePicker24H" 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 "CustomTimePicker24H" renderer class can be consumed by a Xaml page:

TimePicker24HPage.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:TimePickerDemo.CustomControls;assembly=TimePickerDemo"
x:Class="TimePickerDemo.Views.TimePicker24HPage">
    <ContentPage.Content>
        <StackLayout Padding="30,80,30,0" Spacing="40" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
            <Label Text="TimePicker 24H Format" HorizontalOptions="CenterAndExpand" TextColor="Gray" FontSize="20" />
            <custom:CustomTimePicker24H TextColor="Gray" Format="HH:mm" HeightRequest="40" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" /> </StackLayout>
    </ContentPage.Content>
</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.

TimePicker24HPage.xaml.cs

using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace TimePickerDemo.Views {
    public partial class TimePicker24HPage: ContentPage {
        public TimePicker24HPage() {
            InitializeComponent();
        }
    }
}

Xamarin.Andriod

CustomTimePicker24HRenderer.cs

using System;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Android.App;
using Android.Runtime;
using TimePickerDemoDroid;
using TimePickerDemoDroid.CustomControls;
[assembly: ExportRenderer(typeof(CustomTimePicker24H), typeof(CustomTimePicker24HRenderer))]
namespace TimePickerDemoDroid.Droid {
    public class CustomTimePicker24HRenderer: ViewRenderer<Xamarin.Forms.TimePicker, Android.Widget.EditText> , TimePickerDialog.IOnTimeSetListener, IJavaObject, IDisposable {
        private TimePickerDialog dialog = null;
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TimePicker> e) {
            base.OnElementChanged(e);
            this.SetNativeControl(new Android.Widget.EditText(Forms.Context));
            this.Control.Click += Control_Click;
            this.Control.Text = DateTime.Now.ToString("HH:mm");
            this.Control.KeyListener = null;
            this.Control.FocusChange += Control_FocusChange;
        }
        void Control_FocusChange(object sender, Android.Views.View.FocusChangeEventArgs e) {
            if (e.HasFocus)
               ShowTimePicker();
        }
        void Control_Click(object sender, EventArgs e) {
            ShowTimePicker();
        }
        private void ShowTimePicker() {
            if (dialog == null) {
                dialog = new TimePickerDialog(Forms.Context, this, DateTime.Now.Hour, DateTime.Now.Minute, true);
            }
            dialog.Show();
        }
        public void OnTimeSet(Android.Widget.TimePicker view, int hourOfDay, int minute) {
            var time = new TimeSpan(hourOfDay, minute, 0);
            this.Element.SetValue(Xamarin.Forms.TimePicker.TimeProperty, time);
            this.Control.Text = time.ToString(@ "hh\:mm");
        }
    }
}

Here OnElementChanged method instantiates an Android UI Layout  and in that I assigned the current time to TimePicker and set 24h format.

Xamarin.iOS

In iOS project, create a class name is CustomTimePicker24HRenderer and make sure to add renderer registration for our CustomTimePicker24H class in above of the namespace:

CustomTimePicker24HRenderer.cs

using System;
using Xamarin.Forms.Platform.iOS;
using UIKit;
using Xamarin.Forms;
using TimePickerDemo.iOS;
using Foundation;
using TimePickerDemo.CustomControls;
[assembly: ExportRenderer(typeof(CustomTimePicker24H), typeof(CustomTimePicker24HRenderer))]
namespaceiOS {
    public class CustomTimePicker24HRenderer: TimePickerRenderer {
        protected override void OnElementChanged(ElementChangedEventArgs < TimePicker > e) {
            base.OnElementChanged(e);
            var timePicker = (UIDatePicker)Control.InputView;
            timePicker.Locale = new NSLocale("no_nb");
            if (Control != null) {
                Control.Text = DateTime.Now.ToString("HH:mm");
            }
        }
    }
}

Here, the OnElementChanged method instantiates an iOS UI, in that I assigned current time to the Control and set a 24 hour format using NSLocale.

Output:

Please, download the source code from here.