BumblebeeBumblebee

Date input

Contents

Live demoDesignCode

Live demo

Date input

e.g. 24
e.g. 02
e.g. 2030
e.g. 24
e.g. 02
e.g. 2030

Code

import { DateInput } from '@shieldpay/bumblebee/date-input';
<Form {...getFormProps(form)} spacing="basePos8">
  <DateInput
    name="date-input-1"
    label="Date (interactive) will not show validation until values entered"
    dayInputProps={{
      ...getInputProps(fields.day, { type: 'text' }),
      errors: fields.day.errors,
      label: 'Day',
      helpText: 'e.g. 24',
      placeholder: 'DD',
    }}
    monthInputProps={{
      ...getInputProps(fields.month, { type: 'text' }),
      errors: fields.month.errors,
      label: 'Month',
      helpText: 'e.g. 02',
      placeholder: 'MM',
    }}
    yearInputProps={{
      ...getInputProps(fields.year, { type: 'text' }),
      errors: fields.year.errors,
      label: 'Year',
      helpText: 'e.g. 1995',
      placeholder: 'YYYY',
    }}
  />
</Form>


// LEGACY
<DateInput
  name="dateInput"
  label="Date"
  dayInputProps={{
    name: 'day',
    value: dayValue,
    onChange: (value) => setDayValue(value),
  }}
  dayLabel="Day"
  dayPlaceholder="DD"
  monthInputProps={{
    name: 'month',
    value: monthValue,
    onChange: (value) => setMonthValue(value),
  }}
  monthLabel="Month"
  monthPlaceholder="MM"
  yearInputProps={{
    name: 'year',
    value: yearValue,
    onChange: (year) => setYearValue(values),
  }}
  yearLabel="Year"
  yearPlaceholder="YY"
  locales="en-GB
/>;