更新记录

1.3.1（2024-09-09） 下载此版本

1. 修复一些 bug

1.3.0（2024-09-06） 下载此版本

1.新增 isDisabled 属性

1.2.6（2024-08-01） 下载此版本

1. 修复选中当前日期时 current 标签展示错误。

平台兼容性

uni-app

uni-app x

使用方法

<template>
  <view>
    <button @click="open">打开选择器</button>
    <KDatePicker v-model="show" type="day" is-range @change="handleChange" :is-disabled="isDisabled"
                 formatter="YYYY-MM-DD"/>
  </view>
</template>

<script setup>
  import KDatePicker from '../../components/k-date-picker/KDatePicker.vue'

  const show = ref(false)
  const date = ref('')
  const open = () => {
    show.value = true
  }
  const handleChange = (value) => {
    date.value = value
  }

  const isDisabled = (value) => {
    return value < new Date().getTime()
  }

</script>

注意 ！

本插件原使用Vue3编写，经过语法降级后。作者测试Vue2也可以正常使用，但是您可能会遇到一些兼容性问题，您可以尝试自行解决，如无能为力也可以提在评论区。

属性

事件

CSS变量

控制插件主题请直接修改CSS变量。

  /** 控制提示文字的位置 **/
--bottom-offset:

10
%;
  /** 控制提示文字的大小 **/
--bottom-font-size:

18
rpx

;
/** 选中时字体的颜色**/
--seletct--text-color: white

;
/** 选中时背景颜色 **/
--seletct--background-color: #005ceeff

;
/** 处于区间的字体颜色 **/
--in-range--text-color: #005ceeff

;
/** 处于区间的背景颜色 **/
--in-range--background-color: #f2f6fc

;
/** 限制的字体颜色 **/
--limit--text-color: #a8abb2

;
/** 限制的背景颜色 **/
--limit--background-color: #f5f7fa

;
/** current的背景颜色 **/
--current--background-color: #e4edfe

;
/** current的字体颜色 **/
--current--text-color: #7994b2

;

如果这个插件有帮助到你，不妨给个好评吧！

你的好评是给作者的最大鼓励🫡