javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): DateTimePicker code for composition (#2163)

Browse Source 
Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
Xing.Wu
2021-06-08 13:28:18 +08:00
committed by GitHub
parent c7debd978c
commit 5f9971e60e
5 changed files with 590 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,6 +70,50 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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: '',
value3: '',
defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -138,6 +182,55 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
}
};
</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: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -186,6 +279,31 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
defaultTime2: [
new Date(2000, 1, 1, 12, 0, 0),
new Date(2000, 2, 1, 8, 0, 0),
], // '12:00:00', '08:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::

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

@@ -71,6 +71,50 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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: '',
value3: '',
defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -139,6 +183,55 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
}
};
</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: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -187,6 +280,31 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
defaultTime2: [
new Date(2000, 1, 1, 12, 0, 0),
new Date(2000, 2, 1, 8, 0, 0),
], // '12:00:00', '08:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::

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

@@ -70,6 +70,50 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: "Aujourd'hui",
value: new Date(),
},
{
text: 'Hier',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
{
text: 'Il y a une semaine',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
],
value1: '',
value2: '',
value3: '',
defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -138,6 +182,55 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: 'La semaine passée',
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: (() => {
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: (() => {
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: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -186,6 +279,31 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
defaultTime2: [
new Date(2000, 1, 1, 12, 0, 0),
new Date(2000, 2, 1, 8, 0, 0),
], // '12:00:00', '08:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::

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

@@ -70,6 +70,50 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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: '',
value3: '',
defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -138,6 +182,55 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
}
};
</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: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -186,6 +279,31 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
defaultTime2: [
new Date(2000, 1, 1, 12, 0, 0),
new Date(2000, 2, 1, 8, 0, 0),
], // '12:00:00', '08:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::

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

@@ -70,6 +70,50 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
shortcuts: [
{
text: '今天',
value: new Date(),
},
{
text: '昨天',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
})(),
},
{
text: '一周前',
value: (() => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
})(),
},
],
value1: '',
value2: '',
value3: '',
defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -137,6 +181,55 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
}
};
</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: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value2: '',
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::
@@ -185,6 +278,31 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
}
};
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value1: '',
value2: '',
defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
defaultTime2: [
new Date(2000, 1, 1, 12, 0, 0),
new Date(2000, 2, 1, 8, 0, 0),
], // '12:00:00', '08:00:00'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
```
:::