Sard Uniapp

Appearance

在新窗口打开⤴

CalendarInput日历输入框

介绍 ​

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

引入 ​

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禁用状态booleanfalse
readonly只读状态booleanfalse
clearable是否显示清空按钮booleanfalse
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-

CalendarInputSlots ​

继承 PopoutInputSlots

CalendarInputEmits ​

继承 CalendarPopoutEmits

Released under the MIT License.

Copyright © 2023-present wuzhitao