Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including md-date-range with all npm packages installed. Try it out:

var mdDateRange = require("md-date-range")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

md-date-range v1.0.1

快速选择时间组件

快速选择时间范围


基于 fish 时间组件开发的业务组件:快速选择时间范围

何时使用

  • 快速选择时间范围的时候

浏览器支持

IE 8+

安装

npm install md-date-range --save

运行

# 默认开启服务器,地址为 :http://local:8000/

# 能在ie9+下浏览本站,修改代码后自动重新构建,且能在ie10+运行热更新,页面会自动刷新
npm run start

# 构建生产环境静态文件,用于发布文档
npm run site

代码演示

.ant-input {
  border: 1px solid red;
}

快速选择时间

最简单的用法,通过onChange获取选中的时间范围

import "md-date-range/lib/style/";
import DateRange from "md-date-range";
class App extends React.Component {
  render() {
    return <DateRange onChange={(start, end) => console.log("onChange", start, end)} />;
  }
}
ReactDOM.render(<App />, mountNode);

自定义容器样式

通过设置style参数自定义容器样式

import "md-date-range/lib/style/";
import DateRange from "md-date-range";
class App extends React.Component {
  render() {
    return <DateRange style={{ backgroundColor: "gray1" }} />;
  }
}
ReactDOM.render(<App />, mountNode);

API

参数说明类型默认值是否必填
onChange时间范围变化时回调Function(start:moment, end:moment)-false
onDateRangeLoading初始化结束回调Function(start:moment, end:moment)-false
locale语言包Object-false
className容器节点样式类名称string-false
style容器节点样式Object-false
prefixCls组件样式类名称前缀string'md-date-range'false
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free