Light Dark System

Datepicker

<zn-datepicker> | ZnDatepicker
Since 1.0 experimental

Short summary of the component’s intended use.

<zn-datepicker></zn-datepicker>

Examples

Range

<zn-datepicker range></zn-datepicker>

Second Example

TODO

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/datepicker/datepicker.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/datepicker/datepicker.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/datepicker/datepicker.js';

Slots

Name Description
(default) The default slot.
example An example slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
type The type of input. Works the same as native <input> element. But only a subset of types is supported. Defaults to text 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' 'text'
name The name of the input, submitted as a name/value pair with form data. string ""
value The current value of the input, submitted as a name/value pair with form data. any ''
defaultValue The default value of the form control. Primarily used for resetting the form control. string ''
size The inputs size * 'small' | 'medium' | 'large' 'medium'
label The inputs label. If you need to display HTML, use the label slot. * string ''
labelTooltip
label-tooltip 		Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the label-tooltip slot. * string ''
contextNote
context-note 		Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the context-note slot instead string ''
helpText
help-text 		The input’s help text. If you need to display HTML, use the help-text slot instead. * string ''
disabled Disables the input * boolean false
placeholder Placeholder text to show as a hint when the input is empty. string ''
readonly Makes the input read-only * boolean false
form By default, form-controls are associated with the nearest containing <form> element. This attribute allows you to place the form control outside a form and associate it with the form that has this id. The form must be in the same document or shadow root for this to work. string -
required Makes the input a required field. boolean false
range Makes the input a range picker. * boolean false
validity Gets the validity state object - -
validationMessage Gets the validation message - -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
zn-event-name Emitted as an example. -

Learn more about events.

Methods

Name Description Arguments
focus() Sets focus on the input. options: FocusOptions
blur() Removes focus from the input. -
select() Selects all the text in the input. -
checkValidity() Checks the validity but does not show a validation message. Returns true when valid and false when invalid. -
getForm() Gets the associated form, if one exists. -
reportValidity() Checks for validity and shows the browser’s validation message if the control is invalid. -
setCustomValidity() Sets a custom validation message. Pass an empty string to restore validity. message: string

Learn more about methods.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-example>