Vue Data Grid: Date Component

You can create your own date components, and AG Grid will use them every time it needs to ask the user for a date value. The date components are currently used in date filters.

Simple Date Component

Below is a simple example of filter component:

const CustomDateComponent = {
   template: `
     <div class="ag-input-wrapper custom-date-filter" role="presentation" ref="flatpickr">
         <input type="text" ref="eInput" data-input style="width: 100%;"/>
         <a class="input-button" title="clear" data-clear>
             <i class="fa fa-times"></i>
         </a>
     </div>
   `,
   data: function () {
       return {
           date: null
       };
   },
   beforeMount() {
   },
   mounted() {
       this.picker = flatpickr(this.$refs['flatpickr'], {
           onChange: this.onDateChanged.bind(this),
           dateFormat: 'd/m/Y',
           wrap: true
       });

       this.eInput = this.$refs['eInput'];

       this.picker.calendarContainer.classList.add('ag-custom-component-popup');
   },
   methods: {
       onDateChanged(selectedDates) {
           this.date = selectedDates[0] || null;
           this.params.onDateChanged();
       },

       getDate() {
           return this.date;
       },

       setDate(date) {
           this.picker.setDate(date);
           this.date = date || null;
       },

       setInputPlaceholder(placeholder) {
           this.eInput.setAttribute('placeholder', placeholder);
       },

       setInputAriaLabel(label) {
           this.eInput.setAttribute('aria-label', label);
       }
   }
}

Custom Filter Parameters

When a Vue component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell & row values available to you via this.params - the interface for what is provided is documented below:

Example: Custom Date Component

The example below shows how to register a custom date component that contains an extra floating calendar picker rendered from the filter field. The problem with this approach is that we have no control over third party components and therefore no way to implement a preventDefault when the user clicks on the Calendar Picker (for more info see Custom Floating Filter Example). Our way of fixing this problem is to add the ag-custom-component-popup class to the floating calendar.

Example: Custom Date Component

Registering Date Components

By default the grid will use the browser provided date picker for Chrome and Firefox (as we think it's nice), but for all other browsers it will just provide a simple text field. You can use your own date picker to AG Grid by providing a custom Date Component as follows:

const MyApp = {
   template: `
     <ag-grid-vue
         :frameworkComponents="frameworkComponents"
         ...other properties...  
     >
     </ag-grid-vue>
   `,
   components: {
       'ag-grid-vue': AgGridVue
       myDateComponent: CustomDateComponent
   },
   data: function () {
       return {
           frameworkComponents: {
               // name is important here - it has to be agDateInput for the grid to recognise and use it in date fields 
               agDateInput: 'myDateComponent'
           },
           // other properties/values
       }
   },

Please see Provided Components for more information about overrided AG Grid provided components (as we're doing here by overriding agDateInput).

Custom Date Interface

When a Vue component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell & row values available to you via this.params.

The interface for a custom filter component is as follows:

interface {
   // Returns the current date represented by this editor
   getDate(): Date;

   // Sets the date represented by this component
   setDate(date: Date): void;

   // Optional methods

   // Sets the input text placeholder
   setInputPlaceholder(placeholder: string): void;

   // Sets the input text aria label
   setInputAriaLabel(label: string): void;
}

interface IDateParams {
    // Callback method to call when the date has changed
    onDateChanged: () => void;
}