# Bunifu Date Picker

## 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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MgIrF5Aj5yF-MQ3LILV%2F-MgJ3t7bcexcmDrLR1yx%2Fdp002.gif?alt=media\&token=4b2cd6a7-b988-4544-98fa-6e191ef89035)

## 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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MgMr-VzK1NwjMhg1gbk%2F-MgMr2UFpL-I_vRhfFix%2Fdp003.gif?alt=media\&token=ae9c7c4d-1edf-403f-8f76-d684345cb38d)

### Adding Bunifu DatePicker at Run Time

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

{% tabs %}
{% tab title="C#" %}

```csharp
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);
}
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
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

```

{% endtab %}
{% endtabs %}

## 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.

{% hint style="danger" %}
Don't use `CalendarFont` property to set the date picker's font. Ensure to look out for the **`Font`** property
{% endhint %}

### 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.

{% hint style="danger" %}
:exclamation: The`CalendarForeColor` property doesn't set the date picker's text color. Ensure to look out for the **`ForeColor`** property
{% endhint %}

### 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 the`BunifuDatePicker's` `IconColor` property. You can get these .ico types of icons by downloading the [Pichon app here](https://www.microsoft.com/en-us/p/pichon-free-icons/9nk8t1kshffr).

### 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.

{% hint style="warning" %}
This property works only with .ico types of icons. Other formats such as jpeg and png are incompatible with this property.
{% endhint %}

### 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:

{% tabs %}
{% tab title="C#" %}

```csharp
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");
}
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
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

```

{% endtab %}
{% endtabs %}

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

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MgMr-VzK1NwjMhg1gbk%2F-MgNQukprNQGwDd1Hmup%2Fdp004.gif?alt=media\&token=89b48141-6016-4078-873a-160a88e1e59e)

## Formating the Date value

The **format** property allows you to get or set the date and time display pattern for the value displayed in`BunifuDatePicker'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.