I'm having a rather stubborn DatePicker that I can't seem to get to behave.
I'm using react-datepicker's DatePicker component.
I have a table, where each row has a DatePicker. Opening the calendar view of the date picker seems to not clear the edge of the table:
I have tried setting style={{zIndex: "9999 !important"}} on the table to no avail.
This appears to be the only solution anyone ever recommends.
The bit of code using the DatePicker component looks like this:
<Row>
<Col>
<DatePicker
onChange={onChangeCallback(user.id)}
autoComplete="off"
shouldCloseOnSelect={false}
dateFormat="dd-MM-yyyy"
selected={date}
placeholderText="Vælg Dato..."
clearButtonTitle="Ryd"
isClearable
/>
</Col>
<Col>
<Calendar
color="#ff7e01"
className="align-middle"
size={18}
/>
</Col>
</Row>
with Row and Col imported from reactstrap.
Interestingly, the DatePicker acts correctly when not using Row and Col, so something in there must be causing this interference.
Any clues?
I know you've already tried the position: fixed option, but as ccallendar alludes to, the library #popperjs/core used by datepicker-react has changed since then, more specifically:
"7. Change positionFixed
In Popper 2, this is now the strategy option:
createPopper(reference, popper, {
strategy: 'fixed',
});
"
-- https://popper.js.org/docs/v2/migration-guide/#7-change-positionfixed
Applying that to your question, then this should work:
<Row>
<Col>
<DatePicker
onChange={onChangeCallback(user.id)}
autoComplete="off"
shouldCloseOnSelect={false}
dateFormat="dd-MM-yyyy"
selected={date}
placeholderText="Vælg Dato..."
clearButtonTitle="Ryd"
isClearable
popperProps={{ strategy: "fixed" }}
/>
</Col>
<Col>
<Calendar
color="#ff7e01"
className="align-middle"
size={18}
/>
</Col>
</Row>
Related
Is there an AntD component that has a similar alignment as Form but only displays text? So I'd like to display data from a form, use the alignment of label and related text similar to the proposed Form alignment here: https://4x.ant.design/docs/spec/alignment (My purpose is just to display the data, I'm not using any form here)
Of course it is always possible to build such a feature on my own: I'd create a 2-column layout with right aligned labels in the first and the data itself in the second:
<Row>
<Col span={18} push={6}>
Label 1:
</Col>
<Col span={6} pull={18}>
Text 1
</Col>
</Row>
<Row>
<Col span={18} push={6}>
Label 2:
</Col>
<Col span={6} pull={18}>
Text 2
</Col>
</Row>
But before I solve this that way, I'd ask if there is any component similar to the form-layout I missed in a AntD that fulfills exactly this need.
You can check the following example using <Form> component. It will have similar alignment like how you want (like a form).
App.tsx
import React from "react";
import "./index.css";
import { Form } from "antd";
const App: React.FC = () => {
return (
<Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
<Form.Item label="Username">johnsmit123</Form.Item>
<Form.Item label="Name">John smith</Form.Item>
<Form.Item label="Age">30</Form.Item>
<Form.Item label="Address 1">
Suzy Queue 4455 Landing Lange, APT 4 Louisville, KY 40018-1234
</Form.Item>
<Form.Item label="Address 2">
ATTN: Dennis Menees, CEO Global Co. 90210 Broadway Blvd. Nashville, TN
37011-5678
</Form.Item>
</Form>
);
};
export default App;
you can replace the hardcoded values with dynamic values if needed
<Form.Item label="Username">{value.username}</Form.Item>
Output:
I'm trying to use the Bootstrap datepicker function for react. I implemented the solution from the following thread: React DatePicker Bootstrap up to date.
The import looks like:
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'
And my code currently looks something like:
return(
<Form>
<Row>
<Col xl={5} lg={5}>
<Form.Group as={Row} controlId="fcField">
<Form.Label column xl={3} lg={3} className="mr-1">Form Label:</Form.Label>
<Col xl={9} lg={9}>
<Form.Control
size="sm"
type="date"
readOnly={!editFlag}
name="shipdate"
value={convertDate(selectedBuild.shipdate ? selectedBuild.shipdate : '', '-')}
onChange={onChangeHandler}
onBlur={dateBlurHandler}
/>
</Col>
</Form.Group>
</Col>
</Row>
</Form>
)
But the "date" type only renders the browser default, seen in this picture.
From my understanding, it should look like what is in the bootstrap document:
There are many aspects of the bootstrap datepicker that I would like to use, and they are not taken as arguments into my Form.control.
From the previous forum post, it looked like all I had to do was set the form.control type to "date". But apparently that is not happening.
What can I do to access the bootstrap datepicker?
I would try using react-bootstrap-date-picker as it's the accepted answer on the thread you linked. https://www.npmjs.com/package/react-bootstrap-date-picker
I created a form using ant design form component and now I want to separate one row and add two input fields side by side.
here is the code:
<Row>
<Col flex={'98px'}></Col>
<Col span={9}>
<Form.Item
label="Individual Stop Loss"
>
<Input title={formData.planNetworkName} />
</Form.Item>
</Col>
<Col span={9}>
<Form.Item
label="Individual Stop Loss"
>
<Input title={formData.planNetworkName} />
</Form.Item>
</Col>
</Row>
created an empty column to align using flex=98px and now I want to separate the rest of the width 50/50 to fit the two input fields.
Here is what I got:
this is what I want:
TIA
I noticed that when I use more Rows and Cols to create a suitable UI for form validations, my validation does throw this error. The validation only captures data when it is within a Col tag .
It throws this error in my prettier terminal "JSX expressions must have one parent element". i.e the it must be within the Col tag
See the codes below for clarifications
<Row>
<Col sm={4}>
{loading ? (
<p>Loading...</p>
) : (
<ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}> {!isNew ?
<ValidatedField name="id" required readOnly id="terminal-id" label="ID" validate={{ required: true }} /> : null}
</Col>
<Col sm={4}>
<ValidatedField
label="Stock Level Date"
id="terminal-stockLevelDate"
name="stockLevelDate"
data-cy="stockLevelDate"
type="date"
/>
<ValidatedField
label="Tank Threat Level"
id="terminal-tankThreatLevel"
name="tankThreatLevel"
data-cy="tankThreatLevel"
type="number"
/></Col>
</Row>
<Row>
<Col sm>
<ValidatedField
label="Low Pumpable Color"
id="terminal-lowPumpableColor"
name="lowPumpableColor"
data-cy="lowPumpableColor"
type="text"
/></ValidatedForm>
)}
</Col></Row>
Can anyone enlighten me on another way around this.. And besides the Validation form indeed has a closing tag but it is not within the same Col
There is no closing tag for the ValidatedForm in this line
<Col sm={4}>
<ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}/>
</Col>
The tree structure here is also messed up, you might want to fix that
<Row>
<Col sm>
<ValidatedField
label="Low Pumpable Color"
id="terminal-lowPumpableColor"
name="lowPumpableColor"
data-cy="lowPumpableColor"
type="text"
/>
</Col></Row></ValidatedForm>
i have to create an autocomplete react component. Initially there must be 5 autocomplete fields. I set a state as an array of 5 input elements like
this.state {activities : ['','','','','']}
i apply a map function over these to display 5 autocomplete boxes.
I have a list of values to be listed as options of autocomplete.
Row>
{this.state.activities.map((newrow,index)=>{
return (
<Col md={12}>
<Row className="form-row">
<Col md={11} sm={10} xs={9}>
<div className="form-input">
<AutoComplete
className="autosearch"
dataSource={options}
onSelect={this.onSelect.bind(this, index)}
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />
</div>
</Col>
<Col md={1} sm={2} xs={3}>
<Button className="delete-row" onClick={this.deleterow.bind(this,index)}><i className="fa fa-trash"></i></Button>
</Col>
</Row>
</Col>)
})
}
</Row>
now i have to create an autocomplete which also has the option to allow me add an option if it is not present in the list .
please help me out. i am new to react and thanks in advance.
This is the website i referred for the autocomplete boxenter link description here
and i referred the basic example code of it