Basic Components

<template>
  <div>
    <label class="block text-sm font-medium mb-1">{{ t('themeDocs.dateTimePicker.selectDateTime') }}</label>
    <DateTimePicker v-model="dateValue" />
    
    <div class="mt-4">
      <p>{{ t('themeDocs.dateTimePicker.selectedValue') }}: 
        <span v-if="dateValue">{{ dateValue }}</span>
        <span v-else class="text-gray-500">{{ t('themeDocs.dateTimePicker.noDateSelected') }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DateTimePicker from '~/components/theme/DateTimePicker.vue'

const dateValue = ref(new Date().toISOString())
</script>

<template>
  <div>
    <label class="block text-sm font-medium mb-1">{{ t('themeDocs.dateTimePicker.clearableTitle') }}</label>
    <DateTimePicker v-model="dateValue" :clearable="true" />
    
    <label class="block text-sm font-medium mt-4 mb-1">{{ t('themeDocs.dateTimePicker.nonClearableTitle') }}</label>
    <DateTimePicker v-model="dateValue2" :clearable="false" />
    
    <div class="mt-4">
      <p>{{ t('themeDocs.dateTimePicker.clearableValue') }}: 
        <span v-if="dateValue">{{ dateValue }}</span>
        <span v-else class="text-gray-500">{{ t('themeDocs.dateTimePicker.noDateSelected') }}</span>
      </p>
      <p>{{ t('themeDocs.dateTimePicker.nonClearableValue') }}: 
        <span v-if="dateValue2">{{ dateValue2 }}</span>
        <span v-else class="text-gray-500">{{ t('themeDocs.dateTimePicker.noDateSelected') }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DateTimePicker from '~/components/theme/DateTimePicker.vue'

const dateValue = ref(new Date().toISOString())
const dateValue2 = ref(new Date().toISOString())
</script>

<template>
  <div>
    <label class="block text-sm font-medium mb-1">{{ t('themeDocs.dateTimePicker.disabledTitle') }}</label>
    <DateTimePicker v-model="dateValue" :disabled="true" />
    
    <div class="mt-4">
      <p>{{ t('themeDocs.dateTimePicker.disabledValue') }}: 
        <span v-if="dateValue">{{ dateValue }}</span>
        <span v-else class="text-gray-500">{{ t('themeDocs.dateTimePicker.noDateSelected') }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DateTimePicker from '~/components/theme/DateTimePicker.vue'

const dateValue = ref(new Date().toISOString())
</script>

<template>
  <div>
    <label class="block text-sm font-medium mb-1">{{ t('themeDocs.dateTimePicker.errorTitle') }}</label>
    <DateTimePicker 
      v-model="dateValue" 
      :error="hasError" 
      error-message="请选择有效的日期和时间"
    />
    
    <label class="block text-sm font-medium mt-4 mb-1">{{ t('themeDocs.dateTimePicker.customErrorTitle') }}</label>
    <DateTimePicker 
      v-model="dateValue2" 
      error="此日期不符合业务规则要求"
    />
    
    <div class="flex items-center gap-4 mt-4">
      <Button @click="toggleError">
        {{ hasError ? '清除错误' : '设置错误状态' }}
      </Button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DateTimePicker from '~/components/theme/DateTimePicker.vue'
import Button from '~/components/theme/Button.vue'

const dateValue = ref(new Date().toISOString())
const dateValue2 = ref(new Date().toISOString())
const hasError = ref(false)

const toggleError = () => {
  hasError.value = !hasError.value
}
</script>

<template>
  <div>
    <label class="block text-sm font-medium mb-1">{{ t('themeDocs.dateTimePicker.dateRangeTitle') }}</label>
    <p class="text-sm text-gray-500 mb-2">{{ t('themeDocs.dateTimePicker.dateRangeDescription') }}</p>
    
    <DateTimePicker 
      v-model="dateValue" 
      :min="minDate" 
      :max="maxDate"
    />
    
    <div class="mt-4">
      <p>{{ t('themeDocs.dateTimePicker.minDate') }}: {{ minDateFormatted }}</p>
      <p>{{ t('themeDocs.dateTimePicker.maxDate') }}: {{ maxDateFormatted }}</p>
      <p>{{ t('themeDocs.dateTimePicker.selectedValue') }}: 
        <span v-if="dateValue">{{ dateValue }}</span>
        <span v-else class="text-gray-500">{{ t('themeDocs.dateTimePicker.noDateSelected') }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import DateTimePicker from '~/components/theme/DateTimePicker.vue'

// 今天
const today = new Date()

// 最小日期: 一周前
const minDate = new Date(today)
minDate.setDate(today.getDate() - 7)

// 最大日期: 一周后
const maxDate = new Date(today)
maxDate.setDate(today.getDate() + 7)

// 初始值: 今天
const dateValue = ref(today.toISOString())

// 格式化日期以显示
const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

const minDateFormatted = computed(() => formatDate(minDate))
const maxDateFormatted = computed(() => formatDate(maxDate))
</script>