Skip to content
Home

Expiry

Info
Demos
Properties
Events

Import

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.Expiry />)

Description

Field.Expiry is a wrapper component for the input of strings, with user experience tailored for expiry dates for payment cards.

It supports the HTML autocomplete attribute, and by default set it to cc-exp-month for the month field, and to cc-exp-year for the year field.

Relevant links

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

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

Label

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

With a horizontal layout

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

With help

Code Editor
<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

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

Error

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

Validation - Required

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

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" }.

{
  "myField": {
    "year": "35",
    "month": "08"
  }
} 
Code Editor
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>,
)