t-date-picker

This component renders a date and time picker. It uses v-calendar under the hood.

Note that you need to wrap it with a Suspense component.

Basic Usage

import { TCard, TDatePicker } from "@dija/tohama-components";
import { defineComponent, Suspense } from "vue";

export default defineComponent({
  setup() {
    return () => (
      <TCard class="max-w-75" design="outlined" py px>
        <Suspense>
          <TDatePicker />
        </Suspense>
      </TCard>
    );
  },
});

Model Value

Current Date:

9/16/2024

Date Range

Current Date:

9/16/2024 - 9/19/2024

import { TDatePicker, TDatePickerValue, TText } from "@dija/tohama-components";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const date = ref<TDatePickerValue>({
      start: new Date("2022/10/10"),
      end: new Date("2022/10/14"),
    });

    return () => (
      <>
        <Suspense>
          <TDatePicker mode="range" rangeValue="3" value={date} autoApply />
        </Suspense>

        <TText>Current Date:</TText>
        <TText>
          {date.value.start?.toLocaleDateString()} - {date.value.end?.toLocaleDateString()}
        </TText>
      </>
    );
  },
});

Min and Max Dates

import { TDatePicker, TDatePickerValue, TText } from "@dija/tohama-components";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const date = ref<TDatePickerValue>({
      start: new Date("2022/01/12"),
      end: new Date("2022/01/14"),
    });

    return () => (
      <>
        <Suspense>
          <TDatePicker
            mode="range"
            minDate={new Date("2022/01/10")}
            maxDate={new Date("2022/01/20")}
            value={date}
            autoApply
          />
        </Suspense>

        <TText>Current Date:</TText>
        <TText>
          {date.value.start?.toLocaleDateString()} - {date.value.end?.toLocaleDateString()}
        </TText>
      </>
    );
  },
});

Attributes

Time Picker

Current Date:

import { TDatePicker, TDatePickerValue, TText } from "@dija/tohama-components";
import { defineComponent, ref } from "vue";

const TimePicker = defineComponent({
  setup() {
    const date = ref<TDatePickerValue>({
      start: new Date(),
    });

    return () => (
      <>
        <Suspense>
          <TDatePicker value={date} autoApply timePicker enableSeconds />
        </Suspense>

        <TText>Current Date:</TText>
        <TText>{date.value.start?.toLocaleTimeString()}</TText>
      </>
    );
  },
});

API

No options available

Components

t-crumbs

Components

t-dija-brand

Table of Contents