How to Use DatePicker to Edit Grid Cells
If you want to display Dates in grid cells and you need to edit them during run-time, you can use the DatePicker editor. When cell is focused, on click you can display a dropdown editor that will show 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 grid cell value is updated accordingly. This process is accompanied with events that you can handle in your code.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to use Date-Picker component to edit grid cells.
* Icons used in this sample are provided by icondrawer.com
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
For demonstrations purposes only, you can select dates between 2016 and 2022. 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 dates.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
DatePicker Editor in Grid for Angular, React and Vue
To enable the DatePicker editor, at first you need to set the editor type of column to Date. Depending on editing mode (Batch, Form, Inline or Custom) and editor settings, a DatePicker component will appear in column cells. 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 column object, accepts the following settings:
- allowAnimation - determines whether animations are enabled in DatePicker
- animationSpeed - determines the speed at which the animations are executed
- calendarSize - specifies the size of dropdown window that contains the calendar
- dropDownAdjustment - an object that holds top and left position adjustments for 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
- visible - determines when editor becomes visible: always, click, hover or none
All available formatting options from the DateTimeFormat, are usable in the grid and 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 language 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:
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
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 DatePicker Editor in Grid
If you want to change the colors of specific part of the dropdown calendar, you can create a custom CSS file where you can set up how the dropdown calendar will appear. Once this file is ready, you can apply it to the Grid customStyle property. Any changes to the built-in classes related to the DatePicker will be applied accordingly.
For example, let's say that you want to have days in the calendar to have a border and appear in light green background when hovered. The days from previous or next month, to appear as grayed with values in red color. In addition, the selected date to appear in dark green with value in white color. You can modify the built-in CSS classes and change them like this:
While hovering over calendar cells, an animation takes place that changes the colors from 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.
How to Handle Changes to Dates 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 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.
In case of DatePicker editor, the cell value accepts only Date objects. If you add a value of another type, an error may appear.
If your data source has dates stored as strings, you can easily convert them to Date objects using the Date constructor.
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 visually represents that when the cell is clicked, a dropdown calendar will popup where you can select a new date.
You can also select dates using keyboard when cell is focused. A dropdown calendar will not appear in this case, but you can select a new date by pressing the LEFT or RIGHT keys to decrease or increase the current date by 1 day, if a SHIFT is pressed and hold the current date is changed by 30 days.
Once a new date is selected, the grid fires the valueChanging and valueChanged events. These events hold information on the cell that value is changing/changed and the new value. 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.
In this case, only dates between year of 2016 and 2022 are allowed. If a date outside this range is selected, the default event action is cancelled. As a result, there is no change and the cell value remains the same.
valueChanging and valueChanged events are mostly used when editing mode is set to Custom. For Batch or Inline Editing, changes to the cell value must be confirmed by calling the endEdit method or clicking the Save button. Otherwise, any changes to cell values are cancelled.
Conclusion
IntegralUI Web - Grid component 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 is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.