Date picker

Design guidelines

Date pickers allow users to enter a date either through text input, or by choosing a date from the calendar.

Code

Date range picker

Framework

HTML

React

Angular

Single date

Toggle dark mode

<certara-datepicker mode="date"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="date" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="date"></certara-datepicker>

Disabled

Toggle dark mode

<certara-datepicker mode="date" value="2026-07" disabled="true"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="date" value="2026-07" disabled={true} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="date" value="2026-07" disabled="true"></certara-datepicker>

Month

Toggle dark mode

<certara-datepicker mode="month" value="2026-07"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="month" value="2026-07" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="month" value="2026-07"></certara-datepicker>

Time

Toggle dark mode

<certara-datepicker mode="time" value="10:30"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="time" value="10:30" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="time" value="10:30"></certara-datepicker>

Date/time

Toggle dark mode

<certara-datepicker mode="datetime" value="2026-07-15T10:30"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="datetime" value="2026-07-15T10:30" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="datetime" value="2026-07-15T10:30"></certara-datepicker>

Range

Toggle dark mode

<certara-datepicker mode="range" value="2026-07-01,2026-07-04"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="range" value="2026-07-01,2026-07-04" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="range" value="2026-07-01,2026-07-04"></certara-datepicker>

With validation

This example shows an error for the end date before the start date

Toggle dark mode

<certara-form-group label="Date range" layout="stacked">
  <certara-datepicker mode="range" value="2026-07-15,2026-07-01"></certara-datepicker>
</certara-form-group>

import { CertaraDatepicker, CertaraFormGroup } from '@certara/certara-ui-react';

<CertaraFormGroup label="Date range" layout="stacked">
  <CertaraDatepicker mode="range" value="2026-07-15,2026-07-01" />
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Date range" layout="stacked">
  <certara-datepicker mode="range" value="2026-07-15,2026-07-01"></certara-datepicker>
</certara-form-group>

Link variant

Single date

Toggle dark mode

<certara-datepicker mode="date" variant="link"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="date" variant="link" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="date" variant="link"></certara-datepicker>

Disabled

Toggle dark mode

<certara-datepicker mode="date" value="2026-07" disabled="true" variant="link"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="date" value="2026-07" disabled={true} variant="link" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="date" value="2026-07" disabled="true" variant="link"></certara-datepicker>

Month

Toggle dark mode

<certara-datepicker mode="month" value="2026-07" variant="link"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="month" value="2026-07" variant="link" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="month" value="2026-07" variant="link"></certara-datepicker>

Time

Toggle dark mode

<certara-datepicker mode="time" value="10:30" variant="link"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="time" value="10:30" variant="link" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="time" value="10:30" variant="link"></certara-datepicker>

Date/time

Toggle dark mode

<certara-datepicker mode="datetime" value="2026-07-15T10:30" variant="link"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="datetime" value="2026-07-15T10:30" variant="link" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="datetime" value="2026-07-15T10:30" variant="link"></certara-datepicker>

Range

Toggle dark mode

<certara-datepicker mode="range" value="2026-07-01,2026-07-04" variant="link"></certara-datepicker>

import { CertaraDatepicker } from '@certara/certara-ui-react';

<CertaraDatepicker mode="range" value="2026-07-01,2026-07-04" variant="link" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-datepicker mode="range" value="2026-07-01,2026-07-04" variant="link"></certara-datepicker>

With validation

This example shows an error for the end date before the start date

Toggle dark mode

<certara-form-group label="Date range" layout="stacked">
  <certara-datepicker mode="range" value="2026-07-15,2026-07-01" variant="link">
  </certara-datepicker>
</certara-form-group>

import { CertaraDatepicker, CertaraFormGroup } from '@certara/certara-ui-react';

<CertaraFormGroup label="Date range" layout="stacked">
  <CertaraDatepicker mode="range" value="2026-07-15,2026-07-01" variant="link">
  </CertaraDatepicker>
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Date range" layout="stacked">
  <certara-datepicker mode="range" value="2026-07-15,2026-07-01" variant="link">
  </certara-datepicker>
</certara-form-group>

Simple datepicker

Framework

HTML

React

Angular

Default

Toggle dark mode

<certara-input type="date" />

import { CertaraInput } from '@certara/certara-ui-react';

<CertaraInput type="date" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input type="date"></certara-input>

With value

Toggle dark mode

<certara-input type="date" value="2024-01-15" />

import { CertaraInput } from '@certara/certara-ui-react';

<CertaraInput type="date" value="2024-01-15" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input type="date" value="2024-01-15"></certara-input>

Disabled

Toggle dark mode

<certara-input type="date" disabled />

import { CertaraInput } from '@certara/certara-ui-react';

<CertaraInput type="date" disabled />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input type="date" disabled></certara-input>

With label

Toggle dark mode

<certara-form-group label="Select date" layout="stacked">
  <certara-input type="date" />
</certara-form-group>

import { CertaraFormGroup, CertaraInput } from '@certara/certara-ui-react';

<CertaraFormGroup label="Select date" layout="stacked">
  <CertaraInput type="date" />
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Select date" layout="stacked">
  <certara-input type="date"></certara-input>
</certara-form-group>

certara-datepicker

Date and time picker for selecting a single date, a range, or a date with a time of day.

Properties

ariaLabel

Attribute	aria-label
Type	string
Default	undefined
Required	false
Description	Accessible label when not inside a form-group

config

Attribute	undefined
Type	DatepickerConfig
Default	`{
selectMode: ‘range’,
selected: [],
disabled: [],
selectScopeSize: 0,
weekHeader: ‘per-month’,
// No viewRange by default: months are generated on demand, so navigation is
// unbounded unless min / max (or an explicit viewRange clamp) says otherwise.
i18n: {

months: DEFAULT_MONTHS,
weekDays: DEFAULT_WEEK_DAYS,
// Locale-derived so the polyfill segments match what a native date input
// would render. Only the polyfill draws this separator, so platforms on the
// native path are unaffected. An explicit config.i18n.dateSeparator still wins.
dateSeparator: getLocaleDateFormat().separator,
timeSeparator: ':',

}, monthsToShow: 1, showNavigation: true, }| | __Required__ |false` | | Description | Datepicker configuration object (calendar layout, presets, i18n, etc.). |

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	Disable the control

endName

Attribute	end-name
Type	string
Default	undefined
Required	false
Description	Hidden field name for range end (defaults to name.end)

max

Attribute	max
Type	string
Default	undefined
Required	false
Description	Maximum allowed value (ISO date or datetime string)

min

Attribute	min
Type	string
Default	undefined
Required	false
Description	Minimum allowed value (ISO date or datetime string)

mode

Attribute	mode
Type	"date" | "datetime" | "month" | "range" | "time"
Default	'range'
Required	false
Description	Control shape: date, month, datetime, or range

name

Attribute	name
Type	string
Default	undefined
Required	false
Description	Form field name (hidden ISO field; range uses name.start / name.end)

placement

Attribute	placement
Type	"bottom-start" | "top-start"
Default	'bottom-start'
Required	false
Description	Preferred vertical placement for the popover panel

position

Attribute	position
Type	"absolute" | "fixed"
Default	'absolute'
Required	false
Description	CSS positioning strategy for the popover panel

readonly

Attribute	readonly
Type	boolean
Default	false
Required	false
Description	Read-only segments (indicator still opens popover)

required

Attribute	required
Type	boolean
Default	false
Required	false
Description	Whether the field is required

startName

Attribute	start-name
Type	string
Default	undefined
Required	false
Description	Hidden field name for range start (defaults to name.start)

step

Attribute	step
Type	number
Default	undefined
Required	false
Description	Time step in seconds (900 is 15 minutes). Applies to time mode and to the datetime popover’s time picker.

value

Attribute	value
Type	string
Default	''
Required	false
Description	Current value (ISO). Reflected as the value attribute. date: YYYY-MM-DD

valueFormat

Attribute	value-format
Type	"display" | "iso"
Default	'display'
Required	false
Description	Format for the trigger / form value

variant

Attribute	variant
Type	"default" | "link"
Default	'default'
Required	false
Description	Visual variant of the control

Events

Name	Description	Bubbles
certaraChange	emits when the composed ISO value changes (certara-ui convention)	true
certaraDatepickerDateSelect	Emits when a date is selected. Use it to react to date selected	true
certaraDatepickerDeselect	Emits when a date is deselected. Use it to react to date deselected	true
certaraDatepickerHighlight	emits when a date or more is highlighted as potential select candidate	true
certaraDatepickerHighlightClear	emits when date highlight is cleared after dates deselect	true
certaraDatepickerPopoverToggle	emits when the popover panel opens or closes	true
certaraDatepickerRangeSelect	emits when a complete date range is selected use it to react to a complete date range selected	true
certaraFormControlError	emits consolidated validation error for certara-form-group	true

Methods

There are no public methods available for this component

Slots

There are no slots available for this component

certara-input[type=“date”]

Single-line text input. Pair with <certara-form-group> for labelling.

Properties

accept

Attribute	accept
Type	string
Default	undefined
Required	false
Description	Accepted file types for file inputs (e.g., “.pdf,.doc”).

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	Prevents user interaction.

max

Attribute	max
Type	number | string
Default	undefined
Required	false
Description	Maximum value for number/date inputs.

maxlength

Attribute	maxlength
Type	number
Default	undefined
Required	false
Description	Maximum number of characters allowed.

min

Attribute	min
Type	number | string
Default	undefined
Required	false
Description	Minimum value for number/date inputs.

minlength

Attribute	minlength
Type	number
Default	undefined
Required	false
Description	Minimum number of characters required.

name

Attribute	name
Type	string
Default	this.inputId
Required	false
Description	Form control name, used for form submission and validation events.

pattern

Attribute	pattern
Type	string
Default	undefined
Required	false
Description	Regex pattern the value must match.

placeholder

Attribute	placeholder
Type	string
Default	undefined
Required	false
Description	Placeholder text shown when empty.

readonly

Attribute	readonly
Type	boolean
Default	false
Required	false
Description	Prevents editing while allowing selection and copy.

required

Attribute	required
Type	boolean
Default	false
Required	false
Description	Marks the field as required for form validation.

size

Attribute	size
Type	"md" | "sm"
Default	'md'
Required	false
Description	Visual size variant of the input.

step

Attribute	step
Type	number | string
Default	undefined
Required	false
Description	Step increment for number inputs.

type

Attribute	type
Type	"date" | "datetime-local" | "email" | "file" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url"
Default	'text'
Required	false
Description	Input type, affects keyboard on mobile and validation.

value

Attribute	value
Type	string
Default	undefined
Required	false
Description	Current value of the input.

Events

Name	Description	Bubbles
certaraBlur	Emitted when the input loses focus.	true
certaraChange	Emitted when value changes from the previous value.	true
certaraFocus	Emitted when the input gains focus.	true
certaraFormControlError	Emitted when validation state changes. Payload is the error message or empty string when valid.	true
certaraInput	Emitted on every keystroke.	true

Methods

Name	Signature	Description
setBlur	() => Promise<void>	Programmatically blurs the input.
setError	(error: string) => Promise<void>	Sets a custom error message. This allows consumers to call input.setError('my error message') instead of input.setAttribute('error', 'my error message').
setFocus	() => Promise<void>	Programmatically focuses the input.

Slots

Name	Description
append	Content placed after the input (e.g., buttons, icons).
prepend	Content placed before the input (e.g., labels, icons).

Date Pickers allow users to enter a date either through text input, or by choosing a date from the calendar.

Design guidelines

Native HTML date picker

Default

Used when selecting a single date is needed. This implementation uses the text field component property type “date”.

Label

Toggle dark mode

Date range picker

Default

Used when selecting a preset time period and/or date range is needed.

Toggle dark mode

In practice

Date pickers can display past, present, or future dates. They should use sensible defaults based on their context.

Date Range

• The start and end dates may be manually entered or edited in the text field.
• May or may not include a dropdown with preset time periods.
  • If a preset time period is selected, the system displays the corresponding dates in the text input field.
• The expandable calendar menu includes day, month, and year selections for start and end dates and highlights all dates between them.
• The calendar closes after an end date is selected.

Accessibility

• Date pickers are keyboard operable.
• Always give users the option to enter the date using the text field.
• For more information, see our accessibility guidelines.

Design resources

View component in Figma