diff --git a/resources/assets/vue/components/common/DatePickerComponent.vue b/resources/assets/vue/components/common/DatePickerComponent.vue
index f29308e..41ed080 100644
--- a/resources/assets/vue/components/common/DatePickerComponent.vue
+++ b/resources/assets/vue/components/common/DatePickerComponent.vue
@@ -1,30 +1,20 @@
 <template>
-    <input type="text" class="form-control" v-datepicker :value="value" v-on:changeDate="updateDate($event)">
+    <input type="text" class="form-control" :value="value">
 </template>
 
 <script>
     export default {
-        directives: {
-            datepicker: {
-                inserted (el,) {
-                    let vm = this;
-                    $(el).datepicker({
-                        autoclose: true,
-                        format: 'dd/mm/yyyy',
-                        todayBtn: true,
-                        todayHighlight: true
-                    }).on('changeDate',function(e){
-                        this.updateDate(event.target.value)
-                    })
-                }
-            }
+        mounted: function() {
+            let vm = this;
+            $(this.$el).datepicker({
+                autoclose: true,
+                format: 'dd-mm-yyyy',
+                todayBtn: true,
+                todayHighlight: true
+            }).on('changeDate',function(event){
+                vm.$emit('updateDate', event.target.value)
+            })
         },
-        props: ['value'],
-        methods: {
-            updateDate(value){
-                alert(value);
-
-            }
-        }
+        props: ['value']
     }
 </script>
diff --git a/resources/assets/vue/components/order/elements/ReceiveStepComponenet.vue b/resources/assets/vue/components/order/elements/ReceiveStepComponenet.vue
index 4586538..0c92722 100644
--- a/resources/assets/vue/components/order/elements/ReceiveStepComponenet.vue
+++ b/resources/assets/vue/components/order/elements/ReceiveStepComponenet.vue
@@ -27,8 +27,7 @@
                                 <div class="form-group form-group-default input-group" style=" overflow: visible; ">
                                     <div class="form-input-group">
                                         <label>Date Received</label>
-                                        <date-picker-component name="receive_date" v-on:updateDate="setDate($event, 'receiveNote.receive_date')"></date-picker-component>
-                                        <!--<input class="form-control block datepicker" v-model="receiveNote.receive_date">-->
+                                        <date-picker-component name="receive_date" v-on:updateDate="setReceiveNote($event, 'receiveNote.receive_date')"></date-picker-component>
                                     </div>
                                 </div>
                                 <div class="row">
@@ -92,11 +91,9 @@
         },
         methods: {
 
-            setDate(date, field){
-                if (field === 'receiveNote.receive_date') {
-                    $(this.$el).find('.receiveForm').valid();
-                    this.receiveNote.receive_date = date;
-                }
+            setReceiveNote(date){
+                $(this.$el).find('.receiveForm').valid();
+                this.receiveNote.receive_date = date;
             },
 
             createReceiveNote() {