I’m pretty new to front end development and am working with React currently. I’m trying to use a date input field which I currently have working. I want to format the box, the width etc of the input field.
I’m using React bootstrap formcontol with a type date. How would I go about formatting the input of the date field? I’m sure this question has been asked before, but with my little knowledge of how this is don’t I don’t know the correct question to look for. Are you formatting the FormControl or the input field? How do you distinguish the field. Etc
function renderForm() {
return (
<form onSubmit={handleSubmit}>
<FormGroup controlId="email" bsSize="large">
<ControlLabel>Email</ControlLabel>
<FormControl
autoFocus
type="email"
placeholder="Email Address"
value={fields.email}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="date" bsSize="large">
<ControlLabel>Birthday</ControlLabel>
<FormControl
type="date"
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<ControlLabel>Password</ControlLabel>
<FormControl
type="password"
placeholder="Password"
value={fields.password}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="confirmPassword" bsSize="large">
<ControlLabel>Confirm Password</ControlLabel>
<FormControl
type="password"
placeholder="Confirm Password"
onChange={handleFieldChange}
value={fields.confirmPassword}
/>
</FormGroup>
<LoaderButton
block
type="submit"
bsSize="large"
isLoading={isLoading}
disabled={!validateForm()}
>
Signup
</LoaderButton>
</form>
);
}
#radulle
I tried this which did not work. I’m not sure if this is what you meant or not
<FormGroup controlId="date" bsSize="large">
<ControlLabel>Birthday</ControlLabel>
<FormControl
type="date"
style={{width:'100%'}}
/>
</FormGroup>
Related
Hi I'm building a form with Formik on NextJS and I'm putting a switch to give the user the possibility to use contact details for invoice.
I have different fields for both contact details and invoice details but I want to add a switch that will copy the contact infos into the invoice details form.
that's what I'm doing now :
<Formik
initialValues={{
passengers: passengers,
contact: contactDetails,
invoice: useContactDetails ? {...invoiceDetails, ...contactDetails} : invoiceDetails
}}
onSubmit={
(values, actions) => {
console.log(values)
}
}
>
{({errors, touched, isSubmitting}: any) => (
<Form>
<PassengerItem>
<PassengerHeaderContainer>
<PassengerHeader>
{(t('flightsCheckout.main.contactDetails'))}
</PassengerHeader>
</PassengerHeaderContainer>
<FormGroup>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.firstName')}
</InputLabel>
<TextInput
type="text"
placeholder="E.G. John (Given Name)"
name={`contact.firstName`}
required
/>
</InputGroup>
<DottedLinesContainer>
<DottedLines />
</DottedLinesContainer>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.lastName')}
</InputLabel>
<TextInput
type="text"
placeholder="E.G. Smith (Last Name)"
name={`contact.lastName`}
required
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.phoneNumber')}
</InputLabel>
<TextInput
type="tel"
placeholder="E.G. +30 645 654 9850"
name={`contact.phoneNumber`}
required
/>
</InputGroup>
<DottedLinesContainer>
<DottedLines />
</DottedLinesContainer>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.emailAddress')}
</InputLabel>
<TextInput
type="email"
placeholder="E.G. john.smith#example.com"
name={`contact.emailAddress`}
required
/>
{
errors.contactEmail &&
<ErrorText>{errors.contactEmail}</ErrorText>
}
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.country')}
</InputLabel>
<TextInput name={`contact.country`} required as="select" style={{background: "none"}}>
<option style={{color: "#ADADAD"}} value="" disabled selected>E.G. United Kingdom</option>
<option value="spain">Spain</option>
<option value="morocco">Morocco</option>
<option value="romania">Romania</option>
</TextInput>
</InputGroup>
</FormGroup>
</PassengerItem>
<PassengerItem>
<PassengerHeaderContainer>
<PassengerHeader>
{(t('flightsCheckout.main.invoiceDetails'))}
</PassengerHeader>
</PassengerHeaderContainer>
<FormGroup>
<CustomSwitch
label={t('flightsCheckout.main.sameAsContact')}
state={useContactDetails}
setState={setUseContactDetails}
/>
</FormGroup>
<FormGroup>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.firstName')}
</InputLabel>
<TextInput
type="text"
placeholder="E.G. John (Given Name)"
name={`invoice.firstName`}
required
/>
</InputGroup>
<DottedLinesContainer>
<DottedLines />
</DottedLinesContainer>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.lastName')}
</InputLabel>
<TextInput
type="text"
placeholder="E.G. Smith (Last Name)"
name={`invoice.lastName`}
required
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.phoneNumber')}
</InputLabel>
<TextInput
type="tel"
placeholder="E.G. +30 645 654 9850"
name={`invoice.phoneNumber`}
required
/>
</InputGroup>
<DottedLinesContainer>
<DottedLines />
</DottedLinesContainer>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.emailAddress')}
</InputLabel>
<TextInput
type="email"
placeholder="E.G. john.smith#example.com"
name={`invoice.emailAddress`}
required
/>
{
errors.invoiceEmail &&
<ErrorText>{errors.invoiceEmail}</ErrorText>
}
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.country')}
</InputLabel>
<TextInput name={`invoice.country`} required as="select" style={{background: "none"}}>
<option style={{color: "#ADADAD"}} value="" disabled selected>E.G. United Kingdom</option>
<option value="spain">Spain</option>
<option value="morocco">Morocco</option>
<option value="romania">Romania</option>
</TextInput>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.address')}
</InputLabel>
<TextInput
type="text"
placeholder="E.G. 64 Notley Street"
name={`invoice.address`}
required
/>
</InputGroup>
<DottedLinesContainer>
<DottedLines />
</DottedLinesContainer>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.city')}
</InputLabel>
<TextInput
type="text"
placeholder="E.G. London"
name={`invoice.city`}
required
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputLabel>
{t('flightsCheckout.main.zipCode')}
</InputLabel>
<TextInput
type="text"
placeholder="E.G. 40741"
name={`invoice.zipCode`}
required
/>
</InputGroup>
</FormGroup>
</PassengerItem>
)}
</Formik>
I tried this but it's not working...
I think you want to set enableReinitialize to true on Formik in order for it to refresh with the new values. The default is set to false, and since you are changing the initialValues, you need to reinitialize it
https://formik.org/docs/api/formik#enablereinitialize-boolean
<Form>
<Row>
<Col></Col>
<Col>
<h4>Demo Login</h4>
<Form.Group controlId="formGroupEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formGroupPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant="primary" type="submit">
Login In
</Button>
</Col>
<Col></Col>
</Row>
</Form>
How can I center this row on the screen?. The current items or columns are centered but I can't seem to find a way to center the row itself. I tried adding an inline style of 'align-items: enter' but that doesn't seem to work. Not even sure if I centered the columns correctly as well.
Try adding: className="align-items-end" to the row component and see if that works.
I am creating a form in the front end In that I use texInput, radio button, Select component. All the texInput, radio button component are in one size as per alloted but the select component size is very small please help me to solve the select component in the same size as per textinput component
put your form in a container and override the css of the select component :
css----------------
.yourClassName{
width: 100%!important;
}
html-----------------------
<Container>
<Col md={{ span: 6, offset: 3 }}>
<Form onSubmit={this.onSubmitForm}>
<Form.Row>
<Col md={{ span: 3 }}>
<Form.Group as={Row} controlId="Email">
<Form.Label>Email Address</Form.Label>
<Form.Control type="email" placeholder="Enter Email" name="Email"
value={this.state.Email} onChange={this.handleChange} />
</Form.Group>
</Col>
<Col md={{ span: 3}}>
<Form.Group as={Row} controlId="Name">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Enter Name" name="Name"
value={this.state.Name} onChange={this.handleChange} />
</Form.Group>
</Col>
</Form.Row>
<Form>
</Col>
</Container>
I am having below form(inside modal) created using semantic-ui-react.
<Modal open={editBasicModal} size="small">
<Modal.Header>Your basic details</Modal.Header>
<Modal.Content scrolling>
<Form loading={isSubmitting}>
<Form.Group inline widths="equal">
<Form.Input
required
label="First Name"
fluid
type="text"
name="firstName"
value={values.firstName}
onChange={handleChange}
error={errors.firstName !== undefined}
/>
<Form.Input
required
label="Last Name"
fluid
type="text"
name="lastName"
value={values.lastName}
onChange={handleChange}
error={errors.lastName !== undefined}
/>
</Form.Group>
<Form.TextArea
label="Bio"
type="text"
name="bio"
value={values.bio}
onChange={handleChange}
rows={3}
error={errors.bio !== undefined}
/>
<Form.Select
label="Country"
name="location.country"
placeholder="Country"
value={values.location.country}
onChange={(e, { value }) => {
setFieldValue("location.country", value);
}}
options={this.state.allCountries}
/>
</Form>
</Modal.Content>
<Modal.Actions open={true}>
<Button type="submit" onClick={handleSubmit} >
Update
</Button>
</Modal.Actions>
</Modal>
The above code is from a component which uses Formik + yup.
this.state.allCountries is an array of 200+ records. Now this is making my form slow, the typing inside textarea and input are very slow.
As per my findings the large dataset in the Form.Select is causing the issue, because if i replace the options={this.state.allCountries} to options={[ { key: 1, value: "india", text: "india"} ]}, everything starts working fine. Or if I delete the Form.Selectthen also form works fine.
Few questions?
Is it a known issue?
what are the possible solutions?
I figured out that this is a problem with Form.Select. I changed it with select and everything worked smoothly then. Here is the updated code for select:
<Form.Field >
<label htmlFor="location.country">Country</label>
<select
name="location.country"
id="location.country"
value={values.location.country }
onChange={event => {
setFieldValue("location.country", event.target.value);
}}
>
<option key={0} value={undefined}>
-select-
</option>
{this.state.allCountries}
</select>
</Form.Field>
This renders similar(somewhat) select element with no slowness issue.
Hope it would help someone.
I am using react-bootstrap to create a form. The title, datePicker, and dropdown do appear how I want them to, on the same row with space in between them, but when I try to insert a text-area underneath those fields, it renders next to the dropdown menu instead. What is the problem?
<Form>
<Form.Row>
<Form.Group as={Col}>
<Form.Control name="title"
type="title"
placeholder="Enter title"
value={this.state.title}
onChange={e => this.change(e)}
/>
</Form.Group>
<Form.Group as={Col}>
<DatePicker
selected={this.state.startDate}
onChange={e => this.change(e)}
/>
</Form.Group>
<Form.Group as={Col}>
<select className="custom-select" name="course" value={this.state.course} onChange={e => this.change(e)}>
<option value="Math234">Math234</option>
<option value="Art">Art</option>
</select>
</Form.Group>
</Form.Row>
<Form.Group>
<Form.Label>Enter notes</Form.Label>
<Form.Control
name = "notes"
as="textarea"
rows="3"
value={this.state.notes}
onChange={e => this.change(e)}
/>
</Form.Group>
</Form>
You have to define each Col's size. The bootstrap cols are rendering side by side if you do not tell them the axact size for each breakpoint, or at least one. In this case, your Form.Group will get the col and all the other column related classnames.
Try out something like this:
<Form.Row>
<Form.Group as={Col} sm={12}>
{/* your form control goes here */}
</Form.Group>
</Form.Row>
The xs, sm, md and lg breakpoint props are all available in this case, use them as you wish.