Pro 日期时间选择器 ​

<template>
  <w-radio-group v-model="size" aria-label="size control">
    <w-radio-button value="large">large</w-radio-button>
    <w-radio-button value="default">default</w-radio-button>
    <w-radio-button value="small">small</w-radio-button>
    <w-radio-button value="mini">mini</w-radio-button>
  </w-radio-group>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">默认</span>
      <w-date-picker-pro
        v-model="value1"
        :size="size"
        type="datetime"
        placeholder="请选择日期时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <w-date-picker-pro
        v-model="value2"
        :size="size"
        type="datetime"
        placeholder="请选择日期时间"
        :shortcuts="shortcuts"
        :default-value="new Date(2023, 9, 1)"
      />
    </div>
  </div>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">默认时间</span>
      <w-date-picker-pro
        v-model="value3"
        type="datetime"
        :size="size"
        placeholder="请选择日期时间"
        :default-time="defaultTime"
      />
    </div>
    <div class="block">
      <span class="demonstration">轻量化</span>
      <w-date-picker-pro
        v-model="value4"
        type="datetime"
        :size="size"
        plain
        placeholder="请选择日期时间"
      />
    </div>
  </div>
</template>

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

const size = ref('default')
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const defaultTime = new Date(2020, 1, 1, 12, 0, 0)

const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },
  },
]
</script>

<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  flex: 1;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--w3-font-color-second);
  font-size: 14px;
  margin-bottom: 16px;
}
</style>

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <w-date-picker-pro
      v-model="value1"
      type="datetimerange"
      range-separator="-"
      start-placeholder="请选择开始时间"
      end-placeholder="请选择结束时间"
    />
  </div>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <w-date-picker-pro
      v-model="value2"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="-"
      start-placeholder="请选择开始时间"
      end-placeholder="请选择结束时间"
    />
  </div>
</template>

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

const value1 = ref<[Date, Date]>([
  new Date(2020, 10, 10, 10, 10),
  new Date(2020, 10, 11, 10, 10),
])
const value2 = ref('')

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
</script>

<style scoped>
.block {
  padding: 30px 0;
  text-align: center;
  flex: 1;
}
.block .demonstration {
  display: block;
  color: var(--w3-font-color-second);
  font-size: 14px;
  margin-bottom: 16px;
}
</style>

<template>
  <div class="block">
    <span class="demonstration">默认时间为 12:00:00</span>
    <w-date-picker-pro
      v-model="value1"
      type="datetimerange"
      start-placeholder="请选择开始时间"
      end-placeholder="请选择结束时间"
      :default-time="defaultTime1"
      :default-value="[new Date(2023, 7, 1), new Date(2023, 10, 1)]"
    />
  </div>
  <div class="block">
    <span class="demonstration"> 开始时间 12:00:00, 结束时间 08:00:00 </span>
    <w-date-picker-pro
      v-model="value2"
      type="datetimerange"
      start-placeholder="请选择开始时间"
      end-placeholder="请选择结束时间"
      :default-time="defaultTime2"
      :default-value="[new Date(2023, 7, 1), new Date(2023, 10, 1)]"
    />
  </div>
</template>

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

const value1 = ref('')
const value2 = ref('')

const defaultTime1 = new Date(2020, 1, 1, 12, 0, 0) // '12:00:00'
const defaultTime2: [Date, Date] = [
  new Date(2020, 1, 1, 12, 0, 0),
  new Date(2020, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'
</script>

<style scoped>
.block {
  padding: 30px 0;
  text-align: center;
  flex: 1;
}
.block .demonstration {
  display: block;
  color: var(--w3-font-color-second);
  font-size: 14px;
  margin-bottom: 16px;
}
</style>

<template>
  <div class="demo-datetime-picker">
    <div class="block">
      <span class="demonstration">Emits Date object</span>
      <div class="demonstration">Value: {{ value1 }}</div>
      <w-date-picker-pro
        v-model="value1"
        type="datetime"
        placeholder="请选择日期时间"
        format="YYYY/MM/DD HH:mm:ss"
      />
    </div>
    <div class="block">
      <span class="demonstration">Use value-format</span>
      <div class="demonstration">Value：{{ value2 }}</div>
      <w-date-picker-pro
        v-model="value2"
        type="datetime"
        placeholder="请选择日期时间"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="YYYY-MM-DD h:m:s a"
      />
    </div>
    <div class="block">
      <span class="demonstration">Timestamp</span>
      <div class="demonstration">Value：{{ value3 }}</div>
      <w-date-picker-pro
        v-model="value3"
        type="datetime"
        placeholder="请选择日期时间"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="x"
      />
    </div>
  </div>
</template>

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

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  flex: 1;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--w3-font-color-second);
  font-size: 14px;
  margin-bottom: 16px;
}
</style>