Overview of IntegralUI DatePicker for Angular

Created: 26 Nov 2019

IntegralUI DatePicker is a native Angular component that allows you to select a data using a dropdown calendar. You can customize the component appearance using CSS and selecting a date format. In this article, you will find general information about the date picker component, including its properties, events and methods that you can use.

The DatePicker is a simple component, it contains a header that displays the currently selected date in specified format and a dropdown calendar where you can select a date.

By clicking on the arrow button, the dropdown panel will popup showing a calendar. The Calendar in use is an angular component that allows you to navigate through Months, Years or a Decades and quickly select a specific date. Once a date is selected the dropdown panel will close and the DatePicker will show the newly selected date.

How to Use IntegralUI DatePicker in Angular

To use the DatePicker component you need to do the following:

• In app template place the button component using the iui-datepicker tag name
• Set values for different properties available
• Handle the events in your code

• HTML

<div class="app-block" #application>
    <iui-datepicker [appRef]="applicationRef" [allowAnimation]="true"></iui-datepicker>
</div>
                            

By default, the selected date is displayed in 'en-us' format as 'short' string. You can modify this using the locales and format properties and display dates in different language. In addition, the formatOptions property determines how date year, month and day are displayed, following standard specifications.

• Angular
• HTML

import { IntegralUIDateFormat } from './integralui/components/integralui.core';

. . .

@ViewChild('application', {read: ViewContainerRef, static: false}) applicationRef: ViewContainerRef;

public dateFormat: IntegralUIDateFormat = IntegralUIDateFormat.Custom;
public dateFormatOptions: any = {
    year: 'numeric',
    month: 'short',
    day: '2-digit'
}
                            

<div class="app-block" #application>
    <iui-datepicker [allowAnimation]="true" [appRef]="applicationRef" [format]="dateFormat" [formatOptions]="dateFormatOptions"></iui-datepicker>
</div>
                            

Note The appRef property settings is required, because the dropdown calendar appears in a popup window. This reference is used to determine the parent component that will contain the popup window. Usually is the root app component, so that dropdown calendar appears on top of all other components.

Date Picker as Part of Other Angular Components

DatePicker component is also usable as part of other components. For example, you can add a date picker to the cells in the Grid or TreeGrid components. Detailed information is available here: Edit Cells with Date Picker in Angular Grid.

You can also use the date picker component in Angular Forms.

IntegralUI DatePicker - Available Properties, Events and Methods

Supported Properties

You can use the following properties to change the appearance and behavior of the DatePicker component:

• allowAnimation - determines whether changes to the date picker are animated or not
• appRef - holds a reference to application view
• calendarFirstDayOfWeek - specifies the first day of the week in the calendar
• calendarSize - specifies the calendar width and height in pixels.
• controlStyle - specifies an object that contains all style settings for the component
• data - specifies an object that holds data related to the component
• enabled - determines whether the component is enabled or disabled
• format - determines whether dates are displayed using standard or custom formatting
• formatOptions - an object that describes the date components in custom formatting
• locales - specifies the current localization string in use
• name - uniquely identifies the component
• selectedDate - the date that is selected
• size - specifies the component width and height
• state - specifies the component state: disabled, hovered, etc.

Using the above properties, you can customize the DatePicker component in a way best suited for your application.

Supported Events

Here is a list of available events:

• dateChanged - occurs when selected date property changes
• enabledChanged - occurs when component is enabled or disabled
• stateChanged - occurs when component state changed: disabled, normal, hovered, selected

When a date is selected from the dropdown calendar, the dateChanged event is fired. You can handle this event in your code and add specific action based on the event data.

• Angular
• HTML

onDateChanged(e: any){
    console.log("A new date is selected: ", e.date);
}
                            

<div class="app-block" #application>
    <iui-datepicker [allowAnimation]="true" [appRef]="applicationRef" (dateChanged)="onDateChanged($event)" ></iui-datepicker>
</div>
                            

Supported Methods

The following public methods are available:

• refresh - updates the component appearance
• updateLayout - updates the component layout

How to Customize the DatePicker Appearance

The appearance of DatePicker component is determined by a set of CSS classes. Using the controlStyle property, you can override these classes by providing your own. This property can accept an object in following format:

datePickerStyle = {
    general: {
        disabled: 'iui-datepicker-disabled',
        focused: 'iui-datepicker-focused',
        normal: 'iui-datepicker',
        hovered: 'iui-datepicker-hovered',
        selected: 'iui-datepicker-selected'
    },
    header: {
        disabled: 'iui-datepicker-header-disabled',
        focused: 'iui-datepicker-header-focused',
        normal: 'iui-datepicker-header',
        hovered: 'iui-datepicker-header-hovered',
        selected: 'iui-datepicker-header-selected'
    },
    calendar: {
        general: {
            disabled: 'iui-calendar-disabled',
            focused: 'iui-calendar-focused',
            normal: 'iui-calendar',
            hovered: 'iui-calendar-hovered',
            selected: 'iui-calendar-selected'
        },
        cell: {
            disabled: 'iui-calendar-cell-disabled',
            focused: 'iui-calendar-cell-focused',
            grayed: 'iui-calendar-cell-grayed',
            normal: 'iui-calendar-cell',
            hovered: 'iui-calendar-cell-hovered',
            selected: 'iui-calendar-cell-selected',
            today: 'iui-calendar-cell-today'
        }
    }
}
                    

Not all fields are required, you only need to specify the names of your CSS classes for specific part that you want to change. For example, to set the component size use the general->normal field and to have calendar cells appear in light gray color, specify the calendar->cell->normal fields to your CSS class names:

• Angular
• HTML
• CSS

public ctrlStyle: any = {
    general: { 
        normal: 'dtpckr-ovw',
    },
    calendar: {
        cell: {
            normal: 'dtpckr-ovw-cell'
        }
    }
}
                            

<div class="app-block" #application>
    <iui-datepicker [allowAnimation]="true" [appRef]="applicationRef" [controlStyle]="ctrlStyle" (dateChanged)="onDateChanged($event)" ></iui-datepicker>
</div>
                            

.dtpckr-ovw
{
    width: 200px;
}
.dtpckr-ovw-cell
{
    background: #f9f9f9;
    border-color: #e5e5e5;
}
                            

To disable animations in the date picker component, set the allowAnimation property to false.

Conclusion

IntegralUI DatePicker component for Angular allows you to select a data using a dropdown calendar. You can customize the date picker appearance and behavior using your own CSS classes or changing the date format in use. The date picker is also usable as part of other components or in Angular Forms.

The DatePicker component is part of IntegralUI Web.