日期范围选择框,超级灵活,基于 Ant Design 实现
zjh1943
2022.12.01 10:26发布于组件库
88312
一个用来选择日期(或时间)范围的组件,基于 Ant Design 的 RangePicker 实现。

介绍

AntdDatePicker(Github地址)是一个用来选择时间范围的 Mendix Widget,实现了 Ant Design 中的 RangePicker 的绝大部分接口。
点击这个在线 Demo可在线预览该组件的特性。

DateRangePicker.png

功能特性

  1. 支持多种时间单位的选择,包括:date, week, month, quarter, year.
  2. 支持自定义日期显示格式,比如:yyyy-DD-mm, dddd-DD-mm hh:MM:ss.
  3. 支持添加常用快捷按钮,一键选择时间段。
  4. 支持精确到时分秒的时间段选择。
  5. 支持自定义不可选择的日期。
  6. 支持定义多国语言。
  7. 支持 Mendix 的 Validation Feedback 功能。

快速安装和使用

将该组件添加到 Mendix Project 中.

  1. 这里下载 mpk 文件.
  2. 把 mpk 文件复制到你的 Mendix Project 目录 {YourMendixProjectFolder}/widgets/.
  3. 用 Mendix Studio Pro 打开你的 Mendix Project,然后点击菜单 Menu > App > Synchronize App Directory.

快速配置组件。

  1. 选择任意页面,向页面添加一个 DataView,并为 DataView 设置好 Datasourcequickusestep1.png
  2. 向上述 DataView 中添加 Antd Date Range Picker 组件。可以从 Mendix Studio Pro 的右侧 Toolbox 中找到。quickusestep2.png
  3. 为该组件设置必要的属性。包括: Picker Type, Start time, End time, On value change :
    • 设置 Picker type。可选择默认的 Date
    • 设置 Start timeEnd time 为实体的两个属性。用来设置和读取组件的开始和结束时间。
    • 设置 On value changeNanoflow,新建一个 Nanoflowquickusestep3.jpg
    • 在该 Nanoflow 中读取和打印 Start timeEnd time 属性。quickusestep4.png
  4. 运行。

Demo 项目

  1. 你可以在这里访问在线 demo。
  2. 也可以从这里下载 demo project,在自己的 Mendix Studio Pro 上启动运行。

详细配置说明

General

Properties to control the most important behaviors or display of the widget. You will definitely use most of these properties when you add this widget into a page.

propertiesgeneral.jpg

  • Picker type. Support values: date, week, month, quarter, year. If you set it as quarter,you picker will display like this: renderresultpickertypequarter.png
  • Format. The format of DateTime value shown on the input frame. e.g. YYYY/MM/DD HH:mm:ss.
  • Start time. The start time value. You need to set a attribute of a entity.
  • End time. The end time value. You need to set a attribute of a entity.
  • On value Change. Will be triggered when eithter start value or end value is changed.
  • Show time. Whether show time picker on the picker pannel. If yes, you’d better add “HH:mm:ss” to the format property to show the time part. It looks like this: renderresultshowtime.png
  • Plannel placement. On which place is the picker pannel placed to the input frame. support values like: Bottom Left, Bottom Right, Top Left, Top Right.

Advanced

Properties to control the behavior of the widget, which is not must for normal using.

propertiesadvanced.jpg

  • Main.
    • Allow start time empty.
    • Allow end time empty.
    • Auto focus. Whether auto get focus when shown.
    • Input readonly. Set the input as readonly.So that, when on mobile device, the virtual keyboard will not be open.
  • Locale.
    • Locale. Set the display language. Currently only support zh_CN and en_US.
  • Picker Open State.
    • Picker open. An attribute to control the open status of the picker.
    • On open change. Will be triggered when the picker pannel is opened or closed.
  • Picker Value. ( not support any more)
    • Default start time. The default start time value on the picker pannel.
    • Default end time. The default end time value on the picker pannel.
  • Disable Date.
    • Disable mode. Disable some dates, so that some invalid dates can not be choosen by user.
      • ‘Off’ means no date will be disabled.
      • ‘Positive’ means the dates you set below are the only available dates.
      • ‘Negative’ means that all the dates excepet for the dates you set below are available.
    • Disable datasource.
    • Disable attribute.

Customize View

Properties to customize the view of the widget.

propertiescustomizeview.jpg

  • Common.
    • size. Input frame size. Support value: Small, Middle, Large.
    • Start placeholder.
    • End placeholder.
    • Allow clear. Whether show clear button.
    • Bordered. Whether show border out of the input frame.
    • Class of popup. CSS class of the popup DOM element.
  • Shortcuts.
    • Datasource of shortcuts. You can use this to dsiplay some shortcut buttons on the picker pannel to reduce the time to choose a right date.
    • Attribute of label. Label will be shown on the shortcut button.
    • Start date. When user click the shortcut button, the corresponding start date will be selected.
    • End date. When user click the shortcut button, the corresponding end date will be selected.
  • Custom Pannel Footer
    • Show custom footer. Whether show additional widgets on the footer of the picker pannel.
    • Custom pannel footer. Put additional widgets on the footer of the picker pannel.

antd RangePicker 的功能对比

这里列举了 antdRangePicker 的所有参数,并说明了该组件是否支持该属性,以及不支持的原因。如果想查看antd中原属性的含义,请移步这里

antd 组件参数 参数说明 是否支持 备注
allowEmpty 允许起始项部分为空 Y
dateRender 自定义日期单元格的内容。info 参数自 4.3.0 添加 N 小概率需求
defaultPickerValue 默认面板日期 N 在 Mendix 中没有实用价值
defaultValue 默认日期 N 在 Mendix 中没有实用价值
disabled 禁用起始项 Y
disabledTime 不可选择的时间 Y
format 展示的日期格式 Y
presets 预设时间范围快捷选择 Y
renderExtraFooter 在面板中添加额外的页脚 Y
separator 设置分隔符 N 小概率需求
showTime 增加时间选择功能 Y
showTime.defaultValue 设置用户选择日期时默认的时分秒,例子 N 在 Mendix 中没有实用价值
value 日期 Y
onCalendarChange 待选日期发生变化的回调。info 参数自 4.4.0 添加 N 在 Mendix 中没有实用价值
onChange 日期范围发生变化的回调 Y
allowClear 是否显示清除按钮 Y
autoFocus 自动获取焦点 Y
bordered 是否有边框 Y
className 选择器 className Y
popupClassName 额外的弹出日历 className Y
inputReadOnly 设置输入框为只读(避免在移动设备上打开虚拟键盘) Y
locale 国际化配置 Y 目前仅支持 zh_CN, en_US
open 控制弹层是否展开 Y
picker 设置选择器类型 Y
placeholder 输入框提示文字 Y
placement 选择框弹出的位置 Y
popupStyle 额外的弹出日历样式 N 小概率需求
size 输入框大小,large 高度为 40px,small 为 24px,默认是 32px Y
status 设置校验状态 Y
style 自定义输入框样式 Y
onOpenChange 弹出日历和关闭日历的回调 Y
markchan
点赞
收藏
手机查看
举报
12个评论
倒序看帖
仅看楼主
    LiangY
    2022.12.02 16:12 发布
    #1
    你好,请问可以把月份时候的英文转化成中文吗,我设置了zh-CN,好像没生效
    首赞
    评论
    举报
    zjh1943
    评论
    LiangY
    2022.12.04 11:47 发布
    作者
    好的,下周更新一个版本。另外,如果你对开源项目兴趣的话,可以尝试在 github 上提交 pull request,代码是开源的。
    首赞
    评论
    举报
    zjh1943
    评论
    zjh1943
    2022.12.04 18:59 发布
    作者
    bug 已经修复,请在 github 上下载最新的 1.0.1 版本。
    首赞
    评论
    举报
    白日梦想家
    2023.01.12 09:57 发布
    #2
    为什么我使用disableDate功能没有实现对应的功能呢?
    zjh1943
    点赞
    评论
    举报
    白日梦想家
    评论
    白日梦想家
    2023.01.12 10:07 发布
    positive模式下,我限制的数据没有作用,日期全都可以选择 negative模式下,所有日期全部不可选择
    首赞
    评论
    举报
    zjh1943
    评论
    白日梦想家
    2023.01.17 16:32 发布
    作者
    谢谢反馈,我今天检查了代码,确实有问题。现在已经修复!
    首赞
    评论
    举报
    zjh1943
    评论
    白日梦想家
    2023.01.17 16:34 发布
    作者
    请下载最新的 v1.0.3 版本
    首赞
    评论
    举报
    markchan
    2023.10.27 14:38 发布
    #3
    谢谢大侠分享。
    首赞
    评论
    举报
    by19880401
    2023.12.22 17:25 发布
    #4
    请问,你的结构化预览是怎么实现的?
    首赞
    评论
    举报
    zjh1943
    评论
    by19880401
    2024.01.12 15:58 发布
    作者
    官方有 API 支持在预览状态下更改组件的显示: https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-studio-apis-9/
    首赞
    评论
    举报
    闪闪
    2024.04.18 20:04 发布
    #5
    请问是否可以设置时间选择范围?例如只能选择8点到17点?分钟是否可以设置步长?例如0,15,30之类的?
    首赞
    评论
    举报
    zjh1943
    评论
    闪闪
    2024.04.22 13:19 发布
    作者
    目前不支持,可以从 Github 上下载源码,添加此特性。前提是 ant design 原来的组件库支持此特性。
    首赞
    评论
    举报