diff --git a/package.json b/package.json
index 1b11d42..6c515e8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.9.11-rc-4",
+  "version": "0.9.11-rc-5",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 3d4505a..e3cc84c 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -19,7 +19,7 @@
                     :icon="iconType"></i-input>
             </slot>
         </div>
-        <Drop v-show="opened" :placement="placement" transition="slide-up" v-ref:drop>
+        <Drop v-show="opened" :placement="placement" :transition="transition" v-ref:drop>
             <div v-el:picker></div>
         </Drop>
     </div>
@@ -135,12 +135,6 @@
         }
     };
 
-    const PLACEMENT_MAP = {
-        left: 'bottom-start',
-        center: 'bottom-center',
-        right: 'bottom-end'
-    };
-
     export default {
         components: { iInput, Drop },
         directives: { clickoutside },
@@ -181,12 +175,6 @@
                 type: String,
                 default: ''
             },
-//            align: {
-//                validator (value) {
-//                    return oneOf(value, ['left', 'center', 'right']);
-//                },
-//                default: 'left'
-//            },
             placement: {
                 validator (value) {
                     return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
@@ -214,9 +202,13 @@
             iconType () {
                 return this.showClose ? 'ios-close' : 'ios-calendar-outline';
             },
-//            placement () {
-//                return PLACEMENT_MAP[this.align];
-//            },
+            transition () {
+                if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
+                    return 'slide-up';
+                } else {
+                    return 'slide-down';
+                }
+            },
             selectionMode() {
                 if (this.type === 'month') {
                     return 'month';
@@ -339,6 +331,7 @@
                 this.visible = false;
                 this.internalValue = '';
                 this.value = '';
+                this.$emit('on-clear');
             },
             showPicker () {
                 if (!this.picker) {
@@ -368,6 +361,7 @@
                     this.picker.$on('on-pick-success', () => {
 //                        this.emitChange(this.value);
                         this.visible = false;
+                        this.$emit('on-ok');
                     });
                     this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
 
@@ -395,13 +389,11 @@
                 if (val) {
                     this.showPicker();
                     this.$refs.drop.update();
-                    this.$emit('on-open-change', true);
+                    if (this.open === null) this.$emit('on-open-change', true);
                 } else {
-                    if (this.picker) {
-                        this.picker.resetView && this.picker.resetView();
-                    }
+                    if (this.picker) this.picker.resetView && this.picker.resetView();
                     this.$refs.drop.destroy();
-                    this.$emit('on-open-change', false);
+                    if (this.open === null) this.$emit('on-open-change', false);
                 }
             },
             internalValue(val) {
@@ -414,6 +406,14 @@
                 handler (val) {
                     this.internalValue = val;
                 }
+            },
+            open (val) {
+                if (val === true) {
+                    this.visible = val;
+                    this.$emit('on-open-change', true);
+                } else if (val === false) {
+                    this.$emit('on-open-change', false);
+                }
             }
         },
         beforeDestroy () {
@@ -422,9 +422,7 @@
             }
         },
         ready () {
-            if (this.open !== null) {
-                this.visible = this.open;
-            }
+            if (this.open !== null) this.visible = this.open;
         }
     }
 </script>
\ No newline at end of file
diff --git a/test/routers/date.vue b/test/routers/date.vue
index 0cb5507..e73f1be 100644
--- a/test/routers/date.vue
+++ b/test/routers/date.vue
@@ -1,134 +1,36 @@
 <template>
-    <div style="margin: 50px;position: relative">
-        <Card>
-            <row>
-                <i-col span="12">
-                    <date-picker type="date" placeholder="选择日期" style="width: 200px;"></date-picker>
-                </i-col>
-                <i-col span="12">
-                    <date-picker type="daterange" placeholder="选择日期" style="width: 200px;"></date-picker>
-                </i-col>
-            </row>
-            fdsfs
-        </Card>
-    </div>
+    <date-picker confirm :open="open" :value="value3" @on-change="handleChange" type="date" @on-open-change="c" @on-clear="clear" @on-ok="ok">
+        <a href="javascript:void(0)" @click="handleClick">
+            <Icon type="ios-calendar-outline"></Icon>
+            <template v-if="value3 === ''">选择日期</template>
+            <template v-else>{{ value3 }}</template>
+        </a>
+    </date-picker>
 </template>
 <script>
     export default {
         data () {
             return {
-//                value: new Date(),
-                type: 'date',
-                value: '2016-12-25',
-                value2: ['2016-12-17', '2017-01-05'],
-                options2: {
-//                    disabledDate(time) {
-////                        console.log(time)
-////                        return time.getFullYear() < 2016;
-////                        return time.getTime() < Date.now() - 8.64e7;
-////                        return time && time.valueOf() < Date.now();
-//                        if (time.getDate() === 22 || time.getDate() === 23) {
-//                            return true;
-//                        } else {
-//                            return false;
-//                        }
-//                    },
-                    shortcuts: [
-                        {
-                            text: '最近一周',
-                            value () {
-                                const end = new Date();
-                                const start = new Date();
-                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-                                return [start, end];
-                            },
-                            onClick (picker) {
-                                console.log('点击了最近一周');
-                            }
-                        },
-                        {
-                            text: '最近一个月',
-                            value () {
-                                const end = new Date();
-                                const start = new Date();
-                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-                                return [start, end];
-                            },
-                            onClick () {
-                                console.log('点击了最近一个月');
-                            }
-                        },
-                        {
-                            text: '最近三个月',
-                            value () {
-                                const end = new Date();
-                                const start = new Date();
-                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-                                return [start, end];
-                            },
-                            onClick () {
-                                console.log('点击了最近三个月');
-                            }
-                        }
-                    ]
-                },
-                options: {
-                    disabledDate(time) {
-//                        console.log(time)
-//                        return time.getFullYear() < 2016;
-                        return time.getTime() < Date.now() - 8.64e7;
-//                        return time && time.valueOf() < Date.now();
-                    },
-                    shortcuts: [
-                        {
-                            text: '今天',
-                            value () {
-//                                return new Date();
-                                return '1/2/19'
-                            },
-                            onClick (picker) {
-                                console.log('点击了今天');
-                            }
-                        },
-                        {
-                            text: '昨天',
-                            value () {
-                                const date = new Date();
-                                date.setTime(date.getTime() - 3600 * 1000 * 24);
-                                return date;
-                            },
-                            onClick () {
-                                console.log('点击了昨天');
-                            }
-                        },
-                        {
-                            text: '最近三个月',
-                            value () {
-                                const date = new Date();
-                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-                                return date;
-                            },
-                            onClick () {
-                                console.log('点击了一周前');
-                            }
-                        }
-                    ]
-                },
-                format: 'yyyy-MM',
+                open: false,
+                value3: ''
             }
         },
-        computed: {},
         methods: {
-            change (date) {
-                console.log(date)
+            handleClick () {
+                this.open = !this.open;
             },
-            change2 (s) {
-//                console.log(s)
+            handleChange (date) {
+                this.value3 = date;
             },
-            setDate () {
-//                this.value = '2016-12-24'
-                this.value2 = ['2016-9-1', '2016-9-20']
+            c (s) {
+                console.log(s)
+            },
+            clear (s) {
+                console.log(s)
+            },
+            ok (s) {
+                console.log(s)
             }
         }
     }
-</script>
\ No newline at end of file
+</script>
--
libgit2 0.21.4