Skip to content
Home

Field.Expiry#

Info
Demos
Properties
Events

Demos#

The locale is what determines the components placeholder format .e.g. mm/åå in Norwegian, mm/yy in English.

English (US) is not included in Eufemia by default. You can include it like:

import enUS from '@dnb/eufemia/shared/locales/en-US'
<EufemiaProvider locale={enUS} ...>
	App
</EufemiaProvider>

Demos#

Empty#

mmåå
<Field.Expiry onChange={(expiry) => console.log('onChange', expiry)} />

Label#

0835
<Field.Expiry
  value="0835"
  label="Label text"
  onChange={(expiry) => console.log('onChange', expiry)}
/>

With a horizontal layout#

0835
<Field.Expiry
  value="0835"
  layout="horizontal"
  layoutOptions={{
    width: 'medium', // can be a rem value
  }}
/>

With help#

mmåå
<Field.Expiry
  label="Label text"
  help={{
    title: 'Help is available',
    content:
      'Kindness and helping others will return to you when you least expect it, and maybe when you need it.',
  }}
  onChange={(expiry) => console.log('onChange', expiry)}
/>

Disabled#

0826
<Field.Expiry
  value="0826"
  label="Label text"
  onChange={(expiry) => console.log('onChange', expiry)}
  disabled
/>

Error#

This is what is wrong...
0326
<Field.Expiry
  value="0326"
  label="Label text"
  onChange={(expiry) => console.log('onChange', expiry)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required#

mmåå
<Field.Expiry
  label="Label text"
  onChange={(expiry) => console.log('onChange', expiry)}
  required
  validateInitially
/>

Transform in and out#

This example demonstrates how to transform data when it enters and leaves the form field.

You can use the transformIn property to modify the incoming data before it is displayed in the field, and the transformOut property to adjust the data before it is submitted or processed. When transformIn one can either return a simple value "0835" or an object { month:"08", year:"35" }.

0835
{
  "myField": {
    "year": "35",
    "month": "08"
  }
} 
const transformOut = (internal, additionalArgs) => {
  const { year, month } = additionalArgs
  return {
    year,
    month,
  }
}
const transformIn = (external) => {
  if (external) {
    const { year, month } = external
    return {
      year,
      month,
    }
  }
}
render(
  <Form.Handler
    defaultData={{
      myField: {
        year: '35',
        month: '08',
      },
    }}
  >
    <Form.Card>
      <Field.Expiry
        path="/myField"
        transformOut={transformOut}
        transformIn={transformIn}
        label="Transform in and out"
      />
      <Tools.Log />
    </Form.Card>
  </Form.Handler>
)

Extend validation with custom validation function#

You can extend the existing validation (expiryValidator) with your own validation function.

1225
const myExpiryValidator = (value: string) => {
  if (value?.startsWith('12')) {
    return new Error('Expiry month cannot be december')
  }
}

// Keep the built-in validator while banning December.
const myOnBlurValidator: ExpiryValidator = (
  value: string,
  { validators }
) => {
  const { expiryValidator } = validators
  return [myExpiryValidator, expiryValidator]
}
render(<Field.Expiry value="1225" onBlurValidator={myOnBlurValidator} />)
Suggest an edit