1.0.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rcc-calendar",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "react component calendar",
   "main": "./dist/index.js",
   "files": [

src/Props.js

@@ -99,6 +99,7 @@ export type PickerProps = {
   iconRender?: Function,
   disabledDate?: Function,
   showIcon: boolean,
+  title: string | Function,
 }
 
 export type InputProps = {

src/index.css

@@ -184,7 +184,7 @@
 .rcc-calendar-range-select {
   border-bottom: 1px solid #0d7b7b;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
 }
 .rcc-calendar-range-select > .rcc-calendar-input-range {
@@ -195,6 +195,10 @@
   background-color: transparent;
   border: none;
 }
+.rcc-calendar-range-title {
+  display: inline-block;
+  margin-right: 10px;
+}
 .stickCenterV {
   position: absolute;
   top: 50%;

src/index.less

@@ -102,7 +102,6 @@
     height: 280px;
     position: relative;
   }
-
   &-range-left {
     .rcc-calendar-panels {
       margin-right: 15px;
@@ -191,7 +190,7 @@
   &-select {
     border-bottom: 1px solid #0d7b7b;
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
     & > .rcc-calendar-input-range {
       background-color: transparent;
@@ -202,6 +201,10 @@
       }
     }
   }
+  &-title {
+    display: inline-block;
+    margin-right: 10px;
+  }
   &-content {
     &:extend(.flex-center);
   }

src/range/index.js

@@ -78,6 +78,17 @@ class Range extends React.PureComponent<RangeProps> {
     };
   };
 
+  renderTitle = () => {
+    const {title} = this.props;
+    if (!title) {
+      return '';
+    }
+    if (typeof title === 'function') {
+      return title();
+    }
+    return title;
+  };
+
   renderSelect = () => {
     const { selectValue } = this.state;
     const { format, iconRender } = this.props;
@@ -101,6 +112,9 @@ class Range extends React.PureComponent<RangeProps> {
       <div className={classNames(pf, className)}>
         <div className={`${pf}-select`}>
           {this.renderSelect()}
+          <div className={`${pf}-title`}>
+            {this.renderTitle()}
+          </div>
         </div>
         <div className={`${pf}-content`}>
           <Calendar {...this.calendarProps('left', 'startDate', diff)} />