DateInput/DateField in Forma36?

Hi! I want to create a UI extension with a date input, preferably one that looks identical to the existing input for regular(extension-less) date fields. But from what I can see there is no date input in Forma36. Is this so? What are my options? (besides using a 3rd party datepicker)

Cheers! / Fredrik

Hi @fredrik.westmark

Thanks for your question and interest in Forma 36. This is something that we have in our internal Forma 36 backlog, however I’m unable to give any estimations as to when the component will be available.

For now I’d recommend using a third-party datepicker. We provide design tokens and CSS helper packages as part of Forma 36 (https://github.com/contentful/forma-36/tree/master/packages) which could assist in styling a third-party datepicker.

Alternatively you could also use the native type attribute on an input component, although this comes with some browser support issues https://caniuse.com/#feat=input-datetime.

We will update the TextInput component to allow these attributes, once this has been updated you’d be able to use this component as an interim solution.

Thanks for the reply. I decided to wrap Forma’s TextInput and added Pikaday(which is apparently used in the real editor) to it. The styling is sadly a bit different from yours, but it’ll have to do.

Is there any update to getting a Date component in Forma 36? It would be great to be able to leverage the core date components.

Edit: I just found https://github.com/contentful/forma-36/tree/master/packages/components/forma-36-react-datepicker so it appears it is in the works but still in alpha…

@blake.thompson We just released our open-source field editors, here’s the DateEditor: https://contentful-field-editors.netlify.app/date

1 Like