mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-30 11:16:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(date-picker): shortcuts support function type (#2617)

Browse Source 
re #2598
This commit is contained in:
kooriookami 2021-07-22 17:49:52 +08:00 committed by GitHub
parent 5699b710be
commit 6ddd84d61a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 270 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/date-picker/src/date-picker-com/panel-date-pick.vue
View File

@ -288,8 +288,9 @@ export default defineComponent({
})
const handleShortcutClick = shortcut => {
if (shortcut.value) {
emit(dayjs(shortcut.value))
const shortcutValue = typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value
if (shortcutValue) {
emit(dayjs(shortcutValue))
return
}
if (shortcut.onClick) {

17
packages/date-picker/src/date-picker-com/panel-date-range.vue
View File

@ -424,8 +424,9 @@ export default defineComponent({
}
const handleShortcutClick = shortcut => {
if (shortcut.value) {
ctx.emit('pick', [dayjs(shortcut.value[0]), dayjs(shortcut.value[1])])
const shortcutValues = typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value
if (shortcutValues) {
ctx.emit('pick', [dayjs(shortcutValues[0]), dayjs(shortcutValues[1])])
return
}
if (shortcut.onClick) {
@ -509,7 +510,6 @@ export default defineComponent({
}
const handleMinTimePick = (value, visible, first) => {
if (timeUserInput.value.min) return
if (value) {
@ -579,7 +579,16 @@ export default defineComponent({
ctx.emit('set-picker-option', ['handleClear', handleClear])
const pickerBase = inject('EP_PICKER_BASE') as any
const { shortcuts, disabledDate, cellClassName, format, defaultTime, defaultValue, arrowControl, clearable } = pickerBase.props
const {
shortcuts,
disabledDate,
cellClassName,
format,
defaultTime,
defaultValue,
arrowControl,
clearable,
} = pickerBase.props
watch(() => props.parsedValue, newVal => {
if (newVal && newVal.length === 2) {

5
packages/date-picker/src/date-picker-com/panel-month-range.vue
View File

@ -115,8 +115,9 @@ export default defineComponent({
const hasShortcuts = computed(() => !!shortcuts.length)
const handleShortcutClick = shortcut => {
if (shortcut.value) {
ctx.emit('pick', [dayjs(shortcut.value[0]), dayjs(shortcut.value[1])])
const shortcutValues = typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value
if (shortcutValues) {
ctx.emit('pick', [dayjs(shortcutValues[0]), dayjs(shortcutValues[1])])
return
}
if (shortcut.onClick) {

2
packages/descriptions/src/description-item.ts
View File

@ -5,7 +5,7 @@ export default defineComponent({
props: {
label: {
type: String,
default: '1',
default: '',
},
span: {
type: Number,

58
website/docs/en-US/date-picker.md
View File

@ -44,18 +44,18 @@ Basic date picker measured by 'day'.
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
})(),
},
}, {
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
})(),
},
}],
value1: '',
value2: '',
@ -81,19 +81,19 @@ Basic date picker measured by 'day'.
},
{
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -233,28 +233,28 @@ Picking a date range is supported.
return {
shortcuts: [{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
})(),
},
}, {
text: 'Last month',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
})(),
},
}, {
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -273,30 +273,30 @@ Picking a date range is supported.
shortcuts: [
{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: '',
@ -356,19 +356,19 @@ Picking a month range is supported.
value: [new Date(), new Date()],
}, {
text: 'This year',
value: (() => {
value: () => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
})(),
},
}, {
text: 'Last 6 months',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 6)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -391,20 +391,20 @@ Picking a month range is supported.
},
{
text: 'This year',
value: (() => {
value: () => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
},
{
text: 'Last 6 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
},
],
value1: '',
@ -655,7 +655,7 @@ Note, date time locale (month name, first day of the week ...) are also configed
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
| validate-event | whether to trigger form validation | boolean | - | true |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: Date }] | — | — |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
### Events
| Event Name | Description | Parameters |

42
website/docs/en-US/datetime-picker.md
View File

@ -49,18 +49,18 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
},
}, {
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
},
}],
value1: '',
value2: '',
@ -85,19 +85,19 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
},
{
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -152,28 +152,28 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
return {
shortcuts: [{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end]
})()
}
}, {
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end]
})()
}
}, {
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end]
})()
}
}],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
@ -192,30 +192,30 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
shortcuts: [
{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
@ -328,7 +328,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: Date }] | — | — |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |

58
website/docs/es/date-picker.md
View File

@ -45,18 +45,18 @@ Date Picker básico por "día".
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
})(),
},
}, {
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
})(),
},
}],
value1: '',
value2: '',
@ -82,19 +82,19 @@ Date Picker básico por "día".
},
{
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -235,28 +235,28 @@ Se soporta la selección de un rango de fechas.
return {
shortcuts: [{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
})(),
},
}, {
text: 'Last month',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
})(),
},
}, {
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -275,30 +275,30 @@ Se soporta la selección de un rango de fechas.
shortcuts: [
{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: '',
@ -358,19 +358,19 @@ Se admite la selección de un intervalo de un mes.
value: [new Date(), new Date()],
}, {
text: 'This year',
value: (() => {
value: () => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
})(),
},
}, {
text: 'Last 6 months',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 6)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -393,20 +393,20 @@ Se admite la selección de un intervalo de un mes.
},
{
text: 'This year',
value: (() => {
value: () => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
},
{
text: 'Last 6 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
},
],
value1: '',
@ -657,7 +657,7 @@ Note, date time locale (month name, first day of the week ...) are also configed
| prefix-icon | Clase personalizada para el icono prefijado | string | — | el-icon-date |
| clear-icon | Clase personalizada para el icono `clear` | string | — | el-icon-circle-close |
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function | — | — |
| shortcuts | un array de objetos para establecer opciones de acceso directo | object[{ text: string, value: Date }] | — | — |
| shortcuts | un array de objetos para establecer opciones de acceso directo | object[{ text: string, value: date / function }] | — | — |
### Eventos
| Nombre | Descripción | Parametros |

42
website/docs/es/datetime-picker.md
View File

@ -50,18 +50,18 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
},
}, {
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
},
}],
value1: '',
value2: '',
@ -86,19 +86,19 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
},
{
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -153,28 +153,28 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
return {
shortcuts: [{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end]
})()
}
}, {
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end]
})()
}
}, {
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end]
})()
}
}],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
@ -193,30 +193,30 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
shortcuts: [
{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
@ -330,7 +330,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
| prefix-icon | Clase personalizada para el icono prefijado | string | — | el-icon-date |
| clear-icon | Clase personalizada para el icono `clear` | string | — | el-icon-circle-close |
| validate-event | si se debe disparar la validacion | boolean | - | true |
| shortcuts | un array de objetos para establecer opciones de acceso directo | object[{ text: string, value: Date }] | — | — |
| shortcuts | un array de objetos para establecer opciones de acceso directo | object[{ text: string, value: date / function }] | — | — |
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función | — | — |
| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |

58
website/docs/fr-FR/date-picker.md
View File

@ -43,18 +43,18 @@ L'unité de base du DatePicker est le jour.
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
})(),
},
}, {
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
})(),
},
}],
value1: '',
value2: '',
@ -80,19 +80,19 @@ L'unité de base du DatePicker est le jour.
},
{
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -232,28 +232,28 @@ Vous pouvez sélectionner une plage de dates.
return {
shortcuts: [{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
})(),
},
}, {
text: 'Last month',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
})(),
},
}, {
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -272,30 +272,30 @@ Vous pouvez sélectionner une plage de dates.
shortcuts: [
{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: '',
@ -355,19 +355,19 @@ Vous pouvez sélectionner une plage de mois.
value: [new Date(), new Date()],
}, {
text: 'This year',
value: (() => {
value: () => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
})(),
},
}, {
text: 'Last 6 months',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 6)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -390,20 +390,20 @@ Vous pouvez sélectionner une plage de mois.
},
{
text: 'This year',
value: (() => {
value: () => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
},
{
text: 'Last 6 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
},
],
value1: '',
@ -655,7 +655,7 @@ Note, date time locale (month name, first day of the week ...) are also configed
| clear-icon | Icône de reset. | string | — | el-icon-circle-close |
| validate-event | Si la validation doit être déclenchée. | boolean | - | true |
| disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
| shortcuts | Un tableau d'objets pour configurer les raccourcis | object[{ text: string, value: Date }] | — | — |
| shortcuts | Un tableau d'objets pour configurer les raccourcis | object[{ text: string, value: date / function }] | — | — |
### Raccourcis
| Attribut | Description | Type | Valeurs acceptées | Défaut |

42
website/docs/fr-FR/datetime-picker.md
View File

@ -49,18 +49,18 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
value: new Date(),
}, {
text: 'Hier',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
},
}, {
text: 'Il y a une semaine',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
},
}],
value1: '',
value2: '',
@ -85,19 +85,19 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
},
{
text: 'Hier',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: 'Il y a une semaine',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -152,28 +152,28 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
return {
shortcuts: [{
text: 'La semaine passée',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end]
})()
}
}, {
text: 'Le mois dernier',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end]
})()
}
}, {
text: 'Les 2 derniers mois',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end]
})()
}
}],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
@ -192,30 +192,30 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
shortcuts: [
{
text: 'La semaine passée',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: 'Le mois dernier',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: 'Les 2 derniers mois',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
@ -328,7 +328,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
| unlink-panels | Rend indépendants les deux panneaux de plage de dates | boolean | — | false |
| prefix-icon | Icône de préfixe. | string | — | el-icon-date |
| clear-icon | Icône de reset | string | — | el-icon-circle-close |
| shortcuts | Un tableau d'objets pour configurer les raccourcis | object[{ text: string, value: Date }] | — | — |
| shortcuts | Un tableau d'objets pour configurer les raccourcis | object[{ text: string, value: date / function }] | — | — |
| disabledDate | Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |

58
website/docs/jp/date-picker.md
View File

@ -42,18 +42,18 @@
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
})(),
},
}, {
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
})(),
},
}],
value1: '',
value2: '',
@ -79,19 +79,19 @@
},
{
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -230,28 +230,28 @@
return {
shortcuts: [{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
})(),
},
}, {
text: 'Last month',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
})(),
},
}, {
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -270,30 +270,30 @@
shortcuts: [
{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: '',
@ -352,19 +352,19 @@
value: [new Date(), new Date()],
}, {
text: 'This year',
value: (() => {
value: () => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
})(),
},
}, {
text: 'Last 6 months',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 6)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -387,20 +387,20 @@
},
{
text: 'This year',
value: (() => {
value: () => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
},
{
text: 'Last 6 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
},
],
value1: '',
@ -650,7 +650,7 @@ Note, date time locale (month name, first day of the week ...) are also configed
| prefix-icon | カスタムプレフィックスアイコン | string | — | el-icon-date |
| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
| validate-event | フォームバリデーションをトリガするかどうか | boolean | - | true |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: Date }] | — | — |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| disabledDate | 日付をパラメータとして、その日付が無効化されているかどうかを判断する関数です。ブーリアンを返す必要があります。 | function | — | — |

42
website/docs/jp/datetime-picker.md
View File

@ -49,18 +49,18 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
},
}, {
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
},
}],
value1: '',
value2: '',
@ -85,19 +85,19 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
},
{
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -152,28 +152,28 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
return {
shortcuts: [{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end]
})()
}
}, {
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end]
})()
}
}, {
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end]
})()
}
}],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
@ -192,30 +192,30 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
shortcuts: [
{
text: 'Last week',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: 'Last month',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: 'Last 3 months',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
@ -328,7 +328,7 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
| unlink-panels | レンジピッカーで2つのデータパネルのリンクを解除する | boolean | — | false |
| prefix-icon | カスタムプレフィックスアイコンクラス | string | — | el-icon-date |
| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: Date }] | — | — |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: date / function }] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |

58
website/docs/zh-CN/date-picker.md
View File

@ -43,18 +43,18 @@
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
})(),
},
}, {
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
})(),
},
}],
value1: '',
value2: '',
@ -80,19 +80,19 @@
},
{
text: 'Yesterday',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: 'A week ago',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -229,28 +229,28 @@
return {
shortcuts: [{
text: '最近一周',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
})(),
},
}, {
text: '最近一个月',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
})(),
},
}, {
text: '最近三个月',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -269,30 +269,30 @@ import { defineComponent, reactive, toRefs } from 'vue';
shortcuts: [
{
text: '最近一周',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: '最近一个月',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: '最近三个月',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: '',
@ -352,19 +352,19 @@ import { defineComponent, reactive, toRefs } from 'vue';
value: [new Date(), new Date()],
}, {
text: '今年至今',
value: (() => {
value: () => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
})(),
},
}, {
text: '最近六个月',
value: (() => {
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 6)
return [start, end]
})(),
},
}],
value1: '',
value2: ''
@ -387,20 +387,20 @@ import { defineComponent, reactive, toRefs } from 'vue';
},
{
text: '今年至今',
value: (() => {
value: () => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
},
{
text: '最近六个月',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
},
],
value1: '',
@ -647,7 +647,7 @@ import { defineComponent, ref } from 'vue';
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
| shortcuts | 设置快捷选项，需要传入数组对象 | object[{ text: string, value: Date }] | — | — |
| shortcuts | 设置快捷选项，需要传入数组对象 | object[{ text: string, value: date / function }] | — | — |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
### Events

42
website/docs/zh-CN/datetime-picker.md
View File

@ -48,18 +48,18 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
value: new Date(),
}, {
text: '昨天',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date
})(),
},
}, {
text: '一周前',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date
})(),
},
}],
value1: '',
value2: '',
@ -84,19 +84,19 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
},
{
text: '昨天',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
},
{
text: '一周前',
value: (() => {
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
},
],
value1: '',
@ -150,28 +150,28 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
return {
shortcuts: [{
text: '最近一周',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end]
})()
}
}, {
text: '最近一个月',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end]
})()
}
}, {
text: '最近三个月',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end]
})()
}
}],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: ''
@ -190,30 +190,30 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
shortcuts: [
{
text: '最近一周',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
},
{
text: '最近一个月',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
},
{
text: '最近三个月',
value: (() => {
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
},
],
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
@ -326,7 +326,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
| shortcuts | 设置快捷选项，需要传入数组对象 | object[{ text: string, value: Date }] | — | — |
| shortcuts | 设置快捷选项，需要传入数组对象 | object[{ text: string, value: date / function }] | — | — |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
| cellClassName | 设置日期的 className | Function(Date) | — | — |