反应取日期器
用于反应的简单且可重复使用的日期拾取器组件( E)演示(中文(简体) )
安装
该软件包可通过国家预防机制安装:
npm install @deskpro/react-datepicker-hijri --save
您需要安装 react, (中文(简体) ), propTypes, (中文(简体) ), moment 财务报告和审定财务报表 moment-hijri 这些依附关系并未包含在套件中。 以下是在反应视图中如何使用 Datepicker 的简单实例 。 您还需要从此软件包中要求 CSS 文件( 或提供您的文件) 。 下面的例子说明,如果您的构建系统支持需要 CSS 文件(Webpack 是一个确实需要的文件),如何将 CSS 从此软件包中包含 .
import React from "react";
import DatePicker from "@deskpro/react-datepicker-hijri";
import moment from "moment-hijri";
import "@deskpro/react-datepicker-hijri/dist/react-datepicker.css";
// CSS Modules, react-datepicker-cssmodules.css
// import '@deskpro/react-datepicker-hijri/dist/react-datepicker-cssmodules.css';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: moment()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return (
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
calendar="hijri"
/>
);
}
}
配置
DatePicker的最基本用途可以用:
<DatePicker selected={this.state.date} onChange={this.handleChange} />
你用得着 onSelect 每次选定日历日期时点火的事件处理器
<DatePicker selected={this.state.date}
onSelect={this.handleSelect} //when day is clicked
onChange={this.handleChange} //only when value has changed
/>
onClickOutside 处理器对关闭在 inline 模式
见 这里 用于完整列出可能传递给组件的道具。 现举例说明: 主要网站。 。 。 .
计时器
您也可以通过添加 showTimeSelection prop 来包括取时器
<DatePicker
selected={this.state.date}
onChange={this.handleChange}
showTimeSelect
dateFormat="LLL"
/>
默认时段将每隔30分钟显示( 默认通过时间Interval proc)
更多如何使用取时器的例子在 主要网站
本地化
摘取日期者依赖 二. 国际化 使其显示组件本地化。 默认情况下,取出日期者会使用即刻设定的全球地块,即英语. 区划可以下列方式变更: 1
- 全球 拨打
moment.locale(lang) - 特定拾取器 通过提供
locale道具
位置可以随时间而进一步配置,其中包含各种 定制选项。 。 。 .
至0.23版本为止 weekdays 财务报告和审定财务报表 weekStart DatePicker道具已移除 。 相反,它们可以配置为 weekdaysMin 财务报告和审定财务报表 week.dow 瞬间本地化定制选项.
兼容性
反应
我们一直试图与最新版本的"回放"保持一致. 我们不能支持所有老版本的React.
最新兼容版本:
- 反应15.5或更新:所有以上反应-取日期者 v.0.40.0
- 反应 15.4.1:需要React-datepicker v0.40.0,新手不会工作(因为反应-点击出局依赖)
- React 0.14 或 更新: 全部以上 React-date pickers v0.13.0
- 反应0.13:反应-取日期器 v0.13.0
- 预反应0.13: 反应-取日期器 v0.6.2
浏览器支持
取枣器与Chrome,Firefox,和IE10+等最新版本相兼容.
不幸的是,在维持我们今后开发新功能的能力的同时,很难支持遗留的浏览器. 对于IE9支持,众所周知 类列表多填充 但它可能在未来的任何时刻改变或中断.
地方发展
这个 master 分支包含 Datepicker 组件的最新版本。 要启动你的例子应用程序,你可以运行 yarn start。这在 http://localhost:8080 上启动了一个简单的网络服务器.
你们可以跑 yarn test 执行测试套件和linters。 为了帮助您开发组件,我们设置了一些涵盖基本功能的测试(可参见: /tests) (中文(简体) ). 虽然我们是测试的大粉丝, 我们强烈建议您在添加新功能时加入测试.
实例
实例在文件文件夹内托管, 并运行在装入 Datepicker 的简单应用程序中 。 要用新的示例来扩展示例,您可以简单地重复现有的示例之一,并改变您示例的独特属性.
无障碍
键盘支持
- 左边:移动到前一天.
- 对:移至次日.
- 上来: 移动到前一周.
- 下来:移动到下个礼拜.
- 跳跃:去上个月.
- 密码:去下个月.
- 内容: 迁至上年.
- 结束:移去来年.
- 输入/ Esc/标签: 关闭日历. (Enter & Esc 呼叫防止过失)
许可证
版权 (c) 2017 HackerOne股份有限公司及个人贡献者. 持有麻省理工学院许可证,见 自由主义 完全许可.