TUI

<template>
  <div class="component-card-demo-wrap" style="width: 338px">
    <TsDateRangePicker v-model="dateRange" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const dateRange = ref(['2025-10-01 00:00:00', '2025-10-02 23:59:59']);
</script>

<template>
  <div class="component-card-demo-wrap" style="width: 338px">
    <TsDatePicker v-model="dateClearRange" clearable />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const dateClearRange = ref(['2025-10-01 00:00:00', '2025-10-02 23:59:59']);
</script>

<template>
  <div class="component-card-demo-wrap" style="width: 338px">
    <TsDateRangePicker v-model="dateRange" :needConfirm="false"/>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const dateRange = ref('2020-01-01 19:32:00');
</script>

<template>
  <div class="component-card-demo-wrap" style="width: 338px">
    <TsDatePicker v-model="dateDisabledRange" disabled />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const dateDisabledRange = ref(['2025-10-01 00:00:00', '2025-10-02 23:59:59']);
</script>