QinUi

# Calendar 日历

此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。

# 基础用法

:insert="true"

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar
      v-if="show"
      :insert="true"
      startDate="2023-12-01"
      endDate="2023-12-20"
    />
  </view>
</template>
<script>
  export default {
    data() {
      return {
        show: false,
      }
    },
    methods: {
      onOpen(index) {
       this.show = !this.show;
      },
    }
  }
</script>

# 单个日期

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar ref="calendar" title="单个日期" @ok="onConfirm" />
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 多个日期

设置 type="multiple"

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar ref="calendar" type="multiple" title="多个日期" @ok="onConfirm" />
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 日期范围

设置 type="range"

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar ref="calendar" type="range" title="日期范围" @ok="onConfirm" />
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 自定义主题颜色 v-model

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar
      type="range"
      v-model="date"
      title="自定义主题颜色"
      color="#f56c6c"
      confirm-color="#f56c6c"
      @ok="onConfirm"
    />
  </view>
</template>
<script>
  export default {
    data() {
      const theDay = new Date();
      const theYear = theDay.getFullYear();
      let theMonth = theDay.getMonth() + 1;
      theMonth = theMonth < 10 ? `0${theMonth}` : theMonth;
      return {
        show: false,
        date: [`${theYear}-${theMonth}-08`, `${theYear}-${theMonth}-20`],
      }
    },
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 自定义文案

设置 :selected="selected"

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar
      ref="calendar"
      type="range"
      title="自定义文案"
      start-text="住店"
      end-text="离店"
      :selected="selected"
      @ok="onConfirm"
    />
  </view>
</template>
<script>
  export default {
    data() {
      return {
        selected = [
          {
            date: `${this.year}-${this.month}-02`,
            info: '签到',
            disabled: false,
            badge: true,
            infoColor: '#ff0000',
          },
          {
            date: `${this.year}-${this.month}-06`,
            info: '余10',
            infoColor: '#19be6b',
            disabled: false,
            topinfo: '￥100',
            topinfoColor: '#19be6b',
          },
          {
            date: `${this.year}-${this.month}-03`,
            info: '不可',
            infoColor: 'rgba(0,0,255,1)',
            disabled: true,
          },
        ];
      };
    },
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 限制日期选择范围

设置 type="range"

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar
      ref="calendar"
      :startDate="startDate"
      title="限制日期选择范围"
      :endDate="endDate"
      @ok="onConfirm"
    />
  </view>
</template>
<script>
  export default {
    data() {
      const theDay = new Date();
      const theYear = theDay.getFullYear();
      let theMonth = theDay.getMonth() + 1;
      theMonth = theMonth < 10 ? `0${theMonth}` : theMonth;
      return {
        startDate: `${theYear}-${theMonth}-02`,
        endDate: `${theYear}-${theMonth}-20`,
      }
    },
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 显示农历

设置 :lunar="true"

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar
      ref="calendar"
      :lunar="true"
      title="显示农历"
      @ok="onConfirm"
    />
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 默认单个日期

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar
      ref="calendar"
      title="默认单个日期"
      v-model="defaultDate"
      @ok="onConfirm"
    />
  </view>
</template>
<script>
  export default {
    data() {
      const theDay = new Date();
      const theYear = theDay.getFullYear();
      let theMonth = theDay.getMonth() + 1;
      theMonth = theMonth < 10 ? `0${theMonth}` : theMonth;
      return {
        defaultDate: `${theYear}-${theMonth}-15`,
      }
    },
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 默认多个日期 v-model

设置 type="multiple"

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar
      ref="calendar"
      title="默认多个日期"
      type="multiple"
      v-model="dates"
      @ok="onConfirm"
    />
  </view>
</template>
<script>
  export default {
    data() {
      const theDay = new Date();
      const theYear = theDay.getFullYear();
      let theMonth = theDay.getMonth() + 1;
      theMonth = theMonth < 10 ? `0${theMonth}` : theMonth;
      return {
        dates: [
          `${theYear}-${theMonth}-08`,
          `${theYear}-${theMonth}-16`,
          `${theYear}-${theMonth}-24`,
        ],
      }
    },
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 默认日期范围 v-model

设置 type="range"

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar
      ref="calendar"
      title="默认日期范围"
      type="range"
      v-model="dates"
      @ok="onConfirm"
    />
  </view>
</template>
<script>
  export default {
    data() {
      const theDay = new Date();
      const theYear = theDay.getFullYear();
      let theMonth = theDay.getMonth() + 1;
      theMonth = theMonth < 10 ? `0${theMonth}` : theMonth;
      return {
        dates: [
          `${theYear}-${theMonth}-08`,
          `${theYear}-${theMonth}-24`,
        ],
      }
    },
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
      onConfirm(e) {
        let time = null;
        if (e.range.before && e.range.after) {
          time = `${e.range.before} 至 ${e.range.after}`;
        } else if (e.multiple.data.length) {
          time =
            e.multiple.data.length > 1
              ? `${e.multiple.data[0]}等多个日期`
              : e.multiple.data[0];
        } else {
          time = e.fulldate;
        }
        qin.showToast({
          icon: 'none',
          title: time,
        });
      },
    }
  }
</script>

# 单个日期(不可选今日之前)

设置 disabledTime

<template>
  <view>
    <button @click="onOpen">打开 Calendar</button>
    <qinui-calendar
      ref="calendar"
      title="不可选今日之前"
      :disabledTime="disabledDate10"
    />
  </view>
</template>
<script>
  export default {
    data() {
      return {
        disabledDate10: new Date().getTime(),
      }
    },
    methods: {
      onOpen(index) {
       this.$refs.calendar.open();
      },
    }
  }
</script>

# API

# Props

参数 说明 类型 默认值 可选值
modelValue (v-model) 选中的值 String | Array - -
type 日历类型 String - multiple | range
cancelColor 取消按钮颜色 String - -
okColor 确认按钮颜色 String - -
title 标题 String - -
color 主题色 String - -
defaultSelected 全部默认的选中文案，见 DefaultSelected Prop Object - -
selected 每个日期的自定义文案，见 Selected Prop Array<Object> - -
displayPreMonthDay 是否隐藏上个月信息 Boolean false true | false
displayNextMonthDay 是否隐藏下个月信息 Boolean false true | false
lunar 是否显示农历 Boolean false true | false
startDate 可选择的起始日期 String - -
endDate 可选择的结束日期 String - -
insert 是否是插入日历 Boolean false true | false
showMonth 是否显示月份为背景 Boolean true true | false
clearDate 弹窗模式是否清空上次选择内容 Boolean true true | false
closeOnClickOverlay 点击遮罩是否关闭弹窗 Boolean true true | false
allowSameDay type = range 时，是否允许日期范围的起止时间为同一天 Boolean false true | false
readonly 是否只读 Boolean false true | false
startText type = range 时，第一个日期底部的提示文字 String 开始 -
endText type = range 时，最后一个日期底部的提示文字 String 结束 -
disabledTime 禁用某一天以前时可用 String - -

# DefaultSelected Prop

参数 说明 类型 默认值 可选值
disabled 是否禁用 Boolean - -
info 文案 String - -
infoColor 文案颜色 String - -

# Selected Prop

参数 说明 类型 默认值 可选值
disabled 是否禁用 Boolean - -
badge 是否有点 Boolean - -
date 日期 String - -
info 文案 String - -
infoColor 文案颜色 String - -
topinfo 上面文案 String - -
topinfoColor 上面文案颜色 String - -

# Methods

方法名 说明
open 打开

# Events

事件名 说明 回调参数
@close 点击取消按钮时触发。点击遮罩触发该事件需要设置:closeOnClickOverlay="true" -
@ok 点击确定 -
@change 点击选中 -
@changeMonth 改变月份 -

← radio 单选框 →