diff --git a/packages/Webkul/Admin/package.json b/packages/Webkul/Admin/package.json
index 9e2ed463a..3f52cff5f 100644
--- a/packages/Webkul/Admin/package.json
+++ b/packages/Webkul/Admin/package.json
@@ -1,24 +1,24 @@
 {
-    "private": true,
-    "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
-    },
-    "devDependencies": {
-        "axios": "^0.18",
-        "cross-env": "^5.1.4",
-        "laravel-mix": "^2.1",
-        "laravel-mix-merge-manifest": "^0.1.1",
-        "jquery": "^3.2",
-        "vue": "^2.1.10"
-    },
-    "dependencies": {
-        "vee-validate": "2.0.0-rc.26",
-        "vue-flatpickr": "^2.3.0"
-    }
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch-poll": "npm run watch -- --watch-poll",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+  },
+  "devDependencies": {
+    "axios": "^0.18",
+    "cross-env": "^5.1.4",
+    "laravel-mix": "^2.1",
+    "laravel-mix-merge-manifest": "^0.1.1",
+    "jquery": "^3.2",
+    "vue": "^2.1.10"
+  },
+  "dependencies": {
+    "vee-validate": "2.0.0-rc.26",
+    "flatpickr": "^4.4.6"
+  }
 }
diff --git a/packages/Webkul/Admin/src/Resources/assets/js/app.js b/packages/Webkul/Admin/src/Resources/assets/js/app.js
index 24d9e4780..9e51de9fb 100644
--- a/packages/Webkul/Admin/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Admin/src/Resources/assets/js/app.js
@@ -6,7 +6,7 @@ Vue.use(VeeValidate);
 
 Vue.component("datetime", require("./components/datetime"));
 Vue.component("date", require("./components/date"));
-require('vue-flatpickr/theme/airbnb.css');
+require('flatpickr/dist/flatpickr.css');
 
 $(document).ready(function () {
     Vue.config.ignoredElements = [
diff --git a/packages/Webkul/Admin/src/Resources/assets/js/components/date.vue b/packages/Webkul/Admin/src/Resources/assets/js/components/date.vue
index 31b2fe768..36c254218 100644
--- a/packages/Webkul/Admin/src/Resources/assets/js/components/date.vue
+++ b/packages/Webkul/Admin/src/Resources/assets/js/components/date.vue
@@ -1,26 +1,34 @@
 <template>
-    <Flatpickr class="control" :options="fpOptions"/>
+	<span>
+		<slot>
+			<input type="text" :name="name" class="control" :value="value" data-input>
+		</slot>
+	</span>
 </template>
 
 <script>
-	import VueFlatpickr from "vue-flatpickr";
-
-	Vue.use(VueFlatpickr);
+	import Flatpickr from 'flatpickr';
 
 	export default {
 		props: {
-			default: String
+			name: String,
+			value: String,
 		},
 
-		data() {
-			const now = new Date(this.default);
-			
+		data () {
 			return {
-				fpOptions: {
-					utc: false,
-					enableTime: false
-				}
-			};
+				datepicker: null              
+			}
+		},
+
+		mounted () {
+			var element = this.$el.getElementsByTagName('input')[0];
+			this.datepicker = new Flatpickr(
+				element, {
+					allowInput: true,
+					altFormat: 'Y-m-d H:i:s',
+					dateFormat: 'Y-m-d H:i:s'
+				});
 		}
 	};
-</script>
+</script>
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/js/components/datetime.1.vue b/packages/Webkul/Admin/src/Resources/assets/js/components/datetime.1.vue
new file mode 100644
index 000000000..b86b30f34
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/assets/js/components/datetime.1.vue
@@ -0,0 +1,53 @@
+<template>
+	<div class="control-group" :class="[errors.has(name) ? 'has-error' : '']">
+		<label :for="name" :class="[is_required ? 'required' : '']">
+			{{ label }}
+		</label>
+
+		<flat-pickr v-model="finalvalue" class="control" v-validate="'required'" :config="config" :name="name" @on-open="open()"></flat-pickr>
+
+		<span class="control-error" v-if="errors.has(name)">{{ errors.first(name) }}</span>
+	</div>
+</template>
+
+<script>
+	import flatPickr from 'vue-flatpickr-component';
+
+	// Vue.use(flatPickr);
+
+	export default {
+		props: {
+			label: String,
+			name: String,
+			required: String,
+			value: String,
+		},
+
+		computed: {
+			is_required () {
+				return Number(this.required)
+			}
+		},
+
+		methods: {
+			open () {
+				console.log(this.$validator)
+			}
+		},
+
+		data () {
+			return {
+				finalvalue: this.value,
+
+				date: new Date(),
+
+				config: {
+					allowInput: true,
+					altFormat: 'Y-m-d H:i:s',
+					dateFormat: 'Y-m-d H:i:s',
+					enableTime: true
+				},                
+			}
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/assets/js/components/datetime.vue b/packages/Webkul/Admin/src/Resources/assets/js/components/datetime.vue
index 16fb14912..917c28a73 100644
--- a/packages/Webkul/Admin/src/Resources/assets/js/components/datetime.vue
+++ b/packages/Webkul/Admin/src/Resources/assets/js/components/datetime.vue
@@ -1,27 +1,35 @@
 <template>
-    <Flatpickr class="control" :options="fpOptions"/>
+	<span>
+		<slot>
+			<input type="text" :name="name" class="control" :value="value" data-input>
+		</slot>
+	</span>
 </template>
 
 <script>
-	import VueFlatpickr from "vue-flatpickr";
-
-	Vue.use(VueFlatpickr);
+	import Flatpickr from 'flatpickr';
 
 	export default {
 		props: {
-			default: String
+			name: String,
+			value: String,
 		},
 
-		data() {
-			const now = new Date(this.default);
-			
+		data () {
 			return {
-				fpOptions: {
-					utc: false,
-					defaultDate: now,
+				datepicker: null              
+			}
+		},
+
+		mounted () {
+			var element = this.$el.getElementsByTagName('input')[0];
+			this.datepicker = new Flatpickr(
+				element, {
+					allowInput: true,
+					altFormat: 'Y-m-d H:i:s',
+					dateFormat: 'Y-m-d H:i:s',
 					enableTime: true
-				}
-			};
+				});
 		}
 	};
 </script>
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/products/field-types/date.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/products/field-types/date.blade.php
index dd7a12c3f..7650001a6 100644
--- a/packages/Webkul/Admin/src/Resources/views/catalog/products/field-types/date.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/products/field-types/date.blade.php
@@ -3,7 +3,9 @@
         {{ $attribute->admin_name }}
     </label>
 
-    <input type="text" v-validate="'{{$validations}}'" class="control" id="{{ $attribute->code }}" name="{{ $attribute->code }}" value="{{ $product[$attribute->code]}}"/>
+    <date>
+        <input type="text" name="{{ $attribute->code }}" class="control" v-validate="'required'" value="{{ $product[$attribute->code]}}" data-input>
+    </date>
 
     <span class="control-error" v-if="errors.has('{{ $attribute->code }}')">@{{ errors.first('{!! $attribute->code !!}') }}</span>
 </div>
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/products/field-types/datetime.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/products/field-types/datetime.blade.php
index f3b6e44ac..e0c6a210e 100644
--- a/packages/Webkul/Admin/src/Resources/views/catalog/products/field-types/datetime.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/products/field-types/datetime.blade.php
@@ -3,9 +3,9 @@
         {{ $attribute->admin_name }}
     </label>
 
-    <input type="text" v-validate="'{{$validations}}'" class="control" id="{{ $attribute->code }}" name="{{ $attribute->code }}" value="{{ $product[$attribute->code]}}"/>
-
-    <datetime default="{{ $product[$attribute->code]}}"></datetime>
+    <datetime>
+        <input type="text" name="{{ $attribute->code }}" class="control" v-validate="'required'" value="{{ $product[$attribute->code]}}" data-input>
+    </datetime>
 
     <span class="control-error" v-if="errors.has('{{ $attribute->code }}')">@{{ errors.first('{!! $attribute->code !!}') }}</span>
 </div>
\ No newline at end of file