diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx
index 7496ca4b14..f39b548a97 100644
--- a/components/datepicker/index.jsx
+++ b/components/datepicker/index.jsx
@@ -44,6 +44,7 @@ module.exports = React.createClass({
       defaultValue={defaultCalendarValue}
       showTime={this.props.showTime}
       prefixCls="ant-calendar"
+      showOk={this.props.showTime}
       showClear={false} />
     );
     return (
diff --git a/package.json b/package.json
index 7969d82405..47bcdb9276 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
-    "rc-calendar": "~3.8.0",
+    "rc-calendar": "~3.9.0",
     "rc-dialog": "~4.3.0",
     "rc-dropdown": "~1.0.0",
     "rc-menu": "~3.3.0",
diff --git a/static/style.css b/static/style.css
index 29f30e2066..e8927464f6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -87,13 +87,13 @@ li {
 }
 
 a {
-  color: #6EB4E0;
+  color: #00ABEA;
   text-decoration: none;
   transition: color .3s ease;
 }
 
 a:hover {
-  color: #6EB4E0;
+  color: #23C0FA;
 }
 
 .clearfix:after {
diff --git a/style/components/datepicker/Calendar.less b/style/components/datepicker/Calendar.less
index 4f8078b797..f853b4f254 100644
--- a/style/components/datepicker/Calendar.less
+++ b/style/components/datepicker/Calendar.less
@@ -11,6 +11,7 @@
   box-shadow: 0 0 4px #d9d9d9;
   background-clip: padding-box;
   line-height: @line-height-base;
+  display: block !important;
 
   &-week-number {
     width: 286px;
@@ -23,38 +24,31 @@
   &-header {
     padding: 0 10px;
     height: 34px;
-    line-height: 24px;
     text-align: center;
     user-select: none;
     -webkit-user-select: none;
     border-bottom: 1px solid #e9e9e9;
 
-    > a {
+   a {
       font-weight: bold;
       display: inline-block;
-      padding: 4px 5px;
-      text-align: center;
-      width: 30px;
       color: #666;
-
+      line-height: 34px;
       &:hover {
-        cursor: pointer;
         color: #23c0fa;
       }
     }
 
-    .@{prefixCalendarClass}-prev-month-btn {
-      position: absolute;
-      left: 25px;
-    }
-
-    .@{prefixCalendarClass}-next-month-btn {
-      position: absolute;
-      right: 25px;
+    .@{prefixCalendarClass}-year-select,
+    .@{prefixCalendarClass}-month-select {
+      padding: 0px 2px;
     }
 
-    .@{prefixCalendarClass}-month-select {
-      width: 140px;
+    > a {
+      color: #999;
+      font-family: Arial,"Hiragino Sans GB","Microsoft Yahei","Microsoft Sans Serif","WenQuanYi Micro Hei",sans-serif;
+      padding: 0 5px;
+      font-size: 16px;
     }
 
     .@{prefixCalendarClass}-month-select-arrow {
@@ -70,12 +64,20 @@
     top: 0;
   }
 
+  &-prev-year-btn {
+    left: 7px;
+  }
+
   &-next-year-btn {
-    right: 0;
+    right: 7px;
   }
 
-  &-prev-year-btn {
-    left: 0;
+  &-prev-month-btn {
+    left: 29px;
+  }
+
+  &-next-month-btn {
+    right: 29px;
   }
 
   &-calendar-body {
@@ -177,20 +179,39 @@
     height: 42px;
     line-height: 42px;
     border-top: 1px solid #e9e9e9;
+  }
+
+  &-footer-btn {
     text-align: center;
+    display: block;
   }
 
   &-footer > div {
     display: inline-block;
   }
 
-  .@{prefixCalendarClass}-today-btn, .@{prefixCalendarClass}-clear-btn {
+  .@{prefixCalendarClass}-today-btn,
+  .@{prefixCalendarClass}-clear-btn {
     display: inline-block;
     text-align: center;
+    margin-left: 8px;
 
     &:hover {
       cursor: pointer;
       color: #23c0fa;
     }
   }
+
+  .@{prefixCalendarClass}-ok-btn {
+    .btn;
+    .btn-primary;
+    .button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
+    letter-spacing: 3px;
+    text-indent: 3px;
+    padding-left: 8px;
+    padding-right: 8px;
+    position: absolute;
+    bottom: 9px;
+    right: 9px;
+  }
 }
diff --git a/style/components/datepicker/DecadePanel.less b/style/components/datepicker/DecadePanel.less
index f49cad8288..b400944a30 100644
--- a/style/components/datepicker/DecadePanel.less
+++ b/style/components/datepicker/DecadePanel.less
@@ -21,7 +21,7 @@
   text-align: center;
   user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #e9e9e9;
 
   > a {
     font-weight: bold;
@@ -110,4 +110,4 @@
     transform: rotate(180deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   }
-}
\ No newline at end of file
+}
diff --git a/style/components/datepicker/MonthPanel.less b/style/components/datepicker/MonthPanel.less
index 514890ba9b..264e43dd67 100644
--- a/style/components/datepicker/MonthPanel.less
+++ b/style/components/datepicker/MonthPanel.less
@@ -21,12 +21,12 @@
   text-align: center;
   user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #e9e9e9;
 
   > a {
     font-weight: bold;
     display: inline-block;
-    padding: 4px 5px;
+    padding: 0 5px;
     text-align: center;
     width: 30px;
 
diff --git a/style/components/datepicker/Time.less b/style/components/datepicker/Time.less
index 4afd0d92c0..63e994b6f1 100644
--- a/style/components/datepicker/Time.less
+++ b/style/components/datepicker/Time.less
@@ -1,7 +1,19 @@
 @import "../../mixins/input";
 
+.@{prefixCalendarClass}-time {
+  > span {
+    margin: 0 2px;
+  }
+  ~ .@{prefixCalendarClass}-footer-btn {
+    display: inline;
+    text-align: left;
+  }
+}
+
 .@{prefixCalendarClass}-time-input {
-  height: 25px;
-  width: 40px;
   .ant-input;
+  width: 30px;
+  height: 26px;
+  padding: 0;
+  text-align: center;
 }
diff --git a/style/components/datepicker/TimePanel.less b/style/components/datepicker/TimePanel.less
index b58d12eab5..27d70266b7 100644
--- a/style/components/datepicker/TimePanel.less
+++ b/style/components/datepicker/TimePanel.less
@@ -17,7 +17,7 @@
   text-align: center;
   user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #e9e9e9;
 }
 
 .@{prefixCalendarClass}-time-panel-body {
@@ -35,7 +35,6 @@
   border-radius: 4px;
 }
 
-
 .@{prefixCalendarClass}-time-panel-table {
   table-layout: fixed;
   width: 100%;
@@ -44,15 +43,14 @@
 
 .@{prefixCalendarClass}-time-panel-cell {
   text-align: center;
-  height: 42px;
+  height: 40px;
   vertical-align: middle;
 }
 
 .@{prefixCalendarClass}-time-panel-time {
-  line-height: 26px;
+  line-height: 24px;
   display: block;
   border-radius: 4px;
-  width:26px;
   margin: 0 auto;
 
   &:hover {
@@ -70,4 +68,4 @@
     background: #3fc7fa;
     color: #fff;
   }
-}
\ No newline at end of file
+}
diff --git a/style/components/datepicker/YearPanel.less b/style/components/datepicker/YearPanel.less
index 47ebb088c4..dc225bbbc5 100644
--- a/style/components/datepicker/YearPanel.less
+++ b/style/components/datepicker/YearPanel.less
@@ -21,12 +21,12 @@
   text-align: center;
   user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #e9e9e9;
 
   > a {
     font-weight: bold;
     display: inline-block;
-    padding: 4px 5px;
+    padding: 0 5px;
     text-align: center;
     width: 30px;
 
@@ -119,4 +119,4 @@
     transform: rotate(180deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   }
-}
\ No newline at end of file
+}