merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bugfix v-validate dates given by datepicker

This commit is contained in:
Annika Wolff 2020-05-07 12:17:59 +02:00
parent 88ce2bd320
commit 5ec453c9fb
3 changed files with 122 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/Webkul/BookingProduct/src/Resources/views/admin/catalog/products/accordians/booking.blade.php
View File

@ -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>

136
packages/Webkul/Ui/src/Resources/assets/js/components/datetime.vue
View File

@ -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>

4
public/mix-manifest.json Normal file
View File

@ -0,0 +1,4 @@
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
}