更新记录

1.0.1（2024-12-15） 下载此版本

解决周选择器点击起始日期和结束日期后样式丢失的问题。

1.0.0（2024-12-15） 下载此版本

第一个版本发布。

平台兼容性

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

文档

属性说明

属性名 类型 默认值 说明
model-value/v-model String、Number '' 开始日期
v-model:end-date String、Number '' 结束日期
start-format String yyyy-MM-dd 开始日期显示格式
start-value-format String '' 开始日期返回值格式，默认与开始日期显示格式相同
end-format String yyyy-MM-dd 结束日期显示格式
end-value-format String '' 结束日期返回值格式，默认与结束日期显示格式相同
start String、Number '' 最小值，可以使用日期的字符串(String)、时间戳(Number)
end String、Number '' 最大值，可以使用日期的字符串(String)、时间戳(Number)
border Boolean true 是否有边框
range-separator String '-' 开始日期与结束日期之间的分隔符
date-separator String '-' 开始日期、结束日期内部年月日之间的分隔符
start-placeholder String '' 开始日期的占位内容
end-placeholder String '' 结束日期的占位内容
disabled Boolean false 是否不可选择
clear-icon Boolean true 是否显示清除按钮
hide-second Boolean false 是否显示秒，只显示时分
@change EventHandle 确定日期时间时触发的事件，参数为前选择的周的周一日期和周日日期组成的数组，例如：['2024-12-02', '2024-12-08']
@maskClick EventHandle 点击遮罩层触发
@show EventHandle 弹窗弹出时触发

示例代码

<!-- html -->
<lk-week-picker
  start="2009-11-24"
  start-value-format="yyyy-MM-dd 00:00:00"
  range-separator="~"
  date-separator="."
  :end="today"
  :border="false"
  :clear-icon="false"
  :end-date="weekRange[1]"
  v-model="weekRange[0]"
  @change="rangeChange"
></lk-week-picker>
<!-- js -->
<script setup>
  import { reactive } from 'vue'

  const weekRange = reactive(['2024-12-02', '2024-12-08'])

  // 切换周
  const rangeChange = range => loadData(range)
</script>

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

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

加载更多...