Edit Cells with Date Picker in Angular Grid

Created: 28 Jan 2019

When you want to display a Date value in grid cells and you need to edit it during run-time, you can use the DatePicker editor. This dropdown editor when clicked displays a calendar that allows you to navigate among dates from different months or years and select a new date. Once a date is selected, the cell value is updated accordingly.

* Icons used in this sample are provided by icondrawer.com

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

For demonstrations purposes only, you can select dates between 2010 and 2019. This restriction is set when cell value is changing. You can read more about this in section below that explains how to handle changes to the cell with date values.

How to Enable the Date Editor in Angular Grid

To enable the DatePicker editor, you need to set the editor type of the column to Date. In addition, if you want to customize the way the dates are displayed, you can provide the date format and localization.

The editorSettings field of the column object, accepts the following settings:

  • calendarSize - specifies the size of dropdown window that contains the calendar
  • firstDayOfWeek - specifies which day is the first day displayed in the calendar
  • format - determines how the date is displayed: Short, Long or in Custom format
  • formatOptions - additional options that determines how date year, month and day are displayed. Used only if the format field is set to Custom.
  • locales - a string that specifies the language used for dates
  • style - an object that holds the names of CSS classes for different parts of the calendar

Note All standard values for the Date object are also acceptable by the locales and formatOptions fields.

By default the firstDayofWeek is set to Sunday, if you need a different day change this field value to some other day. The following values are supported: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday and Sunday. Depending on localization in use, the first day is translated accordingly.

If you want to display a bigger or smaller calendar, use the calendarSize field. By default, the calendar has the size of 250 x 200 pixels.

Here is an example of Date Picker settings that you can use:

import { Component, enableProdMode, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { IntegralUIDateFormat, IntegralUIEditorType, IntegralUIWeekDays } from './integralui/components/integralui.core';

enableProdMode();

@Component({
    selector: 'iui-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;

    constructor(){
        this.columns = [
            { id: 1, headerText: "Company", width: 300 },
            { id: 2, headerText: "Price", headerAlignment: "center", contentAlignment: "right" },
            { 
                id: 3, 
                contentAlignment: "center", 
                headerText: "Date", 
                headerAlignment: "center",
                editorType: IntegralUIEditorType.Date,
                editorSettings: {
                    calendarSize: { width: 300, height: 250 },
                    locales: 'en-GB',
                    firstDayOfWeek: IntegralUIWeekDays.Monday,
                    format: IntegralUIDateFormat.Custom,
                    formatOptions: {
                        year: 'numeric',
                        month: 'short',
                        day: '2-digit'
                    }
                },
                width: 150
            },
            { id: 4, headerText: "Country", headerAlignment: "center", width: 180 }
        ];
    }
}
                            
<div class="app-block" #application>
    <iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" #grid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span class="grid-celldt-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span [ngSwitch]="cell.cid">
                <div *ngSwitchCase="4">
                    <span class="grid-celldt-flags" [ngClass]="cell.icon"></span>
                    <span class="grid-celldt-country">{{cell.text}}</span>
                </div>
                <span *ngSwitchDefault>
                    <span class="grid-celldt-label">{{cell.text}}</span>
                </span>
            </span>
        </ng-template>
    </iui-grid>
</div>
                            

As you can see from code, the size is set to 300 x 250 pixels, where first day of the week is set to Monday and the dates are displayed in custom format where days appear in two digits, months uses short format and years are displayed in full.

How to Customize the Date Picker Editor

If you want to change the colors of specific part of the dropdown calendar, you can use the style field from the editor settings. The style field is an object that accepts the following settings:

{
    calendar: {
        general: {
            disabled: 'disabledGeneralClassName',
            focused: 'focusedGeneralClassName',
            normal: 'normalGeneralClassName',
            hovered: 'hoveredGeneralClassName',
            selected: 'selectedGeneralClassName'
        },
        cell: {
            disabled: 'disabledCellClassName',
            focused: 'focusedCellClassName',
            grayed: 'grayedCellClassName',
            normal: 'normalCellClassName',
            hovered: 'hoveredCellClassName',
            selected: 'selectedCellClassName',
            today: todayCellClassName'
        }
    }
}
                    

Where:

  • general - a group of CSS classes that controls the appearance of the calendar as a whole for different state
  • cell - a group of CSS classes that controls the appearance of the calendar cells for different state

From the object format, for each state a different CSS class is used. You can only to provide CSS classes for the parts of the calendar that you want to change.

For example, let's say that you want to have all calendar cells to have a border and appear in 'light green' background. The grayed cells (the ones from previous or next month), to appear as grayed with values in red color. And the selected date to appear in 'dark green' with value in white color.

Note While hovering over calendar cells, an animation takes place that changes the colors from no normal to hovered state on enter and back to normal on leave. You need to consider this and change the CSS styles for these animations.

editorSettings: {
    calendarSize: { width: 300, height: 250 },
    locales: 'en-GB',
    firstDayOfWeek: IntegralUIWeekDays.Monday,
    format: IntegralUIDateFormat.Custom,
    formatOptions: {
        year: 'numeric',
        month: 'short',
        day: '2-digit'
    }
    style: {
        calendar: {
            cell: {
                grayed: 'calendar-cell-grayed',
                hovered: 'calendar-cell-hovered',
                normal: 'calendar-cell',
                selected: 'calendar-cell-selected'
            }
        }
    }
}
                            
.calendar-cell {
    background: #f5fff4;
    border: thin solid #e0f2de;
}
.calendar-cell-grayed {
    background: #fcfcfc;
    border: thin solid #e9e9e9;
    color: red;
    opacity: 0.5;
}
.calendar-cell-selected {
    background: #a4c6a1;
    border: thin solid #88aa85;
    color: white;
}
.calendar-cell-hovered {
    background: #cae5c7;
    border: thin solid #e9e9e9;
}
@keyframes calendar-cell-enter
{
    0% {       
        background: #f5fff4;
        border-color: #e0f2de;
    }
    100% { 
        background: #cae5c7;
        border-color: #e9e9e9;
    }
}
@keyframes calendar-cell-leave
{
    0% {       
        background: #cae5c7;
        border-color: #e9e9e9;
    }
    100% { 
        background: #f5fff4;
        border-color: #e0f2de;
    }
}
                            

How to Handle Changes to Date Values by the Editor

Once the editor is set, you can add Date values to the cell object for each row in specified column of the angular grid. At first, you need to make sure that the cell is linked with the column. For this purpose, the cell cid value must be the same as column id value. This makes sure that when you add/remove columns, change column visibility or any actions that may affect the column order, the cells will remain appearing under the same column.

constructor(){
    this.columns = [
        { id: 1, headerText: "Company", width: 300 },
        { id: 2, headerText: "Price", headerAlignment: "center", contentAlignment: "right" },
        { 
            id: 3, 
            headerText: "Date", 
            contentAlignment: "center", 
            headerAlignment: "center", 
            editorType: IntegralUIEditorType.Date,

            // . . .
        },
        { id: 4, headerText: "Country", headerAlignment: "center", width: 180 }
    ];

    this.rows = [
        { 
            id: 1,
            text: "Lacus Aliquam Consulting",
            cells: [{ cid: 1, text: "Lacus Aliquam Consulting" }, { cid: 2, text: "$326.42" }, { cid: 3, value: new Date(2018, 0, 13) }, { cid: 4, icon: 'brazil', text: "Brazil" } ]
        },
        { 
            id: 2,
            text: "Magna Sed Limited",
            cells: [{ cid: 1, text: "Magna Sed Limited" }, { cid: 2, text: "$780.60" }, { cid: 3, value: new Date(2017, 3, 10) }, { cid: 4, icon: 'germany', text: "Germany" } ]
        },

        // . . .
}
                            

In case of Date Editor, the cell value accepts only Date objects. If you add a value of another type, an error may appear.

Now, the cells with Date editor will display the Date value in format specified and a dropdown icon on right side of the cell. The dropdown icon notifies you that when the cell is clicked, a dropdown calendar will popup where you can select a new date.

Once a new date is selected, the cellValueChanging and cellValueChanged events are fired from the grid. These events holds information on the cell that is clicked and the new value selected. You can handle these events in your code and add your custom actions. For example, you can allow changes only if the selected date is within a specified range.

isDateInRange(e: any){
    // Check whether the event value is a Date object
    if (Object.prototype.toString.call(e.value) === '[object Date]'){
        let year = e.value.getFullYear();

        // Cancel the event if year is outside this range
        if (year < 2010 || year > 2019)
            e.cancel = true;
    }
}

                            
<div class="app-block" #application>
    <iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" (cellValueChanging)="isDateInRange($event)" #grid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span class="grid-celldt-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span [ngSwitch]="cell.cid">
                <div *ngSwitchCase="4">
                    <span class="grid-celldt-flags" [ngClass]="cell.icon"></span>
                    <span class="grid-celldt-country">{{cell.text}}</span>
                </div>
                <span *ngSwitchDefault>
                    <span class="grid-celldt-label">{{cell.text}}</span>
                </span>
            </span>
        </ng-template>
    </iui-grid>
</div>
                            

In this case, only dates between year of 2010 and 2019 are allowed. If a date is outside this range is selected, the event is cancelled. As a result, there is no change and the cell value remains the same.

Conclusion

IntegralUI Grid component for Angular comes with built-in DatePicker editor that allows you to edit cells with date values. You can specify the editor size, use different date formats and change its appearance with custom CSS styles. In addition, any change to cell value is accompanied with events that you can handle in your code and provide further actions or restrictions.

The Grid component is part of IntegralUI Web.

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.