@chameleon-ds/date

Chameleon Date

import { html } from "@open-wc/demoing-storybook";
import { withKnobs, text, boolean } from "@open-wc/demoing-storybook";
import "./chameleon-date.js";

export default {
  title: "Components|Form Elements/Date",
  component: "chameleon-date",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

Property Name	Type(s)	Default Value	Description
name	String	"cha-date"	The date's form name
active	Boolean	false	Whether or not the date picker drawer is open
renderedDate	Object	null	The Date object of the rendered date
placeholder	String	""	The date's placeholder text
label	String	""	The date's label text
readonly	Boolean	false	Whether or not the date picker is readonly
value	String	""	The date picker's text value (YYYY-MM-DD)
min	String	null	The date picker's minimum value (YYYY-MM-DD)
max	String	null	The date picker's maximum value (YYYY-MM-DD)
required	Boolean	false	Whether or not the date value is required
canDelete	Boolean	true	If the date is able to be deleted
disabled	Boolean	false	Whether or not the date picker is disabled
validationMessage	String	""	The date picker's validation message
invalid	Boolean	false	Whether or not the date picker is invalid
overlayRenderMode	String	"month"	The date picker's overlay mode ("year", "month")

Examples

Default

export const Default = () => {
  const placeholder = text("Placeholder", "Select Date");
  const label = text("Label", "Date *");
  const minValue = text("Min Value (YYYY-MM-DD)", "");
  const maxValue = text("Max Value (YYYY-MM-DD)", "");
  const readonly = boolean("Read Only", false);
  const invalid = boolean("Invalid", false);
  const required = boolean("Required", false);
  const disabled = boolean("Disabled", false);
  const error = text("Error", "");
  const name = text("Name", "input-form-name");

  return html`
    <chameleon-date
      name="${name}"
      .placeholder="${placeholder}"
      ?readonly="${readonly}"
      .label="${label}"
      .min="${minValue}"
      .max="${maxValue}"
      ?required="${required}"
      ?invalid="${invalid}"
      ?disabled="${disabled}"
      .validationMessage="${error}"
    ></chameleon-date>
  `;
};

Error State

export const ErrorState = () => html`
  <chameleon-date
    placeholder="Select Date"
    label="Date *"
    invalid="true"
    validationMessage="Date must be selected"
  ></chameleon-date>
`;