帮酷LOGO
  • 显示原文与译文双语对照的内容
React-Bootstrap based date picker.

  • 源代码名称:react-bootstrap-date-picker
  • 源代码网址:http://www.github.com/pushtell/react-bootstrap-date-picker
  • react-bootstrap-date-picker源代码文档
  • react-bootstrap-date-picker源代码下载
  • Git URL:
    git://www.github.com/pushtell/react-bootstrap-date-picker.git
  • Git Clone代码到本地:
    git clone http://www.github.com/pushtell/react-bootstrap-date-picker
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/pushtell/react-bootstrap-date-picker
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 基于bootstrap的日期选择器。

    NPM VersionCircle CICoverage StatusDependency StatusNPM Downloads

    请参见 pushtell 。github 。/react-bootstrap-date-picker 演示。

    Demo

    请在 GitHub ★ 。

    在生产中使用这里 MODULE? 我们很高兴听到。

    table-内容

    安装

    react-bootstrap-date-picker 与响应 0.14. x 和 0.15. x. 兼容

    npm install react-bootstrap-date-picker

    用法

    var DatePicker =require("react-bootstrap-date-picker");var App =React.createClass({
     getInitialState:function(){
     var value =newDate().toISOString();
     return {
     value: value
     }
     },
     handleChange:function(value, formattedValue) {
     this.setState({
     value: value, // ISO String, ex:"2016-11-19T12:00:00.000Z" formattedValue: formattedValue // Formatted String, ex:"11/19/2016" });
     },
     componentDidUpdate:function(){
     // Access ISO String and formatted values from the DOM.var hiddenInputElement =document.getElementById("example-datepicker");
     console.log(hiddenInputElement.value); // ISO String, ex:"2016-11-19T12:00:00.000Z"console.log(hiddenInputElement.getAttribute('data-formattedvalue')) // Formatted String, ex:"11/19/2016" },
     render:function(){
     return<FormGroup><ControlLabel>Label</ControlLabel><DatePicker id="example-datepicker" value={this.state.value} onChange={this.handleChange} /><HelpBlock>Help</HelpBlock></FormGroup>;
     }
    });

    API参考

    <DatePicker/>

    DatePicker组件呈现为一个响应引导程序 InputGroup 。

    InputGroup 属性传递到输入组。

    • 属性:

      • value - 表示当前值的日期字符串。
        • 可选
        • 类型:string
        • 示例:"2016-05-19T12:00:00.000Z"
      • defaultValue - 表示默认值的日期字符串。 不能用'值'设置。
        • 可选
        • 类型:string
        • 示例:"2016-05-19T12:00:00.000Z"
      • minDate - 要设置最低允许日期值的日期字符串。
        • 可选
        • 类型:string
        • 示例:"2016-05-19T12:00:00.000Z"
      • maxDate - 设置允许的最高日期值的日期字符串。
        • 可选
        • 类型:string
        • 示例:"2016-05-19T12:00:00.000Z"
      • style - 传递给 FormControl 输入元素的样式对象。
        • 可选
        • 类型:object
        • 示例:{width:"100%"}
      • className - 类 NAME 传递给 FormControl 输入元素。
        • 可选
        • 类型:string
        • 示例:example-class
      • autoComplete - 传递给 FormControl 输入元素的自动完成属性。
        • 可选
        • 类型:string
        • 示例:off
      • autoFocus - 组件是否以焦点开始。
        • 可选
        • 类型:bool
        • 示例:false
      • disabled - 是否禁用组件。
        • 可选
        • 类型:bool
        • 示例:false
      • onChange - 焦点回调函数。
        • 可选
        • 类型:function
        • 的回调参数:
          • value - 表示所选值的日期字符串。
            • 类型:string
            • 示例:"2016-05-19T12:00:00.000Z"
          • formattedValue - 表示由 dateFormat 属性定义的格式化值的字符串。
            • 类型:string
            • 示例:"05/19/2016"
      • onFocus - 焦点回调函数。
        • 可选
        • 类型:function
        • 的回调参数:
          • event - 焦点事件。
            • 类型:event
      • onBlur - 模糊回调函数。
        • 可选
        • 类型:function
        • 的回调参数:
          • event - 模糊事件。
            • 类型:event
      • dateFormat - 日期格式。任何 DD,MM,YYYY和分隔符的组合。
        • 可选
        • 类型:string
        • 示例:"MM/DD/YYYY""YYYY/MM/DD""MM-DD-YYYY" 或者 "DD MM YYYY"
      • clearButtonElement - 清除按钮使用的字符或者组件。
        • 可选
        • 类型:string 或者 ReactClass
        • 示例:"×"
      • showClearButton - 切换clearButton的可见性
        • 可选
        • 类型:bool
        • 示例:false
      • onClear - 定义单击清除按钮时发生的情况。
        • 可选
        • 类型:function
      • previousButtonElement - 日历按钮上一个要使用的字符或者组件。
        • 可选
        • 类型:string 或者 ReactClass
        • 示例:"<"
      • nextButtonElement - 日历按钮下一个要使用的字符或者组件。
        • 可选
        • 类型:string 或者 ReactClass
        • 示例:">"
      • cellPadding - 日历日期单元格的CSS padding 值。
        • 可选
        • 类型:string
        • 示例:"2px"
      • dayLabels - 日历中使用的日期名称的array 。 星期日开始。
        • 可选
        • 类型:array
        • 示例:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      • monthLabels - 日历中使用的月份名称的array 。
        • 可选
        • 类型:array
        • 示例:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
      • calendarPlacement - popover日历的覆盖位置。
        • 可选
        • 类型:string 或者 function
        • 示例:"top"
      • calendarContainer - popover日历的覆盖容器。 将日期选取器放置在滚动容器中时,将这里道具设置为滚动容器的某个祖先。
        • 可选
        • 类型: 一个DOM元素或者一个组件
        • 示例:document.body
      • weekStartsOnMonday - 过时的使用 weekStartsOn
      • weekStartsOn - 使日历的一周在指定的日期开始。 0 = 星期日,1 = 星期一等。
        • 可选
        • 类型:number
        • 示例:4
      • showTodayButton - 切换当前按钮的可见性。
        • 可选
        • 类型:boolean
        • 示例:false
      • todayButtonLabel - 今日按钮的标签
        • 可选
        • 类型:string
        • 示例:"Today"
      • customControl - 用你自己的组件覆盖默认的FormControl 组件。
        • 可选
        • 类型:React.Component
        • 示例:<CustomControl/>
    • 方法:

    测试

    浏览器覆盖

    在下面的浏览器中,Karma 测试是在 Browserstack上执行的:

    • IE 9,Windows 7
    • IE 10,Windows 7
    • IE 11,Windows 7
    • Opera ( 最新版本),Windows 7
    • Firefox ( 最新版本),Windows 7
    • Chrome ( 最新版本),Windows 7
    • Safari ( 最新版本),OSX Yosemite
    • Mobile Safari ( 最新版本),iPhone 6,iOS 8.3

    请让我们知道,如果这里有一个不同的配置,请告诉我们。

    运行测试

    本地:

    npm test

    Browserstack 上:

    BROWSERSTACK_USERNAME=YOUR_USERNAME BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY npm test



    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语