feat(DateRender.js): 新增type参数支持控制日期的不同展现方式,并完善示例和文档
This commit is contained in:
parent
1401010cec
commit
0b814f8470
|
@ -211,6 +211,8 @@ import InputRender from "bee-table/render/InputRender.js"
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||||
|
| type | 控制日期的显示格式,DatePicker、MonthPicker或者WeekPicker,暂时不支持RangePicker | string | "DatePicker" |
|
||||||
|
|
||||||
|
|
||||||
注:其他参数参见bee-datepicker组件参数配置
|
注:其他参数参见bee-datepicker组件参数配置
|
||||||
|
|
||||||
|
|
|
@ -18,10 +18,6 @@ import InputRender from "../../build/render/InputRender.js";
|
||||||
import DateRender from "../../build/render/DateRender.js";
|
import DateRender from "../../build/render/DateRender.js";
|
||||||
import SelectRender from "../../build/render/SelectRender.js";
|
import SelectRender from "../../build/render/SelectRender.js";
|
||||||
|
|
||||||
//日期控件引入
|
|
||||||
import DatePicker from "bee-datepicker";
|
|
||||||
import MonthPicker, { WeekPicker, RangePicker } from "bee-datepicker";
|
|
||||||
|
|
||||||
const format = "YYYY-MM-DD";
|
const format = "YYYY-MM-DD";
|
||||||
const format2 = "YYYY-MM";
|
const format2 = "YYYY-MM";
|
||||||
const format3 = "YYYY-MM-DD HH:mm:ss";
|
const format3 = "YYYY-MM-DD HH:mm:ss";
|
||||||
|
@ -197,6 +193,7 @@ class Demo14 extends React.Component {
|
||||||
return (
|
return (
|
||||||
<DateRender
|
<DateRender
|
||||||
value={text}
|
value={text}
|
||||||
|
type="MonthPicker"
|
||||||
isclickTrigger={true}
|
isclickTrigger={true}
|
||||||
format={format2}
|
format={format2}
|
||||||
onSelect={this.onSelect}
|
onSelect={this.onSelect}
|
||||||
|
|
|
@ -51,6 +51,8 @@ import InputRender from "bee-table/build/render/InputRender.js"
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||||
|
| type | 控制日期的显示格式,DatePicker、MonthPicker或者WeekPicker,暂时不支持RangePicker | string | "DatePicker" |
|
||||||
|
|
||||||
|
|
||||||
注:其他参数参见bee-datepicker组件参数配置
|
注:其他参数参见bee-datepicker组件参数配置
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React, { Component } from "react";
|
||||||
import Icon from "bee-icon";
|
import Icon from "bee-icon";
|
||||||
import DatePicker from "bee-datepicker";
|
import DatePicker from "bee-datepicker";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
|
||||||
|
|
||||||
export default class DateRender extends Component {
|
export default class DateRender extends Component {
|
||||||
state = {
|
state = {
|
||||||
|
@ -32,13 +33,29 @@ export default class DateRender extends Component {
|
||||||
};
|
};
|
||||||
render() {
|
render() {
|
||||||
const { value, editable } = this.state;
|
const { value, editable } = this.state;
|
||||||
let { isclickTrigger } = this.props;
|
let { isclickTrigger, type } = this.props;
|
||||||
let cellContent = "";
|
let cellContent = "";
|
||||||
|
let TComponent;
|
||||||
|
switch (type.toLowerCase()) {
|
||||||
|
case "monthpicker":
|
||||||
|
TComponent = MonthPicker;
|
||||||
|
break;
|
||||||
|
// case "rangepicker":
|
||||||
|
// TComponent = RangePicker;
|
||||||
|
// break;
|
||||||
|
case "weekpicker":
|
||||||
|
TComponent = WeekPicker;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
TComponent = DatePicker;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
TComponent;
|
||||||
let date_value = value ? moment(value) : value;
|
let date_value = value ? moment(value) : value;
|
||||||
if (editable) {
|
if (editable) {
|
||||||
cellContent = isclickTrigger ? (
|
cellContent = isclickTrigger ? (
|
||||||
<div className="editable-cell-input-wrapper">
|
<div className="editable-cell-input-wrapper">
|
||||||
<DatePicker
|
<TComponent
|
||||||
{...this.props}
|
{...this.props}
|
||||||
value={date_value}
|
value={date_value}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
|
@ -51,7 +68,7 @@ export default class DateRender extends Component {
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="editable-cell-input-wrapper">
|
<div className="editable-cell-input-wrapper">
|
||||||
<DatePicker
|
<TComponent
|
||||||
{...this.props}
|
{...this.props}
|
||||||
value={date_value}
|
value={date_value}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
|
@ -82,3 +99,6 @@ export default class DateRender extends Component {
|
||||||
return <div className="editable-cell">{cellContent}</div>;
|
return <div className="editable-cell">{cellContent}</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
DateRender.defaultProps = {
|
||||||
|
type: "DatePicker"
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue