react-datetime, 一个轻量级但完整的日期时间选择器响应组件

分享于 

16分钟阅读

GitHub

  繁體 雙語
A lightweight but complete datetime picker react component.
  • 源代码名称:react-datetime
  • 源代码网址:http://www.github.com/YouCanBookMe/react-datetime
  • react-datetime源代码文档
  • react-datetime源代码下载
  • Git URL:
    git://www.github.com/YouCanBookMe/react-datetime.git
    Git Clone代码到本地:
    git clone http://www.github.com/YouCanBookMe/react-datetime
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/YouCanBookMe/react-datetime
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    响应日期时间

    Build Statusnpm version

    同一 React.js 组件中的日期和时间选取器。 它可以同时用作 datepicker,timepicker或者同时使用。 它是高度可以定制的,甚至允许编辑毫秒的时间。

    这个项目作为一个 fork的,但是代码和API已经改变了很多。

    安装

    使用npm安装:

    npm install --save react-datetime

    使用纱线安装:

    yarn add react-datetime

    用法

    React.jsMoment.js 是响应日期时间的对等依赖项。 这些依赖项并没有随自动安装,但是你的项目需要安装它们才能使之工作。 然后你就可以像下面例子中那样使用 datepicker。

    require('react-datetime');...render:function() {
     return<Datetime />;
    }

    参见本示例工作。

    为让它工作,不要忘记添加 CSS样式表。

    API

    名称类型默认说明
    Datenew Date()以组件的形式表示选择日期,以将它的用作控件组件的名称。 这里道具由 Moment.js, 解析,因此可以使用日期 string 或者 moment 对象。
    Datenew Date()表示组件的选择日期,以将该组件用作不受控制的组件的 这里道具由 Moment.js, 解析,因此可以使用日期 string 或者 moment 对象。
    viewDateDatenew Date()表示在没有选定日期时打开日历时查看的月份。 这里道具由 Moment.js, 解析,因此可以使用日期 string 或者 moment 对象。
    boolean 或者 stringtrue定义日期的格式。 它接受任何 Moment.js 日期格式 ( 非本地化格式)。 如果 true 日期将使用当前区域设置的默认值显示。 如果 false 禁用,并且组件可以作为timepicker使用,请参见实用单元文档。
    boolean 或者 stringtrue定义时间的格式。 它接受任何 Moment.js 时间格式 ( 非本地化格式)。 如果 true 时间将使用当前区域设置的默认值显示。 如果 false 禁用timepicker且组件可以用作 datepicker,请参见可用的单元文档
    输入booleantrue是否显示输入字段以手动编辑日期。
    booleannull是否打开或者关闭选取器。 如果未设置,响应日期时间将打开输入焦点上的datepicker,并在单击外部关闭它。
    区域设置stringnull手动设置响应日期时间实例的区域设置。 需要加载 Moment.js 语言环境才能使用,请参见 i18n 文档
    booleanfalse当 true 时,输入时间值将被 Moment.js. 解释为 UTC ( 祖鲁时间),否则它们将默认为用户时区的本地。
    onChangefunction空函数日期更改时触发触发器。 如果输入中的日期有效,则回调接收选定的moment 对象作为参数。 如果输入中的日期无效,则回调将接收输入( 字符串)的值。
    onFocusfunction空函数当用户打开datepicker时的回调触发器。 回调接收类型为SyntheticEvent的事件。
    function空函数当用户单击输入之外的内容时触发回调触发器,模拟常规的onblur。 如果输入中的日期有效,则回调接收选定的moment 对象作为参数。 如果输入中的日期无效,则返回回调。
    onViewModeChangefunction空函数视图模式更改时的回调触发器。 回调接收所选视图模式字符串(。yearsmonthsdays 或者 time ) 作为参数。
    onNavigateBackfunction空函数当用户定位到上一个月,年或者十年时,回拨触发器。 回调接收('月','的金额和类型') 作为参数。
    onNavigateForwardfunction空函数当用户定位到下一个月,年或者十年时,回拨触发器。 回调接收('月','的金额和类型') 作为参数。
    viewModestring 或者 number'days'显示选择器时显示的默认视图(。'years''months''days''time' )。
    string 或者 string array''最外层标记元素的额外类 NAME。
    inputPropsobjectundefined为组件的输入元素定义附加属性。 例如:onClickplaceholderdisabledrequirednameclassName ( className 设置输入元素的类属性)。 请参见自定义输入外观。
    isValidDatefunction() => true定义可以选择的日期。 函数接收 (currentDate, selectedDate),并返回 true 或者 false,不管 currentDate 是有效的还是不正确的。 请参见可选日期
    renderInputfunctionundefined替换输入元素的呈现。 函数具有以下参数: 输入。openCalendar (。打开日历的函数) 和 closeCalendar ( 关闭日历的函数)的默认计算 props。 必须返回一个响应组件或者 null。 请参见自定义输入外观。
    renderDayfunctionDOM.td(day)自定义在dayPicker中显示日期的方式。 接受函数具有 selectedDate。当前日期和单元格的默认计算 props,并且必须返回一个响应组件。 请参见自定义Datepicker外观。
    renderMonthfunctionDOM.td(month)自定义monthpicker中显示月份的方式。 接受函数具有 selectedDate,当前日期和默认计算的props,要显示的monthyear,必须返回React组件。 请参见自定义Datepicker外观。
    renderYearfunctionDOM.td(year)自定义年份选取器显示年份的方式。 接受函数有 selectedDate。当前日期和单元格的默认计算 props。要显示的year,并且必须返回一个响应组件。 请参见自定义Datepicker外观。
    strictParsingbooleantrue是否使用的moment严格解析解析输入时。
    closeOnSelectbooleanfalsetrue,一旦被选中,datepicker将自动关闭。
    closeOnTabbooleantruetrue 和输入集中在一起时,按 tab 键将关闭 datepicker。
    timeConstraintsobjectnull向timepicker添加一些约束。 它接受一个带有格式的object{ hours: { min: 9, max: 15, step: 2 }} 这个示例意味着小时不能低于 9 和高于 15,而且每次按下按钮时都会改变添加或者减去 2 小时。 约束可以添加到 hoursminutessecondsmilliseconds 中。
    disableOnClickOutsidebooleanfalsetrue,当点击事件在组件外部触发时打开 datepicker。 false 时,关闭它。

    i18n

    响应日期时间支持不同的语言和日期格式。 React使用 Moment.js 格式化日期,更改日历语言的简单方式是更改 Moment.js 区域设置。

    var moment =require('moment');require('moment/locale/fr');// Now react-datetime will be in french

    如果加载了多个语言环境,可以使用 prop locale 定义实例使用什么语言。

    <Datetime locale="fr-ca"/><Datetime locale="de"/>

    在这里,你可以看到 i18n 示例工作的例子。

    自定义输入外观

    自定义输入的方式是有可能的。 最简单的方法是提供 inputProps,它被分配给组件中默认的<input/> 元素。

    <Datetime inputProps={{ placeholder:'N/A', disabled:true }}>

    或者,如果需要比 <input/> 元素呈现不同的内容,可以提供调用的renderInput 函数。

    var MyDTPicker =React.createClass({
     render:function(){
     return<Datetime renderInput={ this.renderInput } />;
     },
     renderInput:function( props, openCalendar, closeCalendar ){
     functionclear(){
     props.onChange({target: {value:''}});
     }
     return (
     <div><input {...props} /><button onClick={openCalendar}>open calendar</button><button onClick={closeCalendar}>close calendar</button><button onClick={clear}>clear</button></div> );
     },
    });

    自定义Datepicker外观

    可以自定义datepicker在日历中显示日期。月份和年份的方式。 要适应每个需要的日历,可以使用这些道具 renderDay(props, currentDate, selectedDate) , renderMonth(props, month, year, selectedDate)renderYear(props, year, selectedDate) 自定义每个渲染方法的输出。

    var MyDTPicker =React.createClass({
     render:function(){
     return<Datetime
     renderDay={ this.renderDay }
     renderMonth={ this.renderMonth }
     renderYear={ this.renderYear }
     />;
     },
     renderDay:function( props, currentDate, selectedDate ){
     return<td {...props}>{ '0'+currentDate.date() }</td>;
     },
     renderMonth:function( props, month, year, selectedDate ){
     return<td {...props}>{ month }</td>;
     },
     renderYear:function( props, year, selectedDate ){
     return<td {...props}>{ year %100 }</td>;
     }
    });

    你可以在这里看到自定义日历。

    方法参数

    指定可用单位

    你可以通过使用 dateFormattimeFormat 来筛选你希望用户选择的内容,比如 来创建 timepicker。yearPicker等。

    在本例中,组件被用作 timepicker,并且只能用于选择一个时间。

    <Datetime dateFormat={false} />

    这里是timepicker的工作示例。

    在本例中,你只能选择一年和月。

    <Datetime dateFormat="YYYY-MM" timeFormat={false} />

    仅在这里选择年和月的工作示例。

    可选日期

    如果用户不允许在日历中选择日期,则可以禁用日期。 使用 prop isValidDate 来完成这一操作,它在表单中接受一 function(currentDate, selectedDate) 其中两个参数都是矩对象。 函数应返回 true的可选日期,对于禁用的日期则返回 false

    在示例 below 中,在今天之前所有的日期都被禁用了。

    // Let's use the static moment reference in the Datetime componentvar yesterday =Datetime.moment().subtract( 1, 'day' );varvalid=function( current ){
     returncurrent.isAfter( yesterday );
    };<Datetime isValidDate={ valid } />

    在这里禁用的工作示例。

    也可以在周末禁用 ,如下面的示例所示。

    varvalid=function( current ){
     returncurrent.day() !==0&&current.day() !==6;
    };<Datetime isValidDate={ valid } />

    在这里停用的周末的工作示例。

    与app一起使用的用法

    这里项目包括 1.8版和 2.0版的typings。 不需要附加 typings。

    在中找到了 1.8的Typings,在中找到了 2.0的Typings。

    import*asDatetimefrom'react-datetime';classMyDTPickerextendsReact.Component<MyDTPickerProps, MyDTPickerState> {
     render() JSX.Element {
     return<Datetime />;
     }
    }

    捐赠

    有关如何贡献的信息,请参见贡献的文件。

    插件开发

    npm run dev

    这将启动一个基于 example/example.js的本地 webpack-dev-server,其中大多数开发都可以完成。

    如果你想使用组件 inside 开发一个响应应用程序,我们建议你使用 react-datetime-playground应用程序。

    变更日志

    MIT许可证


    COM  Light  react  component  日期  Complete  
    相关文章