Date Picker

Show design guidelines

Code

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

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

Framework HTML React Angular

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-input

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).