日期控件支持快捷方式

docs/renderers/Form/Date.md

@@ -6,6 +6,7 @@
 -   `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 [moment](http://momentjs.com/).
 -   `inputFormat` 默认 `YYYY-MM-DD` 用来配置显示的时间格式。
 -   `placeholder` 默认 `请选择日期`
+-  `ranges` 日期快捷键，如： `"today,3dayslater"` 可用范围: `today, yesterday, 2dayago, 3dayago, 7daysago, 90daysago, thisweek, thismonth, prevmonth, prevquarter, thisquarter, tomorrow, 2dayslater, 3dayslater, 7dayslater, 90dayslater, endofthisweek, endofthismonth`
 -   `value` 这里面 value 需要特殊说明一下，因为支持相对值。如：
     -   `-2mins` 2 分钟前
     -   `+2days` 2 天后
@@ -22,7 +23,8 @@
     {
       "type": "date",
       "name": "select",
-      "label": "日期"
+      "label": "日期",
+      "ranges": "today,3dayslater"
     },
 
     {

scss/components/form/_date.scss

@@ -82,6 +82,12 @@
     display: flex;
 }
 
+.#{$ns}DatePicker-rangers {
+    margin: $gap-sm $gap-md (-$gap-sm) $gap-md;
+    padding: 0;
+    list-style: none;
+}
+
 // override third-party styles
 .rdt {
     user-select: none;
@@ -91,6 +97,7 @@
     .rdtPicker {
         margin-top: 0;
         padding: $gap-md;
+        border: none;
 
         .dow {
             color: $Calendar-wLabel-color;

scss/components/form/_select.scss

@@ -123,7 +123,7 @@
 
     &-arrow {
         margin-right: $gap-xs;
-        margin-left: $gap-xs;
+        // margin-left: $gap-xs;
         width: px2rem(20px);
         text-align: center;
         display: flex;

src/components/DatePicker.tsx

@@ -545,6 +545,138 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
     }
 }
 
+
+const availableRanges: {[propName: string]: any} = {
+    today: {
+        label: '今天',
+        date: (now: moment.Moment) => {
+            return now.startOf('day');
+        },
+    },
+
+    yesterday: {
+        label: '昨天',
+        date: (now: moment.Moment) => {
+            return now.add(-1, 'days').startOf('day');
+        }
+    },
+
+    '2dayago': {
+        label: '前天',
+        date: (now: moment.Moment) => {
+            return now.add(-2, 'days');
+        }
+    },
+
+    '3dayago': {
+        label: '3天前',
+        date: (now: moment.Moment) => {
+            return now.add(-3, 'days');
+        }
+    },
+
+    '7daysago': {
+        label: '7天前',
+        date: (now: moment.Moment) => {
+            return now.add(-7, 'days');
+        }
+    },
+
+    '90daysago': {
+        label: '90天前',
+        date: (now: moment.Moment) => {
+            return now.add(-90, 'days');
+        },
+    },
+
+    thisweek: {
+        label: '本周一',
+        date: (now: moment.Moment) => {
+            return now
+                .startOf('week')
+                .add(-1, 'weeks');
+        }
+    },
+
+    thismonth: {
+        label: '本月初',
+        date: (now: moment.Moment) => {
+            return now.startOf('month');
+        },
+    },
+
+    prevmonth: {
+        label: '上个月初',
+        date: (now: moment.Moment) => {
+            return now.startOf('month').add(-1, 'month');
+        }
+    },
+
+    prevquarter: {
+        label: '上个季节初',
+        date: (now: moment.Moment) => {
+            return now.startOf('quarter').add(-1, 'quarter');
+        },
+    },
+
+    thisquarter: {
+        label: '本季度初',
+        date: (now: moment.Moment) => {
+            return now.startOf('quarter');
+        }
+    },
+
+    tomorrow: {
+        label: '明天',
+        date: (now: moment.Moment) => {
+            return now.add(1, 'days').startOf('day');
+        }
+    },
+
+    '2dayslater': {
+        label: '后天',
+        date: (now: moment.Moment) => {
+            return now.add(2, 'days');
+        }
+    },
+
+    '3dayslater': {
+        label: '3天后',
+        date: (now: moment.Moment) => {
+            return now.add(3, 'days');
+        }
+    },
+
+    '7dayslater': {
+        label: '7天后',
+        date: (now: moment.Moment) => {
+            return now.add(7, 'days');
+        }
+    },
+
+    '90dayslater': {
+        label: '90天后',
+        date: (now: moment.Moment) => {
+            return now.add(90, 'days');
+        },
+    },
+
+    endofthisweek: {
+        label: '本周日',
+        date: (now: moment.Moment) => {
+            return now
+                .endOf('week');
+        }
+    },
+
+    endofthismonth: {
+        label: '本月底',
+        date: (now: moment.Moment) => {
+            return now.endOf('month');
+        },
+    }
+};
+
 export interface DateProps {
     viewMode: 'years' | 'months' | 'days' | 'time';
     className?: string;
@@ -565,6 +697,7 @@ export interface DateProps {
     defaultValue?: any;
     onChange: (value: any) => void;
     value: any;
+    ranges: string;
     [propName: string]: any;
 }
 
@@ -575,8 +708,9 @@ export interface DatePickerState {
 }
 
 export class DatePicker extends React.Component<DateProps, DatePickerState> {
-    static defaultProps: Pick<DateProps, 'viewMode'> = {
+    static defaultProps: Pick<DateProps, 'viewMode' | 'ranges'> = {
         viewMode: 'days',
+        ranges: '',
     };
     state: DatePickerState = {
         isOpened: false,
@@ -587,6 +721,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         super(props);
 
         this.handleChange = this.handleChange.bind(this);
+        this.selectRannge = this.selectRannge.bind(this);
         this.checkIsValidDate = this.checkIsValidDate.bind(this);
         this.open = this.open.bind(this);
         this.close = this.close.bind(this);
@@ -688,6 +823,12 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         }
     }
 
+    selectRannge(item:any) {
+        const now = moment();
+        this.handleChange(item.date(now));
+        this.close();
+    }
+
     checkIsValidDate(currentDate: moment.Moment) {
         const {minDate, maxDate} = this.props;
 
@@ -727,6 +868,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             timeConstraints,
             popOverContainer,
             clearable,
+            ranges
         } = this.props;
 
         const isOpened = this.state.isOpened;
@@ -778,6 +920,27 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
                             overlay
                             onClick={this.handlePopOverClick}
                         >
+                            {ranges ? (
+                                <ul className={`${ns}DatePicker-rangers`}>
+                                    {(typeof ranges === 'string'
+                                        ? ranges.split(',')
+                                        : Array.isArray(ranges)
+                                        ? ranges
+                                        : []
+                                    )
+                                        .filter(key => !!availableRanges[key])
+                                        .map(key => (
+                                            <li
+                                                className={`${ns}DateRangePicker-ranger`}
+                                                onClick={() => this.selectRannge(availableRanges[key])}
+                                                key={key}
+                                            >
+                                                <a>{availableRanges[key].label}</a>
+                                            </li>
+                                        ))}
+                                </ul>
+                            ) : null}
+                            
                             <BaseDatePicker
                                 value={date}
                                 onChange={this.handleChange}