inno-date-picker-dropdown

Preview
Angular
React
Vue

Light background

Dark background

Angular example

<div>
  <inno-date-picker-dropdown></inno-date-picker-dropdown>
</div>

Inno date picker react

export function InnoDatePickerDropdownExample() {
  return (
    <>
      <InnoDatePickerDropdown></InnoDatePickerDropdown>
    </>
  );
}

<div class="component-display">
<div class="light-bg">
  <span class="bg-title">light background</span>
</div>
<div class="dark-bg">
  <span class="bg-title">dark background</span>
</div>
</div>

Overview

Date-picker with dropdown.

Properties

Property	Attribute	Description	Type	Default
`closeOnSelection`	`close-on-selection`		`boolean`	`true`
`format`	`format`	Date format string. See the date-picker component for more information.	`string`	`'yyyy/LL/dd'`
`from`	`from`	The selected starting range. See the date-picker component for more information.	`string`	`undefined`
`label`	`label`	Label of the dropdown component.	`string`	`undefined`
`locale`	`locale`	Format of the date strings. See the date-picker component for more information.	`string`	`undefined`
`maxDate`	`max-date`	The latest date that can be selected by the date picker. See the date-picker component for more information.	`string`	`undefined`
`minDate`	`min-date`	The earliest date that can be selected by the date picker. See the date-picker component for more information.	`string`	`undefined`
`range`	`range`	If true a date-range can be selected. See the date-picker component for more information.	`boolean`	`false`
`showOuterDays`	`show-outer-days`	Show the days outside the selected month. See the date-picker component for more information.	`boolean`	`true`
`to`	`to`	The selected end date. See the date-picker component for more information.	`string`	`undefined`
`variant`	`variant`	Color variant of the component.	`"dark" \| "light"`	`'dark'`
`weekStartIndex`	`week-start-index`	The index of which day to start the week on. See the date-picker component for more information.	`number`	`0`

Events

Event	Description	Type
`dateChange`	Triggers if the date selection changes. See the date-picker component for more information.	`CustomEvent<{ from: string; to: string; }>`

Dependencies

Depends on

Graph

Built with StencilJS

Overview​

Properties​

Events​

Dependencies​

Depends on​

Graph​

Overview

Properties

Events

Dependencies

Depends on

Graph