Version: 2.0.0

DatePicker

Date Picker is an input field for dates and times. Clicking it opens up a calendar where the user can select date. If enabled, a time picker can also be opened within the same widget. TritonDatePicker supports multiple time and date formats, and has several ease-of-use functionalities.

Basic Usage

<triton-date-picker></triton-date-picker>

<TritonDatePicker/>

<html> 
  <head> 
    <script type="module"> 
      import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js'; 
      defineCustomElements(); 
    </script> 
  </head> 
  <body> 
    <triton-date-picker></triton-date-picker>
  </body> 
</html>

Variants

The TritonDatePicker's default mode allows users to pick a date, as shown in the Basic Example above.

Date & Time

By setting the mode property to datetime, picking both date and time is enabled. The user will be able to click a button to switch between the two.

Note: For time to be enabled, a format that includes time will have to be set, using the format property. See example below.

<triton-date-picker mode="datetime" label="Date and Time" format="DD.MM.YYYY - HH:mm" ></triton-date-picker>

Range

This feature is pending implementation.

Behavior

Custom Formats

Datepicker accept all valid date formats from MomentJS or dayJS. Simple apply the prop format with the format of your choice (see examples).

<triton-date-picker label="YYYY-MM-DD" format="YYYY-MM-DD"></triton-date-picker>

<triton-date-picker label="MM/DD/YY" format="MM/DD/YY"></triton-date-picker>

<triton-date-picker label="D MMM. YYYY" format="D MMM. YYYY"></triton-date-picker>

Settings

Min and Max

TritonDatePicker supports setting either a min or a max date, or both.

<triton-date-picker
  min-date="01.01.2022"
  max-date="01.01.2023"
></triton-date-picker>

Set Default Date

Sometimes it is useful to start the default date in the DatePicker on a given day, instead of today's date. To do this, pass a date to the internal-date property

<triton-date-picker
  label="Default date is on 06.06.2025"
  internal-date="06.06.2025"
></triton-date-picker>

Playground

API

Properties

Property	Description	Type	Default
`clear-input`	^{If true, the value of the component can be set to null}	`boolean`	`false`
`disabled`	^{If true, the component will look disabled and not be interactable}	`boolean`	`false`
`error`	^{If true the input element will be displayed as invalid}	`boolean`	`false`
`error-text`	^{Error text displayed at the bottom of the field, if error is true}	`string`	-
`format`	^{Set the datepicker format allowed DayJs formathttpsday.js.orgdocsenparsestring-format. If this value exist, defaultDate will then accept data is this format.}	`string`	-
`helper-text`	^{A brief text for the user, at the bottom of the field}	`string`	-
`hour-step`	^{set hour step, it will only work if the mode is datetime}	`number`	-
`internal-date`	^{If there is no input value, this will be the default internal selected date. If this is empty, today will be the internal date}	`Date` `Dayjs` `number` `string`	-
`label`	^{The label displayed for the field}	`string`	-
`max-date`	^{Set the maximum date which the user can input}	`Date` `Dayjs` `number` `string`	-
`min-date`	^{Set the min date which the user can input}	`Date` `Dayjs` `number` `string`	-
`minute-step`	^{set minuttes step, it will only work if the mode is datetime}	`number`	-
`mode`	^{Set the mode for the picker}	`date` `datetime` `range`	`'date'`
`placeholder`	^{Instructional text that shows before the input has a value}	`string`	-
`required`	^{If true, the user must fill in a value before submitting a form}	`boolean`	`false`
`second-step`	^{set secounds step, it will only work if the mode is datetime}	`number`	-
`size`	^{Set the size of the component}	`base` `body` `large` `medium` `small` `tiny` `xlarge` `xxlarge` `xxxlarge`	`defaultOptions.baseSize`
`value`	^{The value of the date picker}	`any`	-

Events

Name	Type	Description	Extra
atBlur	`CustomEvent<void>`	Emitted when the input loses focus.	-
atChange	`CustomEvent<InputValue>`	Emitted when the value has changed.	-
atFocus	`CustomEvent<void>`	Emitted when the input has focus.	-
atInput	`CustomEvent<KeyboardEvent>`	Emitted when a keyboard input occurred	-

DatePicker

Basic Usage​

Variants​

Date & Time​

Range​

Behavior​

Custom Formats​

Settings​

Min and Max​

Set Default Date​

Playground​

API​

Properties​

Events​