更新记录

1.0.0(2022-06-06) 下载此版本

Attributes

类型 说明 数据类型 默认值说明
modelValue 月历组件值 String, Number, Date ''
visible 弹窗显示 Boolean false
disabledDate 禁用的日期 Function 默认禁用大于当前时间后的年月,默认值在下面

默认的 disabledDate 函数

const disabledDate = (year, month) => {
  const date = new Date()
  if (year > date.getFullYear()) {
    return true
  }
  if (year === date.getFullYear() && month > date.getMonth() + 1) {
    return true
  }
  return false
}

Events

confirm 弹窗点击确认事件

回调参数

{
    subVisible: false,
    yarn: state.year,
    month: state.month,
    value: state.year + '-' + state.month
}

Vue 版本支持

仅支持 vue3.2 以上版本

使用说明

组件依赖 sass @dcloudio/uni-ui 请在项目中提前安装sass@dcloudio/uni-ui,并且配置好 @dcloudio/uni-ui的导入。


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.13 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

SelectMonth 选择年月份组件

使用示例

<template>
  <view class="content">
    <button hover-class="button-hover" @click="handleShow">显示</button>

    {{ state.month }}
    <!-- 选择月份组件 -->
    <SelectMonth v-model="state.month" v-model:visible="state.visible" />
  </view>
</template>

<script setup>
  import { reactive } from 'vue'
  import SelectMonth from '../../components/select-month'

  const state = reactive({
    month: '',
    visible: false
  })

  const handleShow = () => {
    state.visible = true
  }
</script>

<style></style>

Attributes

类型 说明 数据类型 默认值说明
modelValue 月历组件值 String, Number, Date ''
visible 弹窗显示 Boolean false
disabledDate 禁用的日期 Function 默认禁用大于当前时间后的年月,默认值在下面

默认的 disabledDate 函数

const disabledDate = (year, month) => {
  const date = new Date()
  if (year > date.getFullYear()) {
    return true
  }
  if (year === date.getFullYear() && month > date.getMonth() + 1) {
    return true
  }
  return false
}

Events

confirm 弹窗点击确认事件

回调参数

{
    subVisible: false,
    yarn: state.year,
    month: state.month,
    value: state.year + '-' + state.month
}

Vue 版本支持

仅支持 vue3.2 以上版本

使用说明

组件依赖 sass @dcloudio/uni-ui 请在项目中提前安装sass@dcloudio/uni-ui,并且配置好 @dcloudio/uni-ui的导入。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问