Version: Next

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

By setting the mode property to range, the user can select a range of dates, from one date to another.

Note: The range setting is NOT compatible with time selection. In range picker, only a range of dates can be selected.

<triton-date-picker mode="range" label="Range"></triton-date-picker>

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`	If the error-property is true, this Error-text will be displayed at the bottom of the field	`string`	-
`format`	Set the datepicker format allowed Day.js 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'`
`name`	The name of the control, which is submitted with the form data.	`string`	`-`
`placeholder`	Instructional text that shows before the input has a value	`string`	-
`placement`	Set the position the dropdown will open in, relative to the context element	`bottom` `bottomLeft` `bottomRight` `left` `leftBottom` `leftTop` `right` `rightBottom` `rightTop` `top` `topLeft` `topRight`	`'bottomLeft'`
`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`	`'body'`
`value`	The value of the date picker	`string`	-

Events

Name	Type	Description	Extra
atBlur	`CustomEvent<void>`	Emitted when the input loses focus.	-
atChange	`CustomEvent<{ value: string; date: DateWrapResult; rangeEnd?: DateWrapResult; }>`	Emitted when the value has changed.	-
atFocus	`CustomEvent<void>`	Emitted when the input has focus.	-
atInput	`CustomEvent<{ value: string; date: DateWrapResult; rangeEnd?: DateWrapResult; }>`	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​