fix: end datetime can't be before begin datetime.

Add a min-datetime to endsOn.
Add maxDatetime and minDatetime props to or custom datetime-picker component.
Use those new props inside date-picker and time-picker components to set
a correct range of date for both endsOn and beginsOn event elements.

See issue: #308.
This commit is contained in:
Leo Mouyna
2019-12-10 00:10:12 +01:00
parent 74c6eb277f
commit 3358da34f9
2 changed files with 17 additions and 18 deletions

View File

@@ -22,8 +22,9 @@
:day-names="localeShortWeekDayNamesProxy"
:month-names="localeMonthNamesProxy"
:first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
:min-date="minDate"
v-model="dateWithoutTime"
:min-date="minDatetime"
:max-date="maxDatetime"
v-model="dateWithTime"
:placeholder="$t('Click to select')"
:years-range="[-2,10]"
icon="calendar"
@@ -33,6 +34,8 @@
placeholder="Type or select a time..."
icon="clock"
v-model="dateWithTime"
:min-time="minDatetime"
:max-time="maxDatetime"
size="is-small"
inline>
</b-timepicker>
@@ -65,23 +68,21 @@ export default class DateTimePicker extends Vue {
/**
* Earliest date available for selection
*/
@Prop({ required: false, type: Date, default: null }) minDate!: Date;
@Prop({ required: false, type: Date, default: null }) minDatetime!: Date;
dateWithoutTime: Date = this.value;
dateWithTime: Date = this.dateWithoutTime;
/**
* Latest date available for selection
*/
@Prop({ required: false, type: Date, default: null }) maxDatetime!: Date;
dateWithTime: Date = this.value;
localeShortWeekDayNamesProxy = localeShortWeekDayNames();
localeMonthNamesProxy = localeMonthNames();
@Watch('value')
updateValue() {
this.dateWithoutTime = this.value;
this.dateWithTime = this.dateWithoutTime;
}
@Watch('dateWithoutTime')
updateDateWithoutTimeWatcher() {
this.updateDateTime();
this.dateWithTime = this.value;
}
@Watch('dateWithTime')
@@ -95,9 +96,7 @@ export default class DateTimePicker extends Vue {
*
* @type {Date}
*/
this.dateWithoutTime.setHours(this.dateWithTime.getHours());
this.dateWithoutTime.setMinutes(this.dateWithTime.getMinutes());
this.$emit('input', this.dateWithoutTime);
this.$emit('input', this.dateWithTime);
}
}
</script>