Unable to use datetime type in Editor

kshinde

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

allan

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

allan

Two commits for this:

• DateTime
• DataTables

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

kshinde

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)

allan

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

Regarding the 504 error - does Vite give any errors?

Allan

kshinde

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

kshinde

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

kshinde

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?

allan

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

Allan

kshinde

Sure, let me give it a shot

kshinde

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

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?

allan

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