Unified date, time, and datetime input widgets

cidgoh / DataHarmonizer

A standardized browser-based spreadsheet editor and validator that can be run offline and locally, and which includes templates for SARS-CoV-2 and Monkeypox sampling data. This project, created by the Centre for Infectious Disease Genomics and One Health (CIDGOH), at Simon Fraser University, is now an open-source collaboration with contributions from the National Microbiome Data Collaborative (NMDC), the LinkML development team, and others.

MIT License

91 stars 23 forks source link

These changes add three custom Handsontable editors to handle editing times, dates, and datetimes. Each inherits from one editor superclass that handles setting up a Flatpickr instance and hooking it up to the necessary Handsontable events. The concrete subclasses are just responsible for providing Flatpickr configuration. I chose Flatpickr over native browser inputs because the native controls generally lack the ability to control the formatting of the selected date. These editors are registered as part of three custom cell types and applied to columns based on the column datatype. The format of the values as displayed in the Handsontable grid are controlled by three new options that can be passed to the DataHarmonizer constructor. Acceptable values for these options should be based on the Unicode standard date and time tokens. Fixes #391
These changes also make the utility functions dataArrayToObject and dataObjectToArray used in JSON import/export aware of the DataHarmonizer instance's date and time formats and provide finer control over how to serialize/deserialize dates. This is ultimately controlled by another new DataHarmonizer constructor option. The default is that exported JSON will have dates in a format that is compatible with JSON Schema validation. Other possible options are having dates serialized according to the default serialization of Date objects or in the same format as they're displayed in the Handsontable grid. Fixes #389.

@ddooley I've had a little time to work on #391 here and there over the last week or two. Here's some in-progress work that might be worth checking out. The goal here is to unify the input of dates, times, and datetimes.

I ended up using the flatpickr library to render date, time, and datetime pickers. I initially tried to use the native <input> types, but I had forgotten how limiting those are in terms of display formatting. I think flatpickr is a good alternative because it's widely used, actively maintained, and has no external dependencies. The flatpickr setup is contained in a set of custom cell editors.

Implementing custom cell editors is a bit complex, and I'm not 100% sure I got all of the details exactly right. If you have time to checkout this branch and test it locally I'd appreciate it. I've added a small test schema for convenience (which I'll remove if/when we're ready to go forward with this).

cidgoh / DataHarmonizer

Unified date, time, and datetime input widgets #395