test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

doc(): DatePicker code for composition (#2162)

Browse Source 
Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
Xing.Wu 2021-06-08 13:11:15 +08:00 committed by GitHub
parent df4053350a
commit 5a276e48bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1035 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,6 +63,51 @@ Basic date picker measured by 'day'.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: 'Today',
value: new Date(),
},
{
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
{
text: 'A week ago',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -123,6 +168,28 @@ You can choose week, month, year or multiple dates by extending the standard dat
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
value3: '',
value4: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -196,6 +263,55 @@ Picking a date range is supported.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: 'Last week',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
{
text: 'Last month',
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: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -262,6 +378,49 @@ Picking a month range is supported.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: 'This month',
value: [new Date(), new Date()],
},
{
text: 'This year',
value: (() => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
{
text: 'Last 6 months',
value: (() => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -306,6 +465,25 @@ If type is `daterange`, `default-value` sets the left side calendar.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value1 = ref('');
const value2 = ref('');
return {
value1,
value2,
};
},
});
</setup>
-->
```
:::
@ -356,6 +534,25 @@ Pay attention to capitalization
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value1 = ref('');
const value2 = ref('');
return {
value1,
value2,
};
},
});
</setup>
-->
```
:::
@ -391,6 +588,28 @@ When picking a date range, you can assign the time part for start date and end d
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value = ref('');
const defaultTime = ref([
new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59),
]); // '00:00:00', '23:59:59'
return {
value,
defaultTime,
};
},
});
</setup>
-->
```
:::

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

@ -64,6 +64,51 @@ Date Picker básico por "día".
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: 'Today',
value: new Date(),
},
{
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
{
text: 'A week ago',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -125,6 +170,28 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
value3: '',
value4: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -198,6 +265,55 @@ Se soporta la selección de un rango de fechas.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: 'Last week',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
{
text: 'Last month',
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: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -264,6 +380,49 @@ Se admite la selección de un intervalo de un mes.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: 'This month',
value: [new Date(), new Date()],
},
{
text: 'This year',
value: (() => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
{
text: 'Last 6 months',
value: (() => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -308,6 +467,25 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value1 = ref('');
const value2 = ref('');
return {
value1,
value2,
};
},
});
</setup>
-->
```
:::
@ -395,6 +573,28 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value = ref('');
const defaultTime = ref([
new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59),
]); // '00:00:00', '23:59:59'
return {
value,
defaultTime,
};
},
});
</setup>
-->
```
:::

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

@ -62,6 +62,51 @@ L'unité de base du DatePicker est le jour.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: 'Today',
value: new Date(),
},
{
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
{
text: 'A week ago',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -122,6 +167,28 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
value3: '',
value4: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -195,6 +262,55 @@ Vous pouvez sélectionner une plage de dates.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: 'Last week',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
{
text: 'Last month',
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: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -261,6 +377,49 @@ Vous pouvez sélectionner une plage de mois.
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: 'This month',
value: [new Date(), new Date()],
},
{
text: 'This year',
value: (() => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
{
text: 'Last 6 months',
value: (() => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -305,6 +464,25 @@ Si le type est `daterange`, `default-value` configure la panneau de gauche.
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value1 = ref('');
const value2 = ref('');
return {
value1,
value2,
};
},
});
</setup>
-->
```
:::
@ -392,6 +570,28 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value = ref('');
const defaultTime = ref([
new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59),
]); // '00:00:00', '23:59:59'
return {
value,
defaultTime,
};
},
});
</setup>
-->
```
:::

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

@ -61,6 +61,51 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: 'Today',
value: new Date(),
},
{
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
{
text: 'A week ago',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -121,6 +166,28 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
value3: '',
value4: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -193,6 +260,55 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: 'Last week',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
{
text: 'Last month',
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: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -258,6 +374,49 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: 'This month',
value: [new Date(), new Date()],
},
{
text: 'This year',
value: (() => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
{
text: 'Last 6 months',
value: (() => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -302,6 +461,25 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value1 = ref('');
const value2 = ref('');
return {
value1,
value2,
};
},
});
</setup>
-->
```
:::
@ -388,6 +566,28 @@ Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-avai
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value = ref('');
const defaultTime = ref([
new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59),
]); // '00:00:00', '23:59:59'
return {
value,
defaultTime,
};
},
});
</setup>
-->
```
:::

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

@ -63,6 +63,51 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: 'Today',
value: new Date(),
},
{
text: 'Yesterday',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
{
text: 'A week ago',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -122,6 +167,28 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
value3: '',
value4: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -193,6 +260,55 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: '最近一周',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
})(),
},
{
text: '最近一个月',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
})(),
},
{
text: '最近三个月',
value: (() => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -259,6 +375,49 @@
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: '本月',
value: [new Date(), new Date()],
},
{
text: '今年至今',
value: (() => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
})(),
},
{
text: '最近六个月',
value: (() => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
})(),
},
],
value1: '',
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@ -303,6 +462,25 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value1 = ref('');
const value2 = ref('');
return {
value1,
value2,
};
},
});
</setup>
-->
```
:::
@ -350,11 +528,26 @@
return {
value1: '',
value2: '',
value3: ''
};
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
value1: ref(''),
value2: ref(''),
};
},
});
</setup>
-->
```
:::
@ -390,6 +583,28 @@
}
};
</script>
<!--
<setup>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const value = ref('');
const defaultTime = ref([
new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59),
]); // '00:00:00', '23:59:59'
return {
value,
defaultTime,
};
},
});
</setup>
-->
```
:::