npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@alicd/crui-date-picker-field

v0.0.12

Published

输入或选择日期的控件。当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。

Downloads

7

Readme


category: Components
type: UI Views
component: Form
chinese: 日期选择框
english: DatePickerField
source: next-date-picker

输入或选择日期的控件。当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。

API

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | size | 输入框尺寸可选值:'small', 'medium', 'large' | Enum | 'medium' | | state | 输入框状态可选值:'success', 'error' | Enum | - | | defaultVisibleMonth | 默认展现的月签名:Function() => MomentObject返回值:{MomentObject} 返回包含指定月份的 moment 对象实例 | Function | - | | value | 日期值(受控)moment 对象 | custom | - | | defaultValue | 初始日期值,moment 对象 | custom | - | | format | 日期值的格式(用于限定用户输入和展示) | String | 'YYYY-MM-DD' | | showTime | 是否使用时间控件,传入 TimePicker 的属性 { defaultValue, format, ... } | Object/Boolean | false | | resetTime | 每次选择日期时是否重置时间(仅在 showTime 开启时有效) | Boolean | false | | disabledDate | 禁用日期函数签名:Function(日期值: MomentObject) => Boolean参数:日期值: {MomentObject} null返回值:{Boolean} 是否禁用 | Function | () => false | | footerRender | 自定义面板页脚签名:Function() => Node返回值:{Node} 自定义的面板页脚组件 | Function | () => null | | onChange | 日期值改变时的回调签名:Function() => MomentObject/String返回值:{MomentObject/String} 日期值 | Function | func.noop | | onOk | 点击确认按钮时的回调签名:Function() => MomentObject/String返回值:{MomentObject/String} 日期值 | Function | func.noop | | disabled | 是否禁用 | Boolean | - | | hasClear | 是否显示清空按钮 | Boolean | true | | open | 弹层显示状态 | Boolean | - | | defaultOpen | 弹层默认是否显示 | Boolean | - | | onOpenChange | 弹层展示状态变化时的回调签名:Function(open: Boolean, reason: String) => void参数:open: {Boolean} 弹层是否显示reason: {String} 触发弹层显示和隐藏的来源 | Function | func.noop | | popupTriggerType | 弹层触发方式可选值:'click', 'hover' | Enum | 'click' | | popupAlign | 弹层对齐方式 | String | 'tl tl' | | popupContainer | 弹层容器签名:Function(target: Element) => Element参数:target: {Element} 目标元素返回值:{Element} 弹层的容器元素 | Function | - | | popupStyle | 弹层自定义样式 | Object | - | | popupClassName | 弹层自定义样式类 | String | - | | popupProps | 弹层其他属性 | Object | - | | label | label 标签的文本 | ReactNode | - | | labelCol | label 标签布局,通 <Col> 组件,设置 span offset 值,如 {span: 8, offset: 16},该项仅在垂直表单有效 | Object | - | | help | 提示信息,如不设置,则会根据校验规则自动生成. 如果设置会受控(ps: 可以利用这点自定义错误位置,详细看demo自定义错误) | ReactNode | - | | validateStatus | 校验状态,如不设置,则会根据校验规则自动生成可选值:'''success'(成功)'error'(失败)'loading'(校验中) | Enum | - | | hasFeedback | 配合 validateStatus 属性使用,是否展示校验状态图标, 目前只有Input支持 | Boolean | false | | wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | Object | - | | extra | 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 位于错误信息后面 | ReactNode | - | | inputStyle | 表单输入框自定义内联样式 | Object/String | null | | showValidateType | 应用于Field 类元素后,指定其展示错误的方式,可选值有 helptooltip 两种| String | help | | name | walle 模式下才支持 可以配合表单Form 收集表单元素的数据,要求表单必须指定 field 属性 | String | '' | | rules | walle 模式下才支持 配置表单规则,可以配置多个规则,可参考:async-validator,注意Form 表单必须配置field 属性才会生效 | Array | null | | x-bind | walle 模式下才支持 双向绑定某一个变量 | state | null |