介绍

组合了日历、弹出框、输入框组件，实现了便捷快速的日历选择功能。

代码演示

基础使用

使用 v-model 绑定当前值，通过 title 和 placeholder 属性设置弹出框标题和输入框占位文本。

在点击输入框后会显示日历弹出框。

vue ts

<template>
  <s-list card>
    <s-list-item>
      <s-calendar-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        clearable
        @change="onChange"
      />
    </s-list-item>

    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为今天" arrow hover @click="value = new Date()" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const value = ref<Date | undefined>(new Date())

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue js

<template>
  <s-list card>
    <s-list-item>
      <s-calendar-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        clearable
        @change="onChange"
      />
    </s-list-item>

    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为今天" arrow hover @click="value = new Date()" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref(new Date())
const onChange = (value) => {
  console.log('change', value)
}
</script>

输入框日期格式

使用 outlet-format 属性自定义输入框日期展示的格式。

vue ts

<template>
  <s-list card>
    <s-list-item>
      <s-calendar-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        clearable
        outlet-format="YYYY年MM月DD日"
        @change="onChange"
      />
    </s-list-item>

    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为今天" arrow hover @click="value = new Date()" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const value = ref<Date | undefined>(new Date())

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue js

<template>
  <s-list card>
    <s-list-item>
      <s-calendar-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        clearable
        outlet-format="YYYY年MM月DD日"
        @change="onChange"
      />
    </s-list-item>

    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为今天" arrow hover @click="value = new Date()" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref(new Date())
const onChange = (value) => {
  console.log('change', value)
}
</script>

绑定值的格式

默认绑定的值为 Date 实例，提交到后端时需要手动转换为特定格式的字符串；使用 value-format 属性可以将这个转换交由组件库处理。

vue ts

<template>
  <s-list card>
    <s-list-item>
      <s-calendar-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        clearable
        value-format="YYYY/MM/DD"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为 2025/01/01" arrow hover @click="value = '2025/01/01'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const value = ref<string | undefined>('')

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue js

<template>
  <s-list card>
    <s-list-item>
      <s-calendar-input
        v-model="value"
        title="请选择日期"
        placeholder="请选择日期"
        clearable
        value-format="YYYY/MM/DD"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item title="设置为 2025/01/01" arrow hover @click="value = '2025/01/01'" />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref('')
const onChange = (value) => {
  console.log('change', value)
}
</script>

类型

下面展示了不同类型选择的值在输入框的展示。

<template>
  <s-list card>
    <s-list-item>
      <s-calendar-input title="选择单个日期" placeholder="选择单个日期" clearable type="single" />
    </s-list-item>
    <s-list-item>
      <s-calendar-input title="选择日期范围" placeholder="选择日期范围" clearable type="range" />
    </s-list-item>
    <s-list-item>
      <s-calendar-input title="选择多个日期" placeholder="选择多个日期" clearable type="multiple" />
    </s-list-item>
  </s-list>
</template>

API

CalendarInputProps

继承 CalendarPopoutProps 和 PopoutInputProps。

属性	描述	类型	默认值
outlet-format	输出到输入框的日期格式	string 详见特殊符号	'YYYY-MM-DD'

CalendarInputSlots

继承 PopoutInputSlots

CalendarInputEmits

继承 CalendarPopoutEmits