diff --git a/examples/routers/date.vue b/examples/routers/date.vue
index 8eeac53c..a5a65e59 100644
--- a/examples/routers/date.vue
+++ b/examples/routers/date.vue
@@ -260,10 +260,88 @@
         <DatePicker type="daterange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
         <DatePicker type="datetimerange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
         <Time-Picker :steps="[1, 1, 15]" :value="new Date()"></Time-Picker>
+        <Divider>快捷方式</Divider>
+        <Row>
+            <Col span="12">
+                <DatePicker type="date" :options="options1" placeholder="Select date" style="width: 200px"></DatePicker>
+            </Col>
+            <Col span="12">
+                <DatePicker type="daterange" :options="options2" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
+            </Col>
+        </Row>
     </div>
 </template>
 <script>
     export default {
-
+        data () {
+            return {
+                options1: {
+                    shortcuts: [
+                        {
+                            text: 'Today',
+                            value () {
+                                return new Date();
+                            },
+                            onClick: (picker) => {
+                                this.$Message.info('Click today');
+                            }
+                        },
+                        {
+                            text: 'Yesterday',
+                            value () {
+                                const date = new Date();
+                                date.setTime(date.getTime() - 3600 * 1000 * 24);
+                                return date;
+                            },
+                            onClick: (picker) => {
+                                this.$Message.info('Click yesterday');
+                            }
+                        },
+                        {
+                            text: 'One week',
+                            value () {
+                                const date = new Date();
+                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+                                return date;
+                            },
+                            onClick: (picker) => {
+                                this.$Message.info('Click a week ago');
+                            }
+                        }
+                    ]
+                },
+                options2: {
+                    shortcuts: [
+                        {
+                            text: '1 week',
+                            value () {
+                                const end = new Date();
+                                const start = new Date();
+                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                                return [start, end];
+                            }
+                        },
+                        {
+                            text: '1 month',
+                            value () {
+                                const end = new Date();
+                                const start = new Date();
+                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                                return [start, end];
+                            }
+                        },
+                        {
+                            text: '3 months',
+                            value () {
+                                const end = new Date();
+                                const start = new Date();
+                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                                return [start, end];
+                            }
+                        }
+                    ]
+                }
+            }
+        }
     }
 </script>
diff --git a/src/styles/components/date-picker.less b/src/styles/components/date-picker.less
index 6ee9329b..80aed0cd 100644
--- a/src/styles/components/date-picker.less
+++ b/src/styles/components/date-picker.less
@@ -276,7 +276,7 @@
             overflow: auto;
         }
         &-shortcut{
-            padding: @btn-padding-large;
+            padding: 6px @padding-md;
             transition: all @transition-time @ease-in-out;
             cursor: pointer;
             overflow: hidden;