Our great sponsors
-
ag-Grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
In a recent project, I found myself in need of a date-time filter for one of my columns. Reading through the docs you see that AG-Grid provides a date filter that works great, but it doesn't filter based on the time straight out of the box. GitHub user @gportela85 provided a jQuery-based solution in the issues section of the AG-Grid repo, but we shouldn't be using jQuery with our React project. So, what does a developer do when in need of a super-specific filter that filters all the way down to the second? They create their own, of course.
Now, comes the fun part. We need to decide what datetime picker we are going to be using as our filter's input component. There are some great options out there but for our purposes we will be using React-DateTime-Picker. This picker is super easy to use. In the root directory of your project: