Showing two DatePicker side by side in a Atlaskit Form

Atlassian Ecosystem Design
1

Hi,

I’m trying to make a UI similar to “Create Release of Jira”. I want two date field to be displayed side by side as shown in the first screenshot. All examples of Atlaskit Form displays fields in vertical direction. How can I display two fields next to each other? I have already tried adding a surrounding div with flex layout but I can’t set flex item properties of child items, they are displayed as shown in the second screenshot.

image
image794×732 24.8 KB

image
image1156×322 10.5 KB

2

Maybe this could point you how to do it :slight_smile:. Slight padding between datepickers you can do using css (btw I think there is probably several ways of doing what you want)

const Row = props => <div style={{ display: 'flex' }} {...props} />;
const Col = props => <div style={{ flex: props.flex }} {...props} />;
const DatePickersRow = props => <Row>
  <Col flex='50%'><DatePicker /></Col>
  <Col flex='50%'><DatePicker /></Col>
</Row>;

08
081680×124 4.39 KB

3

Thanks for your help. But there is a problem with additional div between the Field component and Form. this.formRef.getFieldByName(“field_name”) doesn’t work anymore. I use this.formRef.getFieldByName(“field_name”) method to get form values after form submission.
I have also tried to add flex related styles to DatePicker using style attribute and

styled(DatePicker)`
.....
`

but neither of them works.

4

to try to help you I would need some code from you. If you dont want to use div for spacing, maybe you could consider Grid and GridColumn https://atlaskit.atlassian.com/packages/core/page.

5

Here is a sample. If I put any element grid or div between Form element and Field element. getFieldByName method of Form doesn’t work. You can try this by butting div in the following example.

6

We’re making some improvements to our Form package at the moment (due out in a few weeks) and it’ll make doing this much easier. In the meantime, you can just add a wrapper around the components and use a descendant child selector to force them to flex: 1 0 auto. By default elements shrink (which is a bit annoying).

Check out this sandbox: @atlaskit/form-00-create-repository - CodeSandbox

7

Thanks for the solution @scurtis
I have a feedback for you. Have you checked react final form? I think you most probably did but I just wanted to share it just in case you missed it. Just as you did with Atlaskit Select component your Form component may also be a wrapper around a proven form solution. Final Form is a replacement for well known Redux Form from the same author, it doesn’t depend on redux, react or any other framework and it has separate react package and it is well documented. Since it is a replacement of previously largely used Redux Form library it covers all use cases very well. I was able to use Atlaskit components such as FieldText, DatePicker, Select with it very very easily. You can also check their introduction video on youtube.