更新记录

1.2.0(2024-03-04)

feat:

  1. 支持typeyear设值gap定义选择范围
  2. 支持typedate设置gap定义日期选择范围
  3. 支持typetime设置gap定义时间选择范围
  4. 支持typedatetime设置gap定义日期时间选择范围

1.1.0(2024-02-19)

fix:

  1. 修复仅展示年、仅展示月 默认值回显问题
  2. 修复仅展示年、仅展示月数据初始化问题;
  3. 修复仅展示年、仅展示月数据格式化问题;

feat:

  1. 新增类型typedatetime可选择年月日时分秒

refactor:

  1. 各列项数据都改成懒加载模式,方便处理gap范围数据限制;
  2. 优化默认值初始化逻辑;

1.0.0(2024-01-23)

feat:

  1. 新增类型time时间选择器;
  2. 新增类型date等日期选择器,可选择年、月、日;
  3. 支持数据自定义格式化;
查看更多

平台兼容性

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

ifun-date-picker

简单好用的日期、时间选择器;

  • 支持年、月、年月、年月日、时间、年月日时间选择
  • 支持gap定义日期、时间范围限制选择

组件依赖ifun-tree-picker,你也可以使用ifun-tree-picker自己实现封装。

ifun-tree-picker 说明文档

基本使用

<template>
    <view class="tree-select">
        <view class="component-item">
            <text class="component-item-label">ifun-date-picker</text>
            <view class="component-item-content">
                <ifun-date-picker type="date" value="2023-12" :gap="[2018,2033]" @ok="handleChange"></ifun-date-picker>
            </view>

        </view>
    </view>
</template>

<script>
    export default {
        name: "date-picker",
        data() {
            return {

            }
        },
        mounted() {

        },
        methods: {
            handleChange(value,selected){
                console.log(value,selected);
            }
        }
    }
</script>

<style>

</style>

props 说明

props 说明 备注
type 选择类型,可选之year\year-month\month\date String
value 初始化默认展示 String
gap 开始、结束定义年选择范围;时间定义小时范围 Array
valueFormat 格式化数据展示,默认内部格式化为YYYY-MM-DD Function

因为内部依赖ifun-tree-picker组件,所以支持除上述属性之外的所有属性定义。具体参考该组件

事件

事件名 说明 备注
ok 点击保存 参数为当前选择的日期时间数据(会被valueFormat格式)、选择的所有层级数据(数组)

隐私、权限声明

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

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

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

许可协议

MIT协议

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