React-datetime 日期和时间选择器

2021-03-03 0 By admin

这是一个日期和时间选择器,可以像 React 的组件一样使用它。这个模块提供了各种配置属性和参数,自定义设计能力强。

一、安装和使用

1.1、模块安装

npm install --save react-datetime

1.2、模块使用

react-datetime 依赖 React.js 和 Moment.js;这两个依赖不会自动安装,需要您自行安装。

二、API 说明

Name 类型 默认值 说明
value Date new Date() 表示组件所选择的日期,作为一个 controlled component。其 Prop 由 Moment.js 解析,可以使用字符串或 Moment 对象。
initialValue Date new Date() 表示组件所选择的日期,作为一个 uncontrolled component。其 Prop 由 Moment.js 解析,可以使用字符串或 Moment 对象。
initialViewDate Date new Date() 定义在打开日历时显示的月/年/时间。该 Prop 由Moment.js解析,可以使用日期string或moment对象。如果要在组件初始化后设置查看日期,请参见 imperative API。
initialViewMode string or number ‘days’ 日期时间选择器第一次显示时其展示模式。如果要在组件初始化后设置视图模式,请参见 imperative API。
updateOnView string Intelligent guess 默认情况下,我们可以浏览年份和月份,而无需实际更新所选日期。
只有进入一个称为“更新视图(updating view)”的视图时,我们才在该视图中进行选择,并且值将被更新,从而触发onChange事件。
默认情况下,更新视图将根据dateFormat设置创建,因此如果我们的日期只显示月份而从不显示天,那么更新将在months视图中完成。
如果我们设置updateOnView=“time”,选择一天将导航到时间视图。时间视图总是更新选定的日期,而不是导航。
如果closeOnSelect={true},则在updateOnView定义的视图中进行选择将关闭日历。
dateFormat boolean or string true 定义日期格式。它接受任何Moment.js日期格式(非本地化格式)。
如果true将使用当前语言环境的默认值显示日期。
如果false禁用了日期选择器,并且该组件可用作时间选择器。
timeFormat boolean or string true 定义时间格式。它接受任何Moment.js时间格式(非本地化格式)。
如果true将使用当前语言环境的默认值显示时间。
如果false禁用了时间选择器,并且该组件可以用作日期选择器。
input boolean true 是否显示输入字段以手动编辑日期。
open boolean null 是打开还是关闭选取器。如果未设置,则react-datetime将在输入焦点上打开日期选择器,并在外部单击时将其关闭。
locale string null 手动设置react-datetime实例的语言环境。需要加载Moment.js语言环境才能使用,请参阅i18n。
utc boolean false 如果为true,则Moment.js将输入时间值解释为UTC。否则,它们将默认为用户的本地时区。
displayTimeZone string null 当您的项目需要手动设置时区时使用。
onChange function empty function 日期更改时回调触发器。如果输入中的日期有效,回调将接收选定的矩对象作为唯一参数。如果输入中的日期无效,回调将接收输入值(字符串)。
onOpen function empty function 当用户打开日期选择器时的回调触发器。
onClose function empty function 日历关闭时的回调触发器。如果输入中的日期有效,回调将接收选定的矩对象作为唯一参数。如果输入中的日期无效,回调将返回输入中的值。
onNavigate function empty function 视图模式更改时回调触发器。回调只接收选定的视图模式字符串(年、月、日或时间)作为参数。
onBeforeNavigate function ( nextView, currentView, viewDate ) => nextView 允许截获日历视图的更改。
onNavigateBack function empty function 当用户导航到上一个月、年时触发回调。
onNavigateForward function empty function 当用户导航到下一个月、年时触发回调。
className string or string array 最外层标记元素的额外类名。
inputProps object undefined 为组件的输入元素定义其他属性。例如:onClick,placeholder,disabled,required,name和className(className 设置为输入元素的类属性)。
isValidDate function () => true 定义可以选择的日期。该函数接收(currentDate, selectedDate)并应返回true或false;表示currentDate是否有效。
renderInput function undefined 替换输入元素的呈现。该函数具有以下参数:props为输入计算的默认值,openCalendar(一个用于打开日历的函数)和closeCalendar(一个用于关闭日历的函数)。必须返回React组件或null。
renderView function (viewMode, renderDefault) => renderDefault() 自定义日历的呈现方式。接受的函数接收将要呈现的视图的类型’years’, ‘months’, ‘days’, ‘time’以及呈现react-datetime的默认视图的函数,这样可以包装原始视图并添加我们自己的标记或用我们自己的代码完全覆盖它。请参阅自定义Datepicker外观。
renderDay function DOM.td(day) 自定义在日期选择器中显示日期的方式。接受的函数具有selectedDate,当前日期和props为该单元格计算的默认值,并且必须返回React组件。请参阅自定义Datepicker外观。
renderMonth function DOM.td(month) 自定义月份在月份选择器中显示的方式。接受的函数具有selectedDate,当前日期和为该props单元格计算的默认值,month并year显示,并且必须返回React组件。请参阅自定义Datepicker外观。
renderYear function DOM.td(year) 自定义年份在年选择器中的显示方式。接受的函数具有selectedDate,当前日期和为该props单元格计算的默认值(year要显示),并且必须返回一个React组件。请参阅自定义Datepicker外观。
strictParsing boolean true 解析输入时是否使用Moment.js的严格解析。
closeOnSelect boolean false 当true,如果某天已经被选中,日期选择器会自动关闭。
closeOnTab boolean true 当true和输入成为焦点时,tab按键将关闭日期选择器。
timeConstraints object null 向时间选择器添加一些约束。它接受一个格式为{hours:{min:9,max:15,step:2}的对象,这个例子意味着hours不能低于9,也不能高于15,每次点击按钮时,它都会改变加或减2个小时。可以将约束添加到小时、分钟、秒和毫秒。
closeOnClickOutside boolean true 当日历处于打开状态且closeOnClickOutside为true(其默认值)时,单击日历外部区域关闭日历。如果是 false 则日志保持打开。

三、命令式(Imperative) API

除了控制所选的日期,还有一个导航,通过月,年,几十年来响应时间为我们处理。我们可以干涉它,通过使用prop onBeforeNavigate停止视图转换,但是我们也可以使用一些命令式方法导航到特定的视图和日期。
为此,我们需要ref使用引用来创建组件。

//这就是渲染选择器的代码
<DateTime ref="datetime" />
// ...一旦渲染,我们就可以使用 Imperative API 
// //让我们看
this.refs.datetime.navigate('years')

可用的方法有:

  1. navigation(viewMode):设置日历当前显示的视图。react datetime附带的视图模式有年、月、日和时间,但是您也可以导航到可以使用renderView属性定义的自定义模式。
  2. setViewDate(date):设置当前显示在日历中的日期。它独立于所选日期,用于在日历中导航月份或日期。它接受当前区域设置格式的字符串、日期或时刻对象作为参数。