How to change the date format in Digital Clock using WinForm Clock?

This article provides a step-by-step guide for customizing the date format of Digital Clock using Winform Clock.

Step 1: Create a Custom renderer for the Digital Clock

Create a custom renderer for the Digital Clock which is to be inherited from DigitalClockRenderer.

C#

public class DigitalRenderer : DigitalClockRenderer
{

}

VB

Public Class DigitalRenderer
    Inherits DigitalClockRenderer

End Class

Step 2: Draw the custom date format by overriding the DrawDigitalClockFrame method

C#

public override void DrawDigitalClockFrame(Graphics g, Image newImage, Clock clock)
{
   GraphicsPath pat = new GraphicsPath();
   Clock clockObj = clock;
   SizeF digitsize = new SizeF(clock.Width, clock.Width / 4);
   g.DrawImage(newImage, new Rectangle(0, 0, clock.Width, clock.Height));

   Type ClassType = clock.GetType();

   FieldInfo colorInfo = ClassType.GetField("color", BindingFlags.Instance | BindingFlags.NonPublic);
   FieldInfo fontInfo = ClassType.GetField("font", BindingFlags.Instance | BindingFlags.NonPublic);
   PropertyInfo digitTextInfo = ClassType.GetProperty("DigitText", BindingFlags.Instance | BindingFlags.NonPublic);
   String clockdigittext = (string)digitTextInfo.GetValue(clock);
   Color clockcolor = (Color)colorInfo.GetValue(clock);
   Font clockfont = (Font)fontInfo.GetValue(clock);
   clock.Height = clock.Width / 2;
   pat.AddRectangle(new Rectangle(0, 0, clock.Width, clock.Height));
   g.DrawPath(new Pen(clockcolor), pat);
   pat.Dispose();

   using (SolidBrush brush = new SolidBrush(clock.ForeColor))
   {
       using (SolidBrush lightBrush = new SolidBrush(Color.FromArgb(20, clock.ForeColor)))
       {
           /// Method used to draw the custom date.
           if (clock.DisplayDates)
           {
               DrawDigits(g, "  " + clock.CustomTime.Date.Year.ToString() + "/" + clock.CustomTime.Month.ToString(), clock.CustomTime, new Font("Times New Roman", (clockfont.Height / 9) / (g.DpiX / 96)), brush, lightBrush, new PointF(clock.Width / 4, (clock.Height / 2 - ((digitsize.Height / 4) + clockfont.Height / 3))), false, true);
               DrawDigits(g, "Mon Tue Wed Thu Fri Sat Sun", clock.CustomTime, new Font("Times New Roman", (clockfont.Height / 8) / (g.DpiX / 96)), brush, lightBrush, new PointF((clock.Width / 2 - clock.Width / 8) - 6 * (g.DpiX / 96), ((clock.Height / 2 + clockfont.Height / 6 + digitsize.Height) - ((digitsize.Height / 4) + clockfont.Height / 2))), false, true);
           }
           DrawDigits(g, clockdigittext, clock.CustomTime, new Font("Times New Roman", (clockfont.Height / 2) / (g.DpiX / 96)), brush, lightBrush, new PointF(clock.Width / 4, (clock.Height / 2 - ((digitsize.Height / 4) + clockfont.Height / 8))), clock.ShowHourDesignator, true);

       }
   }
}

VB

Public Overrides Sub DrawDigitalClockFrame(g As Graphics, newImage As Image, clock As Clock)


   Dim pat As GraphicsPath = New GraphicsPath()
   Dim clockObj = clock
   Dim digitsize As SizeF = New SizeF(clock.Width, clock.Width / 4)
   g.DrawImage(newImage, New Rectangle(0, 0, clock.Width, clock.Height))

   Dim ClassType As Type = clock.GetType()

   Dim colorInfo = ClassType.GetField("color", BindingFlags.Instance Or BindingFlags.NonPublic)
   Dim fontInfo = ClassType.GetField("font", BindingFlags.Instance Or BindingFlags.NonPublic)
   Dim digitTestInfo = ClassType.GetProperty("DigitText", BindingFlags.Instance Or BindingFlags.NonPublic)
   Dim clockdigittext = CStr(digitTestInfo.GetValue(clock))
   Dim clockcolor As Color = colorInfo.GetValue(clock)
   Dim clockfont = CType(fontInfo.GetValue(clock), Font)
   clock.Height = clock.Width / 2
   pat.AddRectangle(New Rectangle(0, 0, clock.Width, clock.Height))
   g.DrawPath(New Pen(clockcolor), pat)
   pat.Dispose()

   Using brush As SolidBrush = New SolidBrush(clock.ForeColor)
       Using lightBrush As SolidBrush = New SolidBrush(Color.FromArgb(20, clock.ForeColor))

           'Method to draw the custom dates.

           If clock.DisplayDates Then
               DrawDigits(g, "  " & clock.CustomTime.Date.Month.ToString() & "/" & clock.CustomTime.Day.ToString() & "/" & clock.CustomTime.Date.Year.ToString(), clock.CustomTime, New Font("Times New Roman", clockfont.Height / 9 / (g.DpiX / 96)), brush, lightBrush, New PointF(clock.Width / 4, clock.Height / 2 - (digitsize.Height / 4 + clockfont.Height / 3)), False, True)
               DrawDigits(g, "Mon Tue Wed Thu Fri Sat Sun", clock.CustomTime, New Font("Times New Roman", clockfont.Height / 8 / (g.DpiX / 96)), brush, lightBrush, New PointF(clock.Width / 2 - clock.Width / 8 - 6 * (g.DpiX / 96), clock.Height / 2 + clockfont.Height / 6 + digitsize.Height - (digitsize.Height / 4 + clockfont.Height / 2)), False, True)
           End If
           DrawDigits(g, clockdigittext, clock.CustomTime, New Font("Times New Roman", clockfont.Height / 2 / (g.DpiX / 96)), brush, lightBrush, New PointF(clock.Width / 4, clock.Height / 2 - (digitsize.Height / 4 + clockfont.Height / 8)), clock.ShowHourDesignator, True)

       End Using
   End Using

End Sub

Step 3: Assign the created custom renderer to the clock and set the ShowClockFrame to true for reflecting the applied renderer

C#

this.clock1.ShowClockFrame=true;
this.clock1.ForeColor=Color.White;
DigitalRenderer render = new DigitalRenderer();
this.clock1.DigitalRenderer = render;

VB

clock1.ShowClockFrame = True
clock1.ForeColor = Color.White
Dim render As DigitalRenderer = New DigitalRenderer()
clock1.DigitalRenderer = render

Output:

Conclusion

Hope you enjoyed learning about how to change the DateFormat of the Digital Clock.

You can refer to our Winform Clock feature tour page to learn about its other groundbreaking feature representations. You can explore our Winform Clock documentation to understand how to present and manipulate data.

For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Winform Clock and other Winform Component
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!