Tui

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

const dateRange = ref('2025-10-01 00:00:00');
</script>

<template>
  <div class="date-picker-feature-demo">
    <div class="feature-row">
      <div class="feature-meta">
        <div class="feature-title">日期格式（YYYY-MM-DD）</div>
        <div class="feature-desc">不展示时间面板，返回纯日期字符串。</div>
      </div>
      <div class="feature-control">
        <TsDatePicker v-model="dateOnlyValue" clearable format="YYYY-MM-DD" />
      </div>
    </div>

    <div class="feature-row">
      <div class="feature-meta">
        <div class="feature-title">即时提交（needConfirm=false）</div>
        <div class="feature-desc">选择日期后立即提交，不需要再点击确认。</div>
      </div>
      <div class="feature-control">
        <TsDatePicker v-model="instantValue" :needConfirm="false" format="YYYY-MM-DD" />
      </div>
    </div>

    <div class="feature-row">
      <div class="feature-meta">
        <div class="feature-title">禁用状态</div>
        <div class="feature-desc">只展示当前值，不允许交互与修改。</div>
      </div>
      <div class="feature-control">
        <TsDatePicker v-model="disabledValue" disabled />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsDatePicker } from 'tui'

const dateOnlyValue = ref('2026-03-18');
const instantValue = ref('2026-03-01');
const disabledValue = ref('2026-03-18 09:30:00');
</script>

<style scoped>
.date-picker-feature-demo {
  width: 100%;
  border: 1px solid var(--bussiness-date-feature-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bussiness-date-feature-bg);
}

.feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px dashed var(--bussiness-date-feature-border);
}

.feature-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--bussiness-date-feature-title);
}

.feature-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--bussiness-date-feature-desc);
}

.feature-control {
  width: 183px;
  min-width: 183px;
}

.feature-row:last-child {
  border-bottom: none;
}

.feature-row:hover {
  background: var(--bussiness-date-feature-row-hover);
}
</style>