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

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

@ -61,7 +61,7 @@
<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>
@ -71,7 +71,7 @@
<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>

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"
}