2.1.8 • Published 2 years ago

temporal-picker v2.1.8

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

temporal-picker

Temporal Picker is a date picker base on ISO date format

The supported frameworks are:

Screenshots

Screenshot1 Screenshot2 Screenshot3 Screenshot4

How to Use

Step 1.

npm i temporal-picker

Step 2.

import { define } from "temporal-picker";

define();

Step 3.

<style>
  :root {
    --t-input-color-fg-invalid: red;
  }
  temporal-picker::part(separator) {
    color: blue;
  }
</style>

<temporal-picker id="picker"></temporal-picker>

<temporal-picker id="range-picker" type="range" extra-select="true" reset-button="true">
  <temporal-preset label="Preset 1" start="2023-01-01" end="2023-02-15"></temporal-preset>
  <temporal-preset label="Preset 2" start="2023-04-01" end="2023-06-01"></temporal-preset>
</temporal-picker>

<script>
  const picker = document.getElementById("picker");
  picker.addEventListener("t-value-change", (e) => console.log(e));

  const rangePicker = document.getElementById("range-picker");
  rangePicker.addEventListener("t-range-change", (e) => console.log(e));
</script>

Properties

PropertyAttributeDescriptionTypeDefault
autoApplyauto-applybooleanundefined
customLayoutcustom-layoutbooleanundefined
disableddisabledbooleanundefined
endendThe end value of date rangestringundefined
extraSelectextra-selectbooleanundefined
firstDayfirst-daynumberundefined
localelocalestringundefined
localeApplylocale-applystringundefined
localeCancellocale-cancelstringundefined
localeClearlocale-clearstringundefined
maxmaxThe max valuestringundefined
minminThe min valuestringundefined
nativenativeThe native valuebooleanundefined
pickerpickerThe type of picker"button" \| "input"'input'
placementplacement"bottom" \| "bottom-end" \| "bottom-start"'bottom'
plainplainThe type of picker"date" \| "datetime" \| "day" \| "month" \| "time"'date'
presetPositionpreset-position"bottom" \| "left" \| "right" \| "top"undefined
readonlyreadonlybooleanundefined
reselectreselectbooleanundefined
resetButtonreset-buttonbooleanundefined
rowHeaderrow-headerbooleanundefined
pickLabelpick-labelbooleanundefined
startstartThe start value of date rangestringundefined
strictstrictbooleanundefined
tooltiptooltipbooleanundefined
typetypeThe type of picker"plain" \| "range"'plain'
valuevalueThe value of datestringundefined

Events

EventDescriptionType
t-range-changeThe range change eventCustomEvent<{ start: string; end: string; }>
t-value-changeThe value change eventCustomEvent<{ value: string; }>
t-layout
t-render
t-mount
t-update

Shadow Parts

PartDescription
"button"
"input"
"start-input"
"end-input"
"separator"
"range-wrapper"

Customize

:root {
  --t-popup-color-bg-default: #fff;
  --t-popup-color-bg-secondary: #f2f5f8;
  --t-popup-color-fg-default: #1e293b;
  --t-popup-color-fg-primary: #2e6fda;
  --t-popup-color-fg-secondary: #64748b;
  --t-popup-color-fg-selected: #fff;
  --t-popup-color-fg-muted: #64748b;
  --t-popup-color-fg-accent: #e63757;
  --t-popup-color-fg-locked: #9e9e9e;
  --t-popup-color-bg-locked: #ffab91;
  --t-popup-color-bg-unavailable: #f9f9f9;
  --t-popup-color-bg-inrange: #e6effe;
  --t-popup-color-bg-inrange-inf: #f2f6fe;
  --t-popup-color-bg-tooltip: #fff;
  --t-popup-color-fg-tooltip: #1e293b;
  --t-popup-color-btn-primary-bg: #2e6fda;
  --t-popup-color-btn-primary-fg: #fff;
  --t-popup-color-btn-primary-border: #2e6fda;
  --t-popup-color-btn-primary-hover-bg: #2c67cd;
  --t-popup-color-btn-primary-hover-fg: #fff;
  --t-popup-color-btn-primary-hover-border: #2c67cd;
  --t-popup-color-btn-primary-disabled-bg: #80aff8;
  --t-popup-color-btn-primary-disabled-fg: #fff;
  --t-popup-color-btn-primary-disabled-border: #80aff8;
  --t-popup-color-btn-secondary-bg: #fff;
  --t-popup-color-btn-secondary-fg: #475569;
  --t-popup-color-btn-secondary-border: #cbd5e1;
  --t-popup-color-btn-secondary-hover-bg: #f8fafc;
  --t-popup-color-btn-secondary-hover-fg: #475569;
  --t-popup-color-btn-secondary-hover-border: #cbd5e1;
  --t-popup-color-btn-secondary-disabled-bg: #cbd5e1;
  --t-popup-color-btn-secondary-disabled-fg: #fff;
  --t-popup-color-btn-secondary-disabled-border: #cbd5e1;
  --t-popup-color-border-default: #cbd5e1;
  --t-popup-color-border-locked: #f9f9f9;
  --t-popup-day-width: 43px;
  --t-popup-day-height: 37px;
  --t-popup-month-width: 75px;
  --t-popup-month-height: 37px;
  --t-popup-z-index: 40;
  --t-popup-border-radius: 2px;
  --t-popup-primary-color: #2e6fda;
  --t-popup-secondary-color: #64748b;
  --t-popup-font-family: inherit;
  --t-popup-box-shadow: 0 4px 28px 0 rgb(0 0 0 / 12%);
  --t-popup-month-name-font-weight: 700;
  --t-popup-focus-color: #94a3b8;
  --t-popup-select-outline-color: #e5e7eb;

  --t-input-border: 1px solid #e5e7eb;
  --t-input-color: inherit;
  --t-input-font: inherit;
  --t-input-px: 0.375em;
  --t-input-py: 0.25em;
  --t-input-invalid-color: #be123c;

  --t-input-button-icon-size: 1.25em;

  --t-input-range-wrapper-gap: 1em;
  --t-input-separator-icon-size: 1em;
}
2.1.8

2 years ago

2.1.2

2 years ago

2.0.3

2 years ago

2.1.1

2 years ago

2.0.2

2 years ago

2.1.4

2 years ago

2.0.5

2 years ago

2.1.3

2 years ago

2.0.4

2 years ago

2.1.6

2 years ago

2.1.5

2 years ago

2.1.7

2 years ago

2.1.0

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

1.0.3

2 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago

0.0.0

3 years ago