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
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 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>
I am having an issue with Gatsby bootstrap or react-bootstrap (not sure yet, most likely it is bootstrap). Everything looks great when I build and serve gatsby website, it has all bootstrap classes and nice grid ( 2 columns, one is md="8" another is md="4"). But once I reload the page and when I inspect the code in the Chrome browser, bootstrap classes disappear.
Code in Gatsby page (added className just to make sure that it is not coming after reaload):
{window.innerWidth > 992 ? (
<Col md="8">
<NameAndHealine />
<ListingText />
</Col>
<Col md="4">
<PricingSidebBar />
</Col>
) : (
<Col xs="12">
<NameAndHealine />
</Col>
<Col xs="12">
<PricingSidebBar />
</Col>
<Col xs="12" className="mt-5">
<ListingText />
</Col>
)
Code example before page reload:
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
Code example after page reload:
<div class="col-12">...</div>
<div class="col-12">...</div>
Steps what I tried to solve the problem:
Import bootstrap.css and bootstrap.js inside gatsby-browser.js
Add extra className with bootstrap classes to make sure it is not coming after page reload.
EDIT:
I found the issue, it is with window.innerWidth as I was ordering components depending on it. I changed it to multiple rows and set display classes for different screens. After page reload Gatsby doesn't take classes when it is inside if (window.innerWidth > 992) (why?). If someone knows the answer please let me know, thanks.
EDIT 2
Added extra code above
I can't get bootstrap classes to work with react-bootstrap
I tried using bootstrap classes specifically flex properties in react-bootstrap but it doesn't seem to work. But on the docs it shows an example of them using it "https://react-bootstrap.netlify.com/layout/grid/", also the docs seem pretty vague so I went to bootstrap's docs but no avail there either.
I noticed when I change how many Col's (like this col md={4}) I want a specific col element to take up the positioning of this button changes even though it supposed to be in the center why is that ? Here is a example of my code
import React from 'react';
import'./Welcome.css';
import { Button, Container, Col, Row } from 'react-bootstrap';
class Welcome extends React.Component {
render() {
return(
<div className="welcome">
<Container>
<Row className="justify-content-center">
<Col>
<Button variant="primary" size="lg">Large button</Button>
</Col>
</Row>
</Container>
</div>
);
}
}
export default Welcome;
I'm fairly new to react as well, more so to react-bootstrap but I am very familiar with bootstrap, this has me ready to just use CSS grid or flex and not use bootstrap's grid lol. So if anyone can help me out that would be great and much appreciated.
Try This.
<Container>
<Row>
<Col md={{ order: 'last' }}>First, but last</Col>
<Col md>Second, but unordered</Col>
<Col md={{ order: 'first' }}>Third, but first</Col>
</Row>
</Container>
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