Basic Usage

WARNING

Due to VitePress style limitations, the component display effects in the documentation may differ from actual usage. Please refer to the actual effects after installation.

DatePicker Component

--

v-model:

<template>
  <DatePicker v-model="date" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DatePicker } from "@tiaohsun/vue-datepicker";
import "@tiaohsun/vue-datepicker/style";

const date = ref("");
</script>

DateRange Component

v-model: { "start": "", "end": "" }

<template>
  <DateRange v-model="dateRange" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DateRange } from "@tiaohsun/vue-datepicker";
import "@tiaohsun/vue-datepicker/style";

const dateRange = ref({
  start: "",
  end: "",
});
</script>

Custom Format

//

Code Example

<template>
  <DatePicker
    v-model="date"
    date-format="DD/MM/YYYY"
    output-type="custom"
    dateSeparator="/"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DatePicker } from "@tiaohsun/vue-datepicker";
import "@tiaohsun/vue-datepicker/style";

const date = ref(null);
</script>

Enable Time

--

::

Code Example

<template>
  <DatePicker v-model="date" output-type="custom" :show-time="true" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DatePicker } from "@tiaohsun/vue-datepicker";
import "@tiaohsun/vue-datepicker/style";

const date = ref(null);
</script>

Using Different Calendars

Code Example

<template>
  <DatePicker v-model="date" calendar="roc" output-type="custom" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DatePicker } from "@tiaohsun/vue-datepicker";
import "@tiaohsun/vue-datepicker/style";

const date = ref(null);
</script>

Custom Styling

Theme

--

Dark Mode

--

Code Example

<template>
  <DatePicker v-model="date1" theme="blue" />
  <DatePicker v-model="date2" mode="dark" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DatePicker } from "@tiaohsun/vue-datepicker";
import "@tiaohsun/vue-datepicker/style";

const date1 = ref(null);
const date2 = ref(null);
</script>