介绍
组合了日历、弹出框、输入框组件,实现了便捷快速的日历选择功能。
引入
js
import CalendarInput from 'sard-uniapp/components/calendar-input/calendar-input.vue'代码演示
基础使用
使用 v-model 绑定当前值,通过 title 和 placeholder 属性设置弹出框标题和输入框占位文本。
在点击输入框后会显示日历弹出框。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-calendar-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item title="设置为今天" arrow hover @click="value = new Date()" />
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-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
<template>
<sar-list card>
<sar-list-item>
<sar-calendar-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item title="设置为今天" arrow hover @click="value = new Date()" />
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref(/* @__PURE__ */ new Date());
const onChange = (value2) => {
console.log("change", value2);
};
</script>输入框日期格式
使用 outlet-format 属性自定义输入框日期展示的格式。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-calendar-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
outlet-format="YYYY年MM月DD日"
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item title="设置为今天" arrow hover @click="value = new Date()" />
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-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
<template>
<sar-list card>
<sar-list-item>
<sar-calendar-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
outlet-format="YYYY年MM月DD日"
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item title="设置为今天" arrow hover @click="value = new Date()" />
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref(/* @__PURE__ */ new Date());
const onChange = (value2) => {
console.log("change", value2);
};
</script>绑定值的格式
默认绑定的值为 Date 实例,提交到后端时需要手动转换为特定格式的字符串;使用 value-format 属性可以将这个转换交由组件库处理。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-calendar-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
value-format="YYYY/MM/DD"
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item
title="设置为 2025/01/01"
arrow
hover
@click="value = '2025/01/01'"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-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
<template>
<sar-list card>
<sar-list-item>
<sar-calendar-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
value-format="YYYY/MM/DD"
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item
title="设置为 2025/01/01"
arrow
hover
@click="value = '2025/01/01'"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref("");
const onChange = (value2) => {
console.log("change", value2);
};
</script>类型
下面展示了不同类型选择的值在输入框的展示。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-calendar-input
title="选择单个日期"
placeholder="选择单个日期"
clearable
type="single"
/>
</sar-list-item>
<sar-list-item>
<sar-calendar-input
title="选择日期范围"
placeholder="选择日期范围"
clearable
type="range"
/>
</sar-list-item>
<sar-list-item>
<sar-calendar-input
title="选择多个日期"
placeholder="选择多个日期"
clearable
type="multiple"
/>
</sar-list-item>
</sar-list>
</template>API
CalendarInputProps
继承 CalendarPopoutProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 弹出式输入框根元素类名 | string | - |
| root-style | 弹出式输入框根元素样式 | StyleValue | - |
| disabled | 禁用状态 | boolean | false |
| readonly | 只读状态 | boolean | false |
| clearable | 是否显示清空按钮 | boolean | false |
| placeholder | 输入框占位符内容 | string | - |
| outlet-format 1.10+ | 输出到输入框的日期格式 | string 详见特殊符号 | 'YYYY-MM-DD' |
| value-on-clear 1.19.2+ | 设置点击清除按钮后的值 | () => any | () => undefined |
| arrow 1.22+ | 自定义箭头图标名 | string | 'caret-right' |
| arrow-family 1.22+ | 自定义箭头图标字体 | string | 'sari' |
| input-props 1.22+ | 自定义输入框组件属性 | InputProps | - |