基礎使用

WARNING

由於 VitePress 的樣式限制，文件中的組件展示效果可能與實際使用時有所差異，請以實際安裝後的效果為準。

DatePicker 組件

--

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 組件

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>

自定義格式

//

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>

啟用時間

--

::

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>

使用不同日曆

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>

自定義樣式

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>