t-input-date

This component provides date selection, validation and state. It has three different designs and has many options to tweak its properties.

Learn more about forms.

Learn more about t-date-picker.

Basic Usage

<TInputDate
  label="Signup Date"
  placeholder="Select a Date"
  persistentPlaceholder //
/>

Initial Value

<TInputDate
  controller={TInputDateController.create({
    value: {
      start: new Date("2022-01-01"),
    },
  })}
  label="Signup Date"
  placeholder="Select a Date"
  persistentPlaceholder
/>

Auto Hide

<TInputDate
  controller={TInputDateController.create({
    value: {
      start: new Date("2022-01-01"),
    },
  })}
  label="Signup Date"
  placeholder="Select a Date"
  hint="Please select a date"
  persistentPlaceholder
  persistentHint
  autoHide
/>

Range and Selected Builder

export default defineComponent({
  setup() {
    const field = TInputDateController.create();

    const readable = computed(() => {
      const value = field.state.value.data;
      if (!value?.start && !value?.end) {
        return;
      }
      const start = value.start?.toLocaleDateString() ?? "-";
      const end = value.end?.toLocaleDateString() ?? "-";
      return `Stay from ${start} to ${end}`;
    });

    return () => (
      <TInputDate
        controller={field}
        selectedBuilder={() => readable.value}
        label="Arrival and Departure Date"
        placeholder="Select Date Range"
        hint="Please select date range"
        mode="range"
        persistentPlaceholder
        persistentHint
        clearable
      />
    );
  },
});

Attributes

import { TButton, TCard, TDatePickerAttribute, TDivider, TFlex, TInputDate } from "@dija/tohama-components";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const today = new Date();

    const attributes = ref<TDatePickerAttribute[]>([
      {
        highlight: true,
        dates: [today],
      },
      {
        dot: "alert",
        dates: [addDays(today, 1), addDays(today, 2)],
      },
      {
        dot: "success",
        dates: [addDays(today, 1), addDays(today, 2)],
      },
      {
        highlight: "danger",
        dates: [
          {
            start: addDays(today, 3),
            span: 4,
          },
        ],
      },
    ]);

    const addAttribute = () => {
      attributes.value.push({
        highlight: "success",
        dates: [
          {
            start: addDays(today, 7),
            span: 4,
          },
        ],
      });
    };

    const removeAttribute = () => {
      attributes.value.pop();
    };

    return () => (
      <TCard design="outlined" p>
        <TFlex>
          <TButton size="md" onClick={addAttribute} me>
            Add Attribute
          </TButton>
          <TButton size="md" onClick={removeAttribute}>
            Remove Attribute
          </TButton>
        </TFlex>

        <TDivider my="lg" />

        <TInputDate
          label="Signup Date"
          placeholder="Select a Date"
          hint="Please select a date"
          attributes={attributes.value}
          persistentPlaceholder
          persistentHint
        />
      </TCard>
    );
  },
});

With Other Input Components

<TGrid cols="1" colsMd="2" gap="4">
  <TInputText
    type="email"
    label="Email"
    placeholder="Enter your email"
    hint="Please enter a correct email"
    persistentPlaceholder
    persistentHint
  />
  <TInputDate
    label="Signup Date"
    placeholder="Select a Date"
    hint="Please select a date"
    persistentPlaceholder
    persistentHint
  />
</TGrid>

API

No options available

Forms

t-input-choice

Forms

t-input-dropdown

Table of Contents