diff --git a/demo/CalendarDemo.jsx b/demo/CalendarDemo.jsx
index 0d3b161e..1bf531d8 100644
--- a/demo/CalendarDemo.jsx
+++ b/demo/CalendarDemo.jsx
@@ -115,7 +115,35 @@ class Demo extends React.Component {
           <Calendar
             showToday
             showTime={false}
-            allowClear={false}
+            allowClear
+            showSecond={false}
+            locale="en-us"
+            yearSelectOffset={100}
+            yearSelectTotal={200}
+            size="middle"
+            disabledTime={() => (
+              {
+                disabledMinutes: () => disabledMinutes,
+              }
+            )}
+            value={value}
+            onSelect={this.onSelect}
+            showDateInput
+          />
+        </div>
+        <div
+          className="kuma-form-field"
+          style={{
+            width: '50px',
+          }}
+        >
+          <p>
+            显示空间不够
+          </p>
+          <Calendar
+            showToday
+            showTime={false}
+            allowClear
             showSecond={false}
             locale="en-us"
             yearSelectOffset={100}
diff --git a/src/YearCalendar.jsx b/src/YearCalendar.jsx
index 95a8fdb8..501108ca 100644
--- a/src/YearCalendar.jsx
+++ b/src/YearCalendar.jsx
@@ -184,7 +184,7 @@ YearCalendar.propTypes = {
   hasTrigger: PropTypes.bool,
   showDateInput: PropTypes.bool,
   align: PropTypes.object,
-  transitionName: PropTypes.bool,
+  transitionName: PropTypes.string,
 };
 
 export default YearCalendar;
diff --git a/src/style/common/Calendar.less b/src/style/common/Calendar.less
index 25a0398c..7489c8ac 100644
--- a/src/style/common/Calendar.less
+++ b/src/style/common/Calendar.less
@@ -207,6 +207,14 @@
   position: relative;
   display: inline-block;
   width: 100%;
+  min-width: 80px;
+
+  .kuma-input{
+    padding-right: 28px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   .kuma-input[readonly] {
     background-color: white;
     border-color: @border-color;