KendoReact

反应DatePicker

  • 高度可定制和功能丰富,这个React DatePicker也将从日期格式和可访问性的挣扎中拯救你。
  • KendoReact库的一部分,连同100+专业UI组件与React为React建立,从地面上。
  • 快速开始与我们屡获殊荣的支持,详细的文档,交互式演示和教练领导的培训。
  • 概述

    React DatePicker组件KendoReact,为终端用户提供了高度可定制的界面,以输入和选择支持不同地区的日期。该组件有一个手动插入日期的输入元素,它还具有一个弹出式日历,以更直观和视觉上令人愉悦的方式选择日期。

    参见React DatePicker概述演示

    React DatePicker -概述,KendoReact UI库
  • 禁用DatePicker

    某些场景可能要求禁用KendoReact DatePicker,防止用户输入日期。禁用的DatePicker有一个清晰的可视化指示,表明组件已禁用,而不会影响应用程序其余部分的观感。

    参见禁用React DatePicker演示

    React DatePicker -禁用,KendoReact UI库
  • 默认值

    默认情况下,KendoReact DatePicker的值为空,日历弹出框是隐藏的。通过使用几个配置选项,可以提前设置React DatePicker的默认值,组件可以在弹出窗口打开的情况下初始呈现。

    参见React DatePicker默认值演示

    React DatePicker -默认值,KendoReact UI库
  • 集中的日期

    KendoReact DatePicker中的日历总是有一个焦点日期,这个日期被突出显示,并与日历上的其他日期呈现不同,默认情况下是今天的日期。要聚焦任何其他日期,只需将一个新日期传递给聚焦日期属性。

    参见React DatePicker聚焦日期演示

    焦点日期,KendoReact UI库
  • 日期限制

    开箱即用的KendoReact DatePicker可以处理未来或过去的任何日期。根据应用程序的需求,这个范围可能太宽了。这就是为什么可以将DatePicker配置为只允许特定范围内的日期,从而限制可以手动输入到组件中的日期,以及限制可以在日历中导航到的日期。

    参见React DatePicker日期限制演示

    DatePicker -日期限制,KendoReact UI库
  • 格式

    如何格式化日期的问题有很多答案,这就是标准日期和时间格式字符串发挥作用的地方。KendoReact DatePicker组件可以接受任何有效的日期格式字符串,甚至可以在需求需要时动态更新。

    参见React DatePicker格式演示

    DatePicker -格式,KendoReact UI库
  • 占位符

    在处理日期时,一个非常有用的特性是向用户确切地指示表单元素所期望的日期类型,这就是占位符发挥作用的地方。KendoReact DatePicker具有一些常用日期格式的简写设置,以及设置完全自定义的占位符格式的能力。

    参见React DatePicker占位符演示

    DatePicker -占位符,KendoReact UI库
  • 浮动标签

    React DatePicker支持添加浮动标签作为其输入的一部分。该特性在组件内显示一条初始消息,然后当用户输入时,该消息在组件外浮动。然后将浮动标签替换为组件的掩码,以确保用户知道他们应该遵守的内容格式。

    参见React DatePicker浮动标签演示

    React DatePicker浮动标签
  • 周编号列

    作为内置React Calendar组件的一部分,KendoReact DatePicker有一个配置选项,可以显示或隐藏日历中显示的下一周的星期数。

    参见React DatePicker周编号列演示

    React DatePicker -周列,KendoReact UI库
  • 自定义渲染

    虽然KendoReact DatePicker中的许多可用配置选项都与通过快速配置使DatePicker成为您自己的DatePicker有关,但有时可能需要更深层次的定制。考虑到这一点,KendoReact DatePicker为UI组件的每个方面提供了自定义渲染器,包括DateInput, Calendar, PopUp, ToggleButton等。这允许开发人员完全控制KendoReact DatePicker的每个部分的外观和感觉。

    参见React DatePicker自定义渲染演示

  • 形式支持

    React DatePicker是一个完美的组件,可以用于需要选择日期的任何形式。除了默认的行为外,这个React UI组件还具有样式和属性,可以将组件标记为无效,KendoReact DatePicker可以很容易地集成到普通HTML表单元素、KendoReact表单组件或任何其他React表单库中。

    参见React DatePicker表单支持演示

  • 全球化

    KendoReact DateInput组件支持开箱即用的全球化,这意味着日期占位符和日期的格式可以根据用户的语言环境更改,而不需要手动重新配置React组件。

    参见React DateInput全球化演示

    React DatePicker -全球化,KendoReact UI库
  • 受控和非受控模式

    默认情况下,KendoReact DatePicker处于未受控状态,这意味着绑定到组件的表单数据由DOM本身处理。但是,当表单数据由React组件本身处理时,让DatePicker在受控模式下工作,只需定义组件的日期值就可以轻松完成。

    参见React DatePicker受控模式和非受控模式演示

  • 键盘导航

    KendoReact DatePicker有几种不同的选择日期的方式,只需使用键盘导航。这包括输入日期、用方向键增加日期的每个槽位的值或打开日历并遍历显示的天数以选择特定的日期。

    参见React DatePicker键盘导航演示

  • 可访问性

    创建可访问的React UI组件是KendoReact的核心概念,DatePicker当然也不例外!这就是为什么DatePicker开箱即用,符合Section 508和WAI-ARIA标准,并符合WCAG 2.0的AAA级评级。

    参见React DatePicker辅助演示

    React可访问性- KendoReact

所有KendoReact组件

弹出

进度条

涟漪

调度器

滚动视图

可分类的

的周期

工具提示

TreeList

树状视图

上传

波bg

下一个步骤

访问我们的演示

看看KendoReact的实际操作,看看它可以做多少开箱即用的工作。

看到价格

购买一个单独的KendoReact许可证,或对待自己的Kendo UI,我们完整的JavaScript包。

开始免费试用

尝试有专门技术支持的KendoReact。

Baidu
map