diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/date.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/date.vue
index febc6d92d..cd720d55f 100755
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/date.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/date.vue
@@ -1,15 +1,20 @@
 <template>
-	<span>
+	<span style="display: flex;align-items: center;">
 		<slot>
 			<input type="text" :name="name" class="control" :value="value" data-input>
 		</slot>
+        <button
+            class="btn"
+            style="height:100%;margin-left: 8px; margin-top: 5px;"
+            @click.prevent="clear"
+        > <span class="icon trash-icon"></span> </button>
 	</span>
 </template>
 
 <script>
-	import Flatpickr from 'flatpickr';
+import Flatpickr from 'flatpickr';
 
-	export default {
+export default {
 		props: {
 			name: String,
 			value: String,
@@ -27,12 +32,19 @@
 			var element = this.$el.getElementsByTagName('input')[0];
 			this.datepicker = new Flatpickr(
 				element, {
+                    allowInput: true,
 					altFormat: 'Y-m-d',
 					dateFormat: 'Y-m-d',
+                    weekNumbers: true,
 					onChange: function(selectedDates, dateStr, instance) {
 						this_this.$emit('onChange', dateStr)
 					},
 				});
-		}
+		},
+        methods: {
+            clear() {
+                this.datepicker.clear();
+            }
+        }
 	};
 </script>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/datetime.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/datetime.vue
index db2bda678..cf474843c 100755
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/datetime.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/datetime.vue
@@ -1,15 +1,20 @@
 <template>
-	<span>
+	<span style="display: flex;align-items: center;">
 		<slot>
 			<input type="text" :name="name" class="control" :value="value" data-input>
 		</slot>
+        <button
+            class="btn"
+            style="height:100%;margin-left: 8px; margin-top: 5px;"
+            @click.prevent="clear"
+        > <span class="icon trash-icon"></span> </button>
 	</span>
 </template>
 
 <script>
-    import Flatpickr from "flatpickr";
+import Flatpickr from "flatpickr";
 
-    export default {
+export default {
         props: {
             name: String,
             value: String
@@ -35,10 +40,17 @@
                 dateFormat: "Y-m-d H:i:S",
                 enableTime: true,
                 time_24hr: true,
+                weekNumbers: true,
                 onChange: function (selectedDates, dateStr, instance) {
                     this_this.$emit('onChange', dateStr)
                 },
             });
+        },
+
+        methods: {
+           clear() {
+               this.datepicker.clear();
+           }
         }
     };
 </script>
\ No newline at end of file