Bunifu Date Picker

Create great user experience with good looking date pickers

Overview

Bunifu Date Picker is a rich .NET control that allows you to quickly select a date from a pop-up calendar. It supports various different custom and pre-defined date formats. Date selection can be restricted by specifying minimum and maximum dates.

Getting Started

This section briefly describes how to add BunifuDatePicker with its basic functionalities.

Adding BunifuDatePicker at Design Time

Locate BunifuDatePicker in your toolbox and drag it to your form as shown below and then customize it to your desired look and feel using properties that will be elaborated on later in this article.

Adding Bunifu DatePicker at Run Time

To add BunifuDatePicker at run-time, access your Form's Load event and add the following code snippet:

C#

using Bunifu.UI.WinForms;
private void Form1_Load(object sender, EventArgs e)
{
    BunifuDatePicker datePicker = new BunifuDatePicker();
    //set location for the date picker
    datePicker.Location = new Point(330, 200);
    //set the size of the date picker
    datePicker.Size = new Size(400, 30);
    //add a border color
    datePicker.Color = Color.DodgerBlue;
    //add an icon color
    datePicker.IconColor = Color.DodgerBlue;
    //create a curved border at the edges
    datePicker.BorderRadius = 5;
    //set a thick border
    datePicker.DateBorderThickness = BunifuDatePicker.BorderThickness.Thick;
    //add to the control to the form
    this.Controls.Add(datePicker);
}

VB.NET

Imports Bunifu.UI.WinForms
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	Dim datePicker As New BunifuDatePicker()
	'set location for the date picker
	datePicker.Location = New Point(330, 200)
	'set the size of the date picker
	datePicker.Size = New Size(400, 30)
	'add a border color
	datePicker.Color = Color.DodgerBlue
	'add an icon color
	datePicker.IconColor = Color.DodgerBlue
	'create a curved border at the edges
	datePicker.BorderRadius = 5
	'set a thick border
	datePicker.DateBorderThickness = BunifuDatePicker.BorderThickness.Thick
	'add to the control to the form
	Me.Controls.Add(datePicker)
End Sub

Appearance

This section explains on customizing the look and feel of BunifuDatePicker by using the properties that are elaborated below:

1. Font

This property gets or sets the font styles which will be applied on the selected date displayed on the calendar's textbox. The property is directly accessible in the design view from BunifuDatePicker's smart tag or via the property pane.

Don't use CalendarFont property to set the date picker's font. Ensure to look out for the Font property

2. ForeColor

This property gets or sets a color of the date text displayed on the calendar's textbox. It supports both the RGB and HEX color formats.

❗ TheCalendarForeColor property doesn't set the date picker's text color. Ensure to look out for the ForeColor property

3. Color

This property gets or sets the border color of the calendar's textbox. It supports both the RGB and HEX color formats.

4. LeftTextMargin

This property gets or sets an integer value that specifies the margin area on the left side of the displayed date in the calendar textbox. The greater the value, the more the left margin area is created.

5. DisabledColor

This property gets or sets a color value that gets applied at runtime when BunifuDatePicker has been disabled. It supports both the RGB and HEX color formats.

6. DateBorderThickness

This property gets or sets an enumerated value that determines the width of a date picker's border.

There are two distinct values enumerated: thick and thin. The thick value sets the sets a dense border to the date picker's textbox while the thin value sets a narrow border to the date picker's textbox.

7. Icon

This property gets or sets an image resource that is rendered on the default right side of the date picker's textbox. We recommend that you use .ico image resources as a preferred icon type for BunifuDatePicker.

Using .ico image resources give you an upper hand to modify its color with theBunifuDatePicker's IconColor property. You can get these .ico types of icons by downloading the Pichon app here.

8. IconColor

This property gets or sets a color value for the date picker's icon. You can set an RGB or a HEX color value format.

This property works only with .ico types of icons. Other formats such as jpeg and png are incompatible with this property.

9. IconLocation

This property gets or sets the icon's position using one of the enumerated left or right values. By default, the icon is positioned to the right side of the date displayed inside the date picker's textbox.

10. DisplayWeekNumbers

This property gets or sets a boolean value that, when set to true, displays week numbers in the first column alongside the dates displayed on the popup calendar.

11. BorderRadius

This property gets or sets an integer value that specifies the roundness of the date picker's edges.

Selecting Dates in BunifuDatePicker

BunifuDatePicker allows you to either enter a date or select it from the popup calendar. To get the date selected by a user, use the ValueChanged event to observe the date selection changes, and use the value property to get the date selected by the user.

Here's the code that implements the above statement:

C#

private void fromDateBunifuDatePicker_ValueChanged(object sender, EventArgs e)
{
    fromDateBunifuLabel.Text = fromDateBunifuDatePicker.Value.Date.ToString("dd");
    fromMonthYearBunifuLabel.Text = fromDateBunifuDatePicker.Value.ToString("MMMM yyyy");
    toBunifuDatePicker.MinDate = fromDateBunifuDatePicker.Value;
}
private void toBunifuDatePicker_ValueChanged(object sender, EventArgs e)
{
    toDateBunifuLabel.Text = toBunifuDatePicker.Value.Date.ToString("dd");
    toMonthYearBunifuLabel.Text = toBunifuDatePicker.Value.Date.ToString("MMMM yyyy");
}

VB.NET

Private Sub fromDateBunifuDatePicker_ValueChanged(ByVal sender As Object, ByVal e As EventArgs)
	fromDateBunifuLabel.Text = fromDateBunifuDatePicker.Value.Date.ToString("dd")
	fromMonthYearBunifuLabel.Text = fromDateBunifuDatePicker.Value.ToString("MMMM yyyy")
	toBunifuDatePicker.MinDate = fromDateBunifuDatePicker.Value
End Sub
Private Sub toBunifuDatePicker_ValueChanged(ByVal sender As Object, ByVal e As EventArgs)
	toDateBunifuLabel.Text = toBunifuDatePicker.Value.Date.ToString("dd")
	toMonthYearBunifuLabel.Text = toBunifuDatePicker.Value.Date.ToString("MMMM yyyy")
End Sub

A date range can be specified by using the MinDate and MaxDate properties of BunifuDatePickerto prevent the user from selecting dates that are out of scope or irrelevant.

Formating the Date value

The format property allows you to get or set the date and time display pattern for the value displayed inBunifuDatePicker's textbox and also in its set value property.

BunifuDatePicker supports the following DateTime formats

1. The Long Format

The long date format is a standard date pattern that displays the name of a month, the date value, and the year as specified on your operating system (i.e the windows regional settings). Here's an example of a long date format:

2. The Short Format

The short date format displays the date pattern as dd/mm/yy but uses the date separator specified in your operating system. For example, in English (U.S.), the specified separator is the slash (/). Here's an example of a short date format:

3. The Custom Format

The custom format allows us to define our own date pattern. Custom formats that are inconsistent with the date/time settings specified in Windows regional settings are ignored.

To create a custom format, use the following characters as placeholders and separators.

Character	Description
c	Displays the general date format.
d or dd	Displays the day of the month as one or two digits. For one digit, use a single placeholder; for two digits, use two placeholders.
ddd	Displays an abbreviated the day of the week to three letters.
dddd	Displays the full name of the day of the week
ddddd	Displays the short date format
dddddd	Displays the long date format
m or mm	Displays the month as either a one-digit or two-digit number.
mmm	Displays an abbreviated name of the month to three letters. For example, August appears as Aug.
mmmm	Displays a full named month.
yy	Displays the last two digits of the year.
yyyy	Displays all digits in a year for 0001-9999 depending on the date and time data type supported range.

Take Away

You have just learned how to use Bunifu Date Picker. Built-in customization is well developed. There are many methods, options, and events you can use for making the tools you need. Its look and feel is quite simple and straightforward. It fits perfectly to be chosen for any corporate applications. Got Questions? We would love to answer and support you. Feel free to chat with us on our support page.