diff --git a/packages/Webkul/BookingProduct/src/Resources/views/admin/catalog/products/accordians/booking.blade.php b/packages/Webkul/BookingProduct/src/Resources/views/admin/catalog/products/accordians/booking.blade.php
index a76ad3401..f201a7c94 100644
--- a/packages/Webkul/BookingProduct/src/Resources/views/admin/catalog/products/accordians/booking.blade.php
+++ b/packages/Webkul/BookingProduct/src/Resources/views/admin/catalog/products/accordians/booking.blade.php
@@ -28,20 +28,20 @@
                     <option value="rental">{{ __('bookingproduct::app.admin.catalog.products.rental-booking') }}</option>
                     <option value="table">{{ __('bookingproduct::app.admin.catalog.products.table-booking') }}</option>
                 </select>
-                
+
                 <span class="control-error" v-if="errors.has('booking[type]')">@{{ errors.first('booking[type]') }}</span>
             </div>
-        
+
             <div class="control-group">
                 <label>{{ __('bookingproduct::app.admin.catalog.products.location') }}</label>
                 <input type="text" name="booking[location]" v-model="booking.location" class="control"/>
             </div>
-        
+
             <div class="control-group" :class="[errors.has('booking[qty]') ? 'has-error' : '']" v-if="booking.type == 'default' || booking.type == 'appointment' || booking.type == 'rental'">
                 <label class="required">{{ __('bookingproduct::app.admin.catalog.products.qty') }}</label>
 
                 <input type="text" v-validate="'required|numeric|min:0'" name="booking[qty]" v-model="booking.qty" class="control" data-vv-as="&quot;{{ __('bookingproduct::app.admin.catalog.products.qty') }}&quot;"/>
-                    
+
                 <span class="control-error" v-if="errors.has('booking[qty]')">@{{ errors.first('booking[qty]') }}</span>
             </div>
 
@@ -52,7 +52,7 @@
                     <option value="1">{{ __('bookingproduct::app.admin.catalog.products.yes') }}</option>
                     <option value="0">{{ __('bookingproduct::app.admin.catalog.products.no') }}</option>
                 </select>
-                
+
                 <span class="control-error" v-if="errors.has('booking[available_every_week]')">@{{ errors.first('booking[available_every_week]') }}</span>
             </div>
 
@@ -61,9 +61,9 @@
                     <label class="required">{{ __('bookingproduct::app.admin.catalog.products.available-from') }}</label>
 
                     <datetime>
-                        <input type="text" v-validate="'required|date_format:yyyy-MM-dd HH:mm:ss|after:{{\Carbon\Carbon::yesterday()->format('Y-m-d 23:59:59')}}'" name="booking[available_from]" v-model="booking.available_from" class="control" data-vv-as="&quot;{{ __('bookingproduct::app.admin.catalog.products.available-from') }}&quot;" ref="available_from"/>
+                        <input type="text" v-validate="'required|date_format_rule|after_datetime:{{\Carbon\Carbon::yesterday()->format('Y-m-d 23:59')}}'" name="booking[available_from]" v-model="booking.available_from" class="control" data-vv-as="&quot;{{ __('bookingproduct::app.admin.catalog.products.available-from') }}&quot;" ref="available_from"/>
                     </datetime>
-                    
+
                     <span class="control-error" v-if="errors.has('booking[available_from]')">@{{ errors.first('booking[available_from]') }}</span>
                 </div>
 
@@ -71,9 +71,9 @@
                     <label class="required">{{ __('bookingproduct::app.admin.catalog.products.available-to') }}</label>
 
                     <datetime>
-                        <input type="text" v-validate="'required|date_format:yyyy-MM-dd HH:mm:ss|after:available_from'" name="booking[available_to]" v-model="booking.available_to" class="control" data-vv-as="&quot;{{ __('bookingproduct::app.admin.catalog.products.available-to') }}&quot;" ref="available_to"/>
+                        <input type="text" v-validate="'required|date_format_rule|after_datetime:available_from'" name="booking[available_to]" v-model="booking.available_to" class="control" data-vv-as="&quot;{{ __('bookingproduct::app.admin.catalog.products.available-to') }}&quot;" ref="available_to"/>
                     </datetime>
-                    
+
                     <span class="control-error" v-if="errors.has('booking[available_to]')">@{{ errors.first('booking[available_to]') }}</span>
                 </div>
             </div>
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 af9eb56cd..91f094fbb 100755
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/datetime.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/datetime.vue
@@ -7,37 +7,119 @@
 </template>
 
 <script>
-import Flatpickr from "flatpickr";
+    import Flatpickr from "flatpickr";
 
-export default {
-	props: {
-		name: String,
-		value: String
-	},
+    export default {
+        props: {
+            name: String,
+            value: String
+        },
 
-	data() {
-		return {
-			datepicker: null
-		};
-	},
+        data() {
+            return {
+                datepicker: null
+            };
+        },
 
-	created() {
+        created() {
+            function splitDateTime(value) {
+                let dateTimeParts = value.split(' ')
+                let dateParts = dateTimeParts[0].split('-')
+                let timeParts = dateTimeParts[1].split(':')
 
-	},
+                return {
+                    "year": dateParts[0],
+                    "month": dateParts[1],
+                    "day": dateParts[2],
+                    "hour": timeParts[0],
+                    "minute": timeParts[1],
+                }
+            }
 
-	mounted() {
-		var this_this = this;
+            function validateDate(value) {
+                let valueDate = new Date(value)
+                if (valueDate.getTime() !== valueDate.getTime()) {
+                    return false
+                }
 
-		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,
-			onChange: function(selectedDates, dateStr, instance) {
-				this_this.$emit('onChange', dateStr)
-			},
-		});
-  	}
-};
+                let inputValue = splitDateTime(value)
+
+                if (inputValue.year.length !== 4
+                    || inputValue.month.length !== 2
+                    || inputValue.day.length !== 2
+                    || inputValue.hour.length !== 2
+                    || inputValue.minute.length !== 2
+                ) {
+                    return false
+                }
+
+                if (inputValue.month.parseInt < 1 || inputValue.month.parseInt > 12) {
+                    return false
+                }
+
+                let daysPerMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+                if ((!(inputValue.year.parseInt % 4) && inputValue.year.parseInt % 100) || !(inputValue.year.parseInt % 400)) {
+                    daysPerMonth[1] = 29 // it is a leap year
+                }
+
+                if (inputValue.day > daysPerMonth[inputValue.month - 1]) {
+                    return false
+                }
+
+                if (inputValue.hour.parseInt < 0 || inputValue.hour.parseInt > 23) {
+                    return false
+                }
+
+                if (inputValue.minute.parseInt < 0 || inputValue.hour.parseInt > 59) {
+                    return false
+                }
+                return true
+            }
+
+            this.$validator.extend('date_format_rule', {
+                getMessage(field, val) {
+                    return 'The date must be in the format yyyy-MM-dd HH:ii:ss.'
+                },
+                validate(value, field) {
+                    return validateDate(value)
+                }
+            })
+
+            this.$validator.extend('after_datetime', {
+                getMessage(field, val) {
+                    return field + ' must be later than ' + val + '.'
+                },
+                validate(value, field) {
+                    let afterDateValue = field.valueOf().toString()
+                    if (validateDate(afterDateValue) === true) {
+                        let newDate = new Date(value)
+                        let afterDate = new Date(field.valueOf().toString())
+
+                        if (newDate <= afterDate) {
+                            return false
+                        }
+                    }
+                    return true
+                }
+            })
+        },
+
+        mounted() {
+            var this_this = this;
+
+            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,
+                enableSeconds: true,
+                onChange: function (selectedDates, dateStr, instance) {
+                    this_this.$emit('onChange', dateStr)
+                },
+            });
+        },
+
+        methods: {}
+    };
 </script>
\ No newline at end of file
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
new file mode 100644
index 000000000..2d6011713
--- /dev/null
+++ b/public/mix-manifest.json
@@ -0,0 +1,4 @@
+{
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
+}