更新记录

1.0.0(2022-01-09)

p-date-select 日期选择器

轻量的年月日选择器,依赖uniappuni-popup组件和picker-view组件,其中style用的scss,简单易用,可自己定制化改造。

  • 属性

title:选择器标题 String

  • 事件

@change:选择器点击确认后的回调,返回一个参数,为当前选中值

  • 使用

绑定ref,使用this.refs.xxx.open()即可打开弹窗


平台兼容性

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

日期选择器 pdd-date-picker

这是一个轻量的年月日选择器,简单易用,可自己定制化改造。支持的功能如下:

  1. 年月日选择
  2. 自定义标题
  3. 自定义按钮文案
  4. 自定义按钮文案颜色
  5. 自定义开始年份
  6. 自定义默认日期
  7. 插件代码清晰,不满意可以自己DIY

参数

参数 类型 默认值 说明
title String '请选择日期' 标题
limit Number 50 年份上限
leftText String 取消 左侧文字
leftTextColor String #4E5969 左侧文字颜色
rightText String 确认 右侧文字
rightTextColor String #1677FF 右侧文字颜色
startYear Number 1970 开始年份
defaultDate Array 1970 默认日期,分别对应年月日的索引,比如:[0,0,0] 对应1970-01-01

示例

<template>
    <view class="content">
        <button type="default" @click="open">打开选择器</button>
        <text>当前选择时间是:{{ dateValue }}</text>
        <!-- 日期选择器 -->
        <pdd-date-picker ref="pDataSelect" @change="handleChangeDate" :title="title" />
    </view>
</template>

<script>
    import pddDatePicker from '../../components/pdd-date-picker/index.vue'

    export default {
        components: {
            pddDatePicker
        },
        data() {
            return {
                title: '自定义标题',
                dateValue: ''
            }
        },
        methods: {
            /**
             * @description 打开选择框
             */
            open() {
                this.$refs.pDataSelect.open()
            },
            /**
             * @description 日期改变回调
             */
            handleChangeDate(date) {
                console.log(date)
                this.dateValue = date
            }
        }
    }
</script>

隐私、权限声明

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

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

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

许可协议

MIT协议

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