mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 22:49:15 +08:00
[bugfix] DateTimePicker validate date props (#333)
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [bugfix] Search box-sizing wrong * [Doc] update vant-demo respo * [Doc] translate theme & demo pages * [Doc] add Internationalization document * [bugfix] remove unnecessary props * [fix] optimize clickoutside * [new feature] optimize find-parent * [new feature]: change document title accordinng to language * [new feature] Pagination code review * [improvement] adjust icon-font unicode * [improvement] Icon spinner color inherit * [improvement] icon default width * [bugfix] DateTimePicker validate date props
This commit is contained in:
parent
f8b642f8aa
commit
2beee9d02e
@ -23,10 +23,6 @@ const router = new VueRouter({
|
|||||||
|
|
||||||
window.vueRouter = router;
|
window.vueRouter = router;
|
||||||
|
|
||||||
if (process.env.NODE_ENV !== 'production') {
|
|
||||||
Vue.config.productionTip = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
new Vue({ // eslint-disable-line
|
new Vue({ // eslint-disable-line
|
||||||
render: h => h(App),
|
render: h => h(App),
|
||||||
router,
|
router,
|
||||||
|
@ -31,10 +31,6 @@ router.afterEach(() => {
|
|||||||
|
|
||||||
window.vueRouter = router;
|
window.vueRouter = router;
|
||||||
|
|
||||||
if (process.env.NODE_ENV !== 'production') {
|
|
||||||
Vue.config.productionTip = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
new Vue({ // eslint-disable-line
|
new Vue({ // eslint-disable-line
|
||||||
render: h => h(App),
|
render: h => h(App),
|
||||||
router,
|
router,
|
||||||
|
@ -1,18 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<van-picker
|
<van-picker
|
||||||
ref="picker"
|
ref="picker"
|
||||||
|
showToolbar
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:visible-item-count="visibleItemCount"
|
:visibleItemCount="visibleItemCount"
|
||||||
@change="handlePickerChange"
|
@change="onChange"
|
||||||
@confirm="handlePickerConfirm"
|
@confirm="onConfirm"
|
||||||
@cancel="$emit('cancel')"
|
@cancel="$emit('cancel')"
|
||||||
showToolbar>
|
/>
|
||||||
</van-picker>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Picker from '../picker';
|
import Picker from '../picker';
|
||||||
|
|
||||||
|
const isValidDate = date => Object.prototype.toString.call(date) === "[object Date]" && !isNaN(date.getTime());
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-datetime-picker',
|
name: 'van-datetime-picker',
|
||||||
|
|
||||||
@ -37,13 +39,15 @@ export default {
|
|||||||
type: Date,
|
type: Date,
|
||||||
default() {
|
default() {
|
||||||
return new Date(new Date().getFullYear() - 10, 0, 1);
|
return new Date(new Date().getFullYear() - 10, 0, 1);
|
||||||
}
|
},
|
||||||
|
validator: isValidDate
|
||||||
},
|
},
|
||||||
maxDate: {
|
maxDate: {
|
||||||
type: Date,
|
type: Date,
|
||||||
default() {
|
default() {
|
||||||
return new Date(new Date().getFullYear() + 10, 11, 31);
|
return new Date(new Date().getFullYear() + 10, 11, 31);
|
||||||
}
|
},
|
||||||
|
validator: isValidDate
|
||||||
},
|
},
|
||||||
minHour: {
|
minHour: {
|
||||||
type: Number,
|
type: Number,
|
||||||
@ -57,20 +61,8 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
let value = this.value;
|
|
||||||
if (!value) {
|
|
||||||
if (this.type.indexOf('date') > -1) {
|
|
||||||
value = this.minDate;
|
|
||||||
} else {
|
|
||||||
const minHour = this.minHour;
|
|
||||||
value = `${minHour > 10 ? minHour : '0' + minHour}:00`;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
value = this.correctValue(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
innerValue: value
|
innerValue: this.correctValue(this.value)
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -126,8 +118,17 @@ export default {
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
correctValue(value) {
|
correctValue(value) {
|
||||||
// 仅时间
|
// validate value
|
||||||
if (this.type === 'time') {
|
const isDateType = this.type.indexOf('date') > -1;
|
||||||
|
if (isDateType && !isValidDate(value)) {
|
||||||
|
value = this.minDate;
|
||||||
|
} else if (!value) {
|
||||||
|
const { minHour } = this;
|
||||||
|
value = `${minHour > 10 ? minHour : '0' + minHour}:00`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// time type
|
||||||
|
if (!isDateType) {
|
||||||
const [hour, minute] = value.split(':');
|
const [hour, minute] = value.split(':');
|
||||||
let correctedHour = Math.max(hour, this.minHour);
|
let correctedHour = Math.max(hour, this.minHour);
|
||||||
correctedHour = Math.min(correctedHour, this.maxHour);
|
correctedHour = Math.min(correctedHour, this.maxHour);
|
||||||
@ -135,7 +136,7 @@ export default {
|
|||||||
return `${correctedHour}:${minute}`;
|
return `${correctedHour}:${minute}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 含有日期的情况
|
// date type
|
||||||
const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', value);
|
const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', value);
|
||||||
const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', value);
|
const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', value);
|
||||||
const minDay = new Date(minYear, minMonth - 1, minDate, minHour, minMinute);
|
const minDay = new Date(minYear, minMonth - 1, minDate, minHour, minMinute);
|
||||||
@ -145,6 +146,7 @@ export default {
|
|||||||
|
|
||||||
return new Date(value);
|
return new Date(value);
|
||||||
},
|
},
|
||||||
|
|
||||||
times(n, iteratee) {
|
times(n, iteratee) {
|
||||||
let index = -1;
|
let index = -1;
|
||||||
const result = Array(n);
|
const result = Array(n);
|
||||||
@ -154,6 +156,7 @@ export default {
|
|||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
|
|
||||||
getBoundary(type, value) {
|
getBoundary(type, value) {
|
||||||
const boundary = this[`${type}Date`];
|
const boundary = this[`${type}Date`];
|
||||||
const year = boundary.getFullYear();
|
const year = boundary.getFullYear();
|
||||||
@ -190,6 +193,7 @@ export default {
|
|||||||
[`${type}Minute`]: minute
|
[`${type}Minute`]: minute
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getTrueValue(formattedValue) {
|
getTrueValue(formattedValue) {
|
||||||
if (!formattedValue) return;
|
if (!formattedValue) return;
|
||||||
while (isNaN(parseInt(formattedValue, 10))) {
|
while (isNaN(parseInt(formattedValue, 10))) {
|
||||||
@ -197,6 +201,7 @@ export default {
|
|||||||
}
|
}
|
||||||
return parseInt(formattedValue, 10);
|
return parseInt(formattedValue, 10);
|
||||||
},
|
},
|
||||||
|
|
||||||
getMonthEndDay(year, month) {
|
getMonthEndDay(year, month) {
|
||||||
if (this.isShortMonth(month)) {
|
if (this.isShortMonth(month)) {
|
||||||
return 30;
|
return 30;
|
||||||
@ -206,16 +211,20 @@ export default {
|
|||||||
return 31;
|
return 31;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
isLeapYear(year) {
|
isLeapYear(year) {
|
||||||
return (year % 400 === 0) || (year % 100 !== 0 && year % 4 === 0);
|
return (year % 400 === 0) || (year % 100 !== 0 && year % 4 === 0);
|
||||||
},
|
},
|
||||||
|
|
||||||
isShortMonth(month) {
|
isShortMonth(month) {
|
||||||
return [4, 6, 9, 11].indexOf(month) > -1;
|
return [4, 6, 9, 11].indexOf(month) > -1;
|
||||||
},
|
},
|
||||||
handlePickerConfirm() {
|
|
||||||
|
onConfirm() {
|
||||||
this.$emit('confirm', this.innerValue);
|
this.$emit('confirm', this.innerValue);
|
||||||
},
|
},
|
||||||
handlePickerChange(picker) {
|
|
||||||
|
onChange(picker) {
|
||||||
const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue);
|
const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue);
|
||||||
let value;
|
let value;
|
||||||
|
|
||||||
@ -239,6 +248,7 @@ export default {
|
|||||||
this.innerValue = value;
|
this.innerValue = value;
|
||||||
this.$emit('change', picker);
|
this.$emit('change', picker);
|
||||||
},
|
},
|
||||||
|
|
||||||
updateColumnValue(value) {
|
updateColumnValue(value) {
|
||||||
let values = [];
|
let values = [];
|
||||||
if (this.type === 'time') {
|
if (this.type === 'time') {
|
||||||
@ -264,6 +274,7 @@ export default {
|
|||||||
this.setColumnByValues(values);
|
this.setColumnByValues(values);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
setColumnByValues(values) {
|
setColumnByValues(values) {
|
||||||
if (!this.$refs.picker) {
|
if (!this.$refs.picker) {
|
||||||
return;
|
return;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user