How to Use Other Components for Custom Inline Editing

Gantt Vue.js Gantt
#1

I want to customize the inline editing functionality.

I ues vue2

If it is a date field, use the datepicker component of el-element

But it doesn’t seem to be available.

Here is my code

I’ve assigned the editor’s type to datePicker for a specific column.

gantt.config.editor_types.datePicker = {
show (id, column, config, placeholder) {
const value = gantt.getTask(id)[column.name]
const html = <div> <el-date-picker type="date" name="${column.name}" placeholder="Select date" format="yyyy-MM-dd"> </el-date-picker> </div>
placeholder.innerHTML = html

    },
    hide () {
    },

    set_value (value, id, column, node) {
    },

    get_value (id, column, node) {
    },

    is_changed (value, id, column, node) {
    },

    is_valid (value, id, column, node) {
      return true / false
    },

    save (id, column, node) {
    },

    focus (node) {
    },
  }
#2

Hello,
ElDatePicker depends on Vue and is designed to work within Vue applications. It requires Vue to control the component for proper initialization, rendering, and updating.

Since Gantt doesn’t work within the Vue context, it doesn’t know how to handle the ElDatePicker component when you insert a simple HTML element (like input). This is why the ElDatePicker doesn’t initialize correctly in this case.

I tried to come up with a way to integrate the date picker, but unfortunately, I couldn’t find a working solution. However, you might want to consider using other date pickers. For example, MCDatepicker or Suite Calendar, which are independent JavaScript libraries: