diff --git a/scss/components/form/_date.scss b/scss/components/form/_date.scss
index 7c2e841c6..bbc77a641 100644
--- a/scss/components/form/_date.scss
+++ b/scss/components/form/_date.scss
@@ -87,6 +87,7 @@
   background: $Calendar-shortcuts-bg;
   padding: ($Calendar-shortcuts-height - $Calendar-fontSize * $lineHeightBase) / 2 $gap-sm;
   list-style: none;
+  width: px2rem(250px);
 
   &+.rdt .rdtPicker {
     padding-top: 0;
@@ -95,7 +96,7 @@
 
 .#{$ns}DatePicker-shortcut {
   display: inline-block;
-  margin-right: $gap-md;
+  margin-right: $gap-sm;
 
   a {
     font-size: $Calendar-fontSize;
diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
index d50c08523..ba6a64568 100644
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@@ -17,6 +17,12 @@ import Calendar from './calendar/Calendar';
 import 'react-datetime/css/react-datetime.css';
 
 const availableShortcuts: {[propName: string]: any} = {
+  now: {
+    label: '现在',
+    date: (now: moment.Moment) => {
+      return now;
+    }
+  },
   today: {
     label: '今天',
     date: (now: moment.Moment) => {
@@ -89,6 +95,28 @@ const availableShortcuts: {[propName: string]: any} = {
 };
 
 const advancedShortcuts = [
+  {
+    regexp: /^(\d+)hoursago$/,
+    resolve: (_: string, hours: string) => {
+      return {
+        label: `${hours}小时前`,
+        date: (now: moment.Moment) => {
+          return now.subtract(hours, 'hours');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)hourslater$/,
+    resolve: (_: string, hours: string) => {
+      return {
+        label: `${hours}小时后`,
+        date: (now: moment.Moment) => {
+          return now.add(hours, 'hours');
+        }
+      };
+    }
+  },
   {
     regexp: /^(\d+)daysago$/,
     resolve: (_: string, days: string) => {