Unable to use datetime type in Editor
Unable to use datetime type in Editor
kshinde
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:
- Installed datatables.net-datetime via npm
- added line import DateTime from 'datatables.net-datetime'; in my component
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 configurationtableEditor = new Editor(editorConfig);- 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
What to do is:
Normally what would happen is that
DateTimewill check for the globalDataTablevariable and attach itself to that. But since you are loading modules which have scope automatically, there is no globalDataTablevariable, and this that can't complete.What we probably need is for
DataTable.use()to allow theDateTimelibrary 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
Two commits for this:
Once released you would use:
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
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)
Yes, the releases aren't likely to happen until at least next week.
Regarding the 504 error - does Vite give any errors?
Allan
Nothing actually,
strangely the component in which I am using the datetime, is not available when I try to add debugger from Source tab.
When I tried to console.log(DataTable.DateTime);
It's undefined.
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?
Perhaps you could create a test repo that demonstrates the issue. I'm no expert at Vite, but perhaps I'll spot something.
Allan
Sure, let me give it a shot
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
with
Cheers!
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