Date Picker

Summary

A Date Picker is provided by AdapTable whenever a date cell is edited
It is also used when filtering a date column
The Date Picker is highly configurable and themable

The Date Picker is automatically used by default in AdapTable when editing all Date cells.

Note

A Date cell is one where the Cell Data Type property for the column is date

It is also used when filtering any Date Column.

Hint

This can be changed by setting showDatePicker to false in Column Filter Options

The Date Picker is designed to be easily themable and can be heavily customised with CSS Variables.

Value Parser

If the Column Definition in AG Grid has a valueParser (provided as a function), that will be invoked before setting the value for the cell.

This is useful because dates can be stored as strings, numbers or Date instances, but the value parser will be called with a Date instance.

Hint

It's your responsibility to transform that value to the format required for persisting it to the grid
We strongly recommend you specify a colDef.valueParser function

Customising

Buttons

Date Format

Date Picker Customising

Fork Fork

This demo shows some ways to customize the AdapTable Date Picker component
- The default Buttons have been set to Today, Yesterday and Next Workday
- Show Week Numbering is on
- Days not in the current month are hidden

Open to see the Date Picker Configuration

This is the code used to configure the Date Picker in this demo:

userInterfaceOptions: {
  dateInputOptions: {
    datepickerButtons: ['today', '-', 'yesterday', 'nextWorkday'],
    showWeekNumber: true,
    showOutsideDays: false,
  },
},

Try It Out

Open the Date Picker in the Filter Bar for one of the Date columns and see how it looks

Theming

The Date Picker can be fully styled - colours, look and feel, borders etc.

Date Picker Theming

Fork Fork

This demo shows how to theme the AdapTable Date Picker component.

Open to see the Date Picker Configuration

This is the code used to theme the Date Picker in this demo:

/* Date picker */
--ab-cmp-datepicker__background: rgb(238, 238, 238);
--ab-cmp-datepicker__selected-color: rgb(98, 0, 255);
--ab-cmp-datepicker__selected-text-color: rgb(255, 255, 255);
--ab-cmp-datepicker__selected-border-radius: 30%;
--ab-cmp-datepicker__day-border-radius: 30%;
--ab-cmp-datepicker__border: 1px solid rgb(0, 4, 250);
--ab-cmp-datepicker__cell-size: 40px;

Try It Out

Open the Date Picker in the Filter Bar for one of the Date columns and see how it looks

Date Input Options

The dateInputOptions property in UserInterfaceOptions contains a number of properties for managing the Date Picker:

Property	Description	Default
dateFormat	Format string for formatting date input field	'yyyy-MM-dd' (ISO 8601 format)
datepickerButtons	List of buttons which are displayed in the datepicker overlay in the given order (provide empty array to display no buttons); custom button layout and positioning is achievable with the special elements `-` and `\|`	['close','today']
locale	Locale object (to localize Date Picker)	`en-US`
showOutsideDays	Display outside days (i.e. those falling in next or previous month)	true
showWeekNumber	Display the week numbers column	false
useNativeInput	Use browser specific date input instead of AdapTable's Date Picker	false

PreviousPercentage Cell Editor