Unable to use datetime type in Editor

Unable to use datetime type in Editor

kshindekshinde Posts: 17Questions: 3Answers: 0

Hello,

I am using inline Editor with Vue.
I am trying to add datetime type to one of the columns.
I have done below check items:

  1. Installed datatables.net-datetime via npm
  2. added line import DateTime from 'datatables.net-datetime'; in my component
  3. added this as editor configuration
    const editorConfig = {
    table: table.value,
    idSrc: 'id',
    fields: [
    {
    name: "name",
    },
    {
    name: "type",
    type: "select",
    ipOpts: typesList,
    },
    {
    name: "startdate",
    type: "datetime",
    },
    {
    name: "status",
    },
    ],
    }; // Editor configuration

      tableEditor = new Editor(editorConfig);
    
  4. attached editor to table as below:
    dtTableInstance = table.value.dt();
    tableEditor.table(dtTableInstance.table().node());

When I try to run, I am getting error as

! Uncaught (in promise) DateTime library is required For more information, please refer to https://datatables.net/tn/15

I have already added that library on my component page, but that is not getting attached with the Editor and/or DataTable.
Even the Tsconfig throwing error as 'DateTime' is defined but never used

TIA
-Komal

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    What to do is:

    DataTable.DateTime = DateTime;
    

    Normally what would happen is that DateTime will check for the global DataTable variable and attach itself to that. But since you are loading modules which have scope automatically, there is no global DataTable variable, and this that can't complete.

    What we probably need is for DataTable.use() to allow the DateTime library to be registered. This isn't required with Buttons etc since they depend upon DataTables and thus can register themselves, but DateTime can be used without DataTables - hence the issue.

    Allan

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    Two commits for this:

    Once released you would use:

    DataTable.use(DateTime);
    

    So it still requires registration this way - it can't be made automatic without having a dependency on DataTables, but it is at least a little smoother.

    For the current releases, use the workaround above.

    Allan

  • kshindekshinde Posts: 17Questions: 3Answers: 0

    Wow. I did tried DataTable.use(DateTime);
    just similar as initialising the Editor, but it threw some unknown error.
    Waiting till the release then.

    After trying this:
    DataTable.DateTime = DateTime;

    I am getting
    GET http://localhost:8088/node_modules/.vite/deps/datatables_net-datetime.js?v=9b9b1df5 net::ERR_ABORTED 504 (Gateway Timeout)

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Yes, the releases aren't likely to happen until at least next week.

    Regarding the 504 error - does Vite give any errors?

    Allan

  • kshindekshinde Posts: 17Questions: 3Answers: 0

    Nothing actually,
    strangely the component in which I am using the datetime, is not available when I try to add debugger from Source tab.

  • kshindekshinde Posts: 17Questions: 3Answers: 0

    When I tried to console.log(DataTable.DateTime);
    It's undefined.

  • kshindekshinde Posts: 17Questions: 3Answers: 0

    I found few more things;

    so, when we add the Datetime library via npm, it gets added in node_modules, similar to other extensions like autofill, keytable, editor etc.

    When we visit a component, in which above extensions are used, it's JS file gets added in /.vite/deps folder.

    Like
    datatables_net-autofill.js
    datatables_net-autofill.js.map
    etc.

    but this is not happening for DateTime library. and hence vite is unable to load the extension as well as the component. (and due to this, I was unable to locate the component in the sources tab).

    I think, the DateTime library is not getting initialised properly and hence not getting added as vite deps.

    What do you think?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Perhaps you could create a test repo that demonstrates the issue. I'm no expert at Vite, but perhaps I'll spot something.

    Allan

  • kshindekshinde Posts: 17Questions: 3Answers: 0

    Sure, let me give it a shot

  • kshindekshinde Posts: 17Questions: 3Answers: 0
    edited April 2023

    Interestingly, after you pointed out to vite, I actually tried to serve the project via vue-cli-service serve

    And it worked!! The calendar popped out correctly.
    Thank you so much @allan o:)

    Post release, I will change

    DataTable.DateTime = DateTime;

    with

    DataTable.use(DateTime);

    Cheers!

    P.S. I am not able to accept the answer. Is something broken at forums?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    P.S. I am not able to accept the answer. Is something broken at forums?

    No - this thread was opened as a Discussion rather than a Question. I've changed it over to a Question now.

    Good to hear that worked.

    Allan

Sign In or Register to comment.