forked from opentiny/tiny-vue
docs: optimzie date picker demo/api (#486)
* docs(date-picker): adjust the order of api * docs(date-picker): optimize basic-usage demo * docs(date-picker): optimize date-range demo * docs(date-picker): add multiple-dates demo * docs(date-picker): optimize disabled demo * docs(date-picker): optimize shortcuts demo * docs(date-picker): remove useless demo * docs(date-picker): optimize default-value demo * docs(date-picker): optimize size demo * docs(date-picker): optimize format demo * docs(date-picker): optimize clear demo * docs(date-picker): optimize align demo * docs(date-picker): remove readonly/editable demo * docs(date-picker): optimize filter-mode demo * docs(date-picker): optimize custom-suffix-icon demo * docs(date-picker): optimize custom-weeks demo * docs(date-picker): optimize label-inside demo * docs(date-picker): optimize step/time-arrow-control demo * docs(date-picker): optimize unlink-panels demo * docs(date-picker): merge start-from-end-at to shortcuts demo * docs(date-picker): optimize timezone/isutc8 demo * docs(date-picker): optimize events demo * docs(date-picker): optimize validate-event demo * docs(date-picker): adjust demo order * docs(date-picker): update component description
This commit is contained in:
GitHub
parent
3c3c433ddd
commit
4bee278c6a
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<label>不可清除：</label>
|
||||
<tiny-date-picker v-model="value1" :clearable="false"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<label>自定义清除图标：</label>
|
||||
<tiny-date-picker v-model="value2" :clear-icon="IconMinus"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
import { iconMinus } from '@opentiny/vue-icon'
|
||||
|
||||
const value1 = ref(new Date())
|
||||
const value2 = ref(new Date('2023-05-24'))
|
||||
const IconMinus = iconMinus()
|
||||
</script>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<label>不可清除：</label>
|
||||
<tiny-date-picker v-model="value1" :clearable="false"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<label>自定义清除图标：</label>
|
||||
<tiny-date-picker v-model="value2" :clear-icon="IconMinus"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col, DatePicker } from '@opentiny/vue'
|
||||
import { IconMinus } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col,
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(),
|
||||
value2: new Date('2023-05-24'),
|
||||
IconMinus: IconMinus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="4">
|
||||
<p>value-format 默认为 Date 对象</p>
|
||||
<p>值：{{ value1 }}</p>
|
||||
<tiny-date-picker v-model="value1" format="yyyy 年 MM 月 dd 日"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<p>value-format 为 timestamp 时间戳</p>
|
||||
<p>值：{{ value2 }}</p>
|
||||
<tiny-date-picker
|
||||
v-model="value2"
|
||||
format="yyyy 年 M 月 d 日 H 时 m 分钟 s 秒 A"
|
||||
value-format="timestamp"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<p>value-format 为 yyyy-MM-dd 格式</p>
|
||||
<p>值：{{ value3 }}</p>
|
||||
<tiny-date-picker v-model="value3" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date('2023-05-24'))
|
||||
const value2 = ref(1590076800000)
|
||||
const value3 = ref('2020-05-22')
|
||||
</script>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="4">
|
||||
<p>value-format 默认为 Date 对象</p>
|
||||
<p>值：{{ value1 }}</p>
|
||||
<tiny-date-picker v-model="value1" format="yyyy 年 MM 月 dd 日"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<p>value-format 为 timestamp 时间戳</p>
|
||||
<p>值：{{ value2 }}</p>
|
||||
<tiny-date-picker
|
||||
v-model="value2"
|
||||
format="yyyy 年 M 月 d 日 H 时 m 分钟 s 秒 A"
|
||||
value-format="timestamp"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<p>value-format 为 yyyy-MM-dd 格式</p>
|
||||
<p>值：{{ value3 }}</p>
|
||||
<tiny-date-picker v-model="value3" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker, Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker,
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date('2023-05-24'),
|
||||
value2: 1590076800000,
|
||||
value3: '2020-05-22'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,25 +1,31 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<label>左对齐：</label>
|
||||
<tiny-date-picker v-model="value" align="left"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<label>右对齐：</label>
|
||||
<tiny-date-picker v-model="value" align="right"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<label>居中对齐：</label>
|
||||
<tiny-date-picker v-model="value" align="center"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
<div>
|
||||
<p>左对齐：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" align="left"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>居中对齐：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" align="center"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>右对齐：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" align="right"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,27 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<label>左对齐：</label>
|
||||
<tiny-date-picker v-model="value" align="left"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<label>右对齐：</label>
|
||||
<tiny-date-picker v-model="value" align="right"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<label>居中对齐：</label>
|
||||
<tiny-date-picker v-model="value" align="center"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
<div>
|
||||
<p>左对齐：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" align="left"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>居中对齐：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" align="center"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>右对齐：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" align="right"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col, DatePicker } from '@opentiny/vue'
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col,
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
|
|
@ -34,3 +31,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,30 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker v-model="value"></tiny-date-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetime" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="weekValue" type="week" placeholder="请选择周"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="monthValue" type="month" placeholder="请选择月份"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="yearValue" type="year" placeholder="请选择年份"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const dateTimeValue = ref('')
|
||||
const weekValue = ref('')
|
||||
const monthValue = ref('')
|
||||
const yearValue = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker v-model="value"></tiny-date-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetime" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="weekValue" type="week" placeholder="请选择周"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="monthValue" type="month" placeholder="请选择月份"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="yearValue" type="year" placeholder="请选择年份"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -13,8 +17,22 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
value: '',
|
||||
dateTimeValue: '',
|
||||
weekValue: '',
|
||||
monthValue: '',
|
||||
yearValue: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>默认显示清除按钮</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>隐藏清除按钮</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>自定义清除图标</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
import { iconClose } from '@opentiny/vue-icon'
|
||||
|
||||
const value = ref(new Date('2023-05-24'))
|
||||
const IconClose = iconClose()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('[DatePicker] 测试清除输入', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/about-clear')
|
||||
await page.goto('http://localhost:7130/pc/date-picker/clear')
|
||||
const dateInputHasText = page.getByRole('textbox', { name: '2023-05-24' })
|
||||
await expect(dateInputHasText).toBeVisible()
|
||||
await dateInputHasText.hover()
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>默认显示清除按钮</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>隐藏清除按钮</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>自定义清除图标</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
import { iconClose } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: new Date('2023-05-24'),
|
||||
IconClose: iconClose()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
:clearable="false"
|
||||
:arrow-control="true"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { TimePicker as TinyTimePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 40))
|
||||
</script>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
|
||||
placeholder="任意时间点"
|
||||
:clearable="false"
|
||||
:arrow-control="true"
|
||||
></tiny-time-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TimePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimePicker: TimePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2016, 9, 10, 18, 40)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref([])
|
||||
</script>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试范围选择自定义', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/custom-range')
|
||||
expect(page.getByPlaceholder('开始日期')).toBeVisible()
|
||||
expect(page.getByText('至', { exact: true })).toBeVisible()
|
||||
expect(page.getByPlaceholder('结束日期')).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" :suffix-icon="IconMinus" popper-class="Mydatepicker"></tiny-date-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :suffix-icon="IconMinus" popper-class="my-date-picker"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
import { iconMinus } from '@opentiny/vue-icon'
|
||||
|
|
@ -10,3 +12,13 @@ import { iconMinus } from '@opentiny/vue-icon'
|
|||
const value = ref('')
|
||||
const IconMinus = iconMinus()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.my-date-picker {
|
||||
background: #ddd;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" :suffix-icon="IconMinus" popper-class="Mydatepicker"></tiny-date-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :suffix-icon="IconMinus" popper-class="my-date-picker"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
import { IconMinus } from '@opentiny/vue-icon'
|
||||
import { iconMinus } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -13,8 +15,18 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
value: '',
|
||||
IconMinus: IconMinus()
|
||||
IconMinus: iconMinus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.my-date-picker {
|
||||
background-color: #ddd;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
{{ eachWeekFirstDay }}
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
:picker-options="pickerOptionsDateRange"
|
||||
show-week-number
|
||||
:format-weeks="formatWeeks"
|
||||
></tiny-date-picker>
|
||||
<p>默认隐藏周次序号：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>显示周次序号：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" show-week-number></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>自定义周次序号的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" show-week-number :format-weeks="formatWeeks"></tiny-date-picker>
|
||||
</div>
|
||||
<p>weekFirstDays: {{ eachWeekFirstDay }}</p>
|
||||
|
||||
<p>自定义每周第一天是星期几：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :picker-options="pickerOptions"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -16,8 +29,8 @@ import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
|||
|
||||
const eachWeekFirstDay = ref([])
|
||||
const value = ref('')
|
||||
const pickerOptionsDateRange = ref({
|
||||
firstDayOfWeek: 7
|
||||
const pickerOptions = ref({
|
||||
firstDayOfWeek: 1
|
||||
})
|
||||
|
||||
function formatWeeks(customWeeks, weekFirstDays) {
|
||||
|
|
@ -25,3 +38,9 @@ function formatWeeks(customWeeks, weekFirstDays) {
|
|||
return customWeeks + 'w'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('测试周次序号', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/custom-weeks')
|
||||
})
|
||||
|
|
@ -1,12 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
{{ eachWeekFirstDay }}
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
:picker-options="pickerOptionsDateRange"
|
||||
show-week-number
|
||||
:format-weeks="formatWeeks"
|
||||
></tiny-date-picker>
|
||||
<p>默认隐藏周次序号：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>显示周次序号：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" show-week-number></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>自定义周次序号的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" show-week-number :format-weeks="formatWeeks"></tiny-date-picker>
|
||||
</div>
|
||||
<p>weekFirstDays: {{ eachWeekFirstDay }}</p>
|
||||
|
||||
<p>自定义每周第一天是星期几：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :picker-options="pickerOptions"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -21,8 +34,8 @@ export default {
|
|||
return {
|
||||
eachWeekFirstDay: [],
|
||||
value: '',
|
||||
pickerOptionsDateRange: {
|
||||
firstDayOfWeek: 7
|
||||
pickerOptions: {
|
||||
firstDayOfWeek: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -34,3 +47,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
|
||||
<tiny-date-picker v-model="value" :disabled="disabled"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const disabled = ref(false)
|
||||
|
||||
function Switchover() {
|
||||
disabled.value = !disabled.value
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
|
||||
<tiny-date-picker v-model="value" :disabled="disabled"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
Switchover() {
|
||||
this.disabled = !this.disabled
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<template>
|
||||
<tiny-form :inline="true" label-suffix="：">
|
||||
<tiny-form-item label="最大值">
|
||||
{{ max }}
|
||||
<tiny-date-picker v-model="max" :picker-options="maxOptions"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="最小值">
|
||||
<tiny-date-picker v-model="min" :picker-options="minOptions"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker, Form as TinyForm, FormItem as TinyFormItem } from '@opentiny/vue'
|
||||
|
||||
const max = ref(new Date())
|
||||
const min = ref(new Date())
|
||||
const maxOptions = ref({
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
})
|
||||
const minOptions = ref({
|
||||
disabledDate(time) {
|
||||
return time.getTime() < Date.now()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<template>
|
||||
<tiny-form :inline="true" label-suffix="：">
|
||||
<tiny-form-item label="最大值">
|
||||
{{ max }}
|
||||
<tiny-date-picker v-model="max" :picker-options="maxOptions"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="最小值">
|
||||
<tiny-date-picker v-model="min" :picker-options="minOptions"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker, Form, FormItem } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker,
|
||||
TinyForm: Form,
|
||||
TinyFormItem: FormItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
max: new Date(),
|
||||
min: new Date(),
|
||||
maxOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
},
|
||||
minOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() < Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,27 +1,28 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期值：{{ value }}</p>
|
||||
<tiny-date-picker v-model="value" type="daterange" :picker-options="onPickOptions"></tiny-date-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="monthValue" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份" range-separator="至"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="yearValue" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份" range-separator="至"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker, Modal } from '@opentiny/vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref([new Date(2023, 4, 15), new Date(2023, 4, 21)])
|
||||
const onPickOptions = ref({
|
||||
onPick: (val) => {
|
||||
if (val.maxDate) {
|
||||
Modal.message({
|
||||
message: '当前获取的值 maxDate' + val.maxDate,
|
||||
status: 'info'
|
||||
})
|
||||
Modal.message({
|
||||
message: '当前获取的值 minDate：' + val.minDate,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
const value = ref('')
|
||||
const dateTimeValue = ref('')
|
||||
const monthValue = ref('')
|
||||
const yearValue = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 350px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="daterange" :picker-options="pickerOptionsDateRange"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref([])
|
||||
const pickerOptionsDateRange = ref({
|
||||
firstDayOfWeek: 7,
|
||||
shortcuts: [
|
||||
{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
// 将日期格式化为 YYYY-MM-DD 格式
|
||||
const formatDate = (date) => date.toISOString().slice(0, 10)
|
||||
|
||||
test('[DatePicker] 测试日期范围快捷选项', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/date-range-shortcuts')
|
||||
const dateInputStartDate = page.getByRole('textbox').nth(1)
|
||||
|
||||
// 最近一周
|
||||
const startDateWeek = new Date()
|
||||
startDateWeek.setTime(startDateWeek.getTime() - 3600 * 1000 * 24 * 7)
|
||||
|
||||
// 最近一个月
|
||||
const startDateMonth = new Date()
|
||||
startDateMonth.setTime(startDateMonth.getTime() - 3600 * 1000 * 24 * 30)
|
||||
|
||||
// 最近三个月
|
||||
const startDateThreeMonth = new Date()
|
||||
startDateThreeMonth.setTime(startDateThreeMonth.getTime() - 3600 * 1000 * 24 * 90)
|
||||
|
||||
await dateInputStartDate.click()
|
||||
await page.getByRole('button', { name: '最近一周' }).click()
|
||||
expect(await dateInputStartDate.inputValue()).toBe(formatDate(startDateWeek))
|
||||
|
||||
await dateInputStartDate.click()
|
||||
await page.getByRole('button', { name: '最近一个月' }).click()
|
||||
expect(await dateInputStartDate.inputValue()).toBe(formatDate(startDateMonth))
|
||||
|
||||
await dateInputStartDate.click()
|
||||
await page.getByRole('button', { name: '最近三个月' }).click()
|
||||
expect(await dateInputStartDate.inputValue()).toBe(formatDate(startDateThreeMonth))
|
||||
})
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="daterange" :picker-options="pickerOptionsDateRange"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [],
|
||||
pickerOptionsDateRange: {
|
||||
firstDayOfWeek: 7,
|
||||
shortcuts: [
|
||||
{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期值：{{ value }}</p>
|
||||
<tiny-date-picker v-model="value" type="daterange" :picker-options="onPickOptions"></tiny-date-picker>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="monthValue" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份" range-separator="至"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="yearValue" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份" range-separator="至"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker, Modal } from '@opentiny/vue'
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -14,22 +16,21 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value: [new Date(2023, 4, 15), new Date(2023, 4, 21)],
|
||||
onPickOptions: {
|
||||
onPick: (val) => {
|
||||
if (val.maxDate) {
|
||||
Modal.message({
|
||||
message: '当前获取的值 maxDate' + val.maxDate,
|
||||
status: 'info'
|
||||
})
|
||||
Modal.message({
|
||||
message: '当前获取的值 minDate：' + val.minDate,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
value: '',
|
||||
dateTimeValue: '',
|
||||
monthValue: '',
|
||||
yearValue: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 350px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker v-model="value" :picker-options="pickerOptions"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const pickerOptions = ref({
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now()
|
||||
},
|
||||
shortcuts: [
|
||||
{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker v-model="value" :picker-options="pickerOptions"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now()
|
||||
},
|
||||
shortcuts: [
|
||||
{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期值：{{ value }}</p>
|
||||
<tiny-date-picker v-model="value" type="datetimerange" :default-time="['00:00:00', '23:59:59']"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref([new Date(2023, 4, 15), new Date(2023, 4, 21)])
|
||||
</script>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试日期范围默认时刻', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/default-time-of-range')
|
||||
const startDateDom = page.getByRole('textbox').nth(1)
|
||||
const endDateDom = page.getByRole('textbox').nth(2)
|
||||
|
||||
await page.getByRole('textbox').nth(1).click()
|
||||
await page.getByRole('row', { name: '14 15 16 17 18 19 20' }).getByText('14').click()
|
||||
await page.getByRole('row', { name: '14 15 16 17 18 19 20' }).getByText('20').click()
|
||||
await page.getByPlaceholder('开始时间').click()
|
||||
await page.locator('li:nth-child(2) > span').first().click()
|
||||
await page
|
||||
.locator('div:nth-child(2) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(2) > span')
|
||||
.first()
|
||||
.click()
|
||||
await page
|
||||
.locator('div:nth-child(3) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(2) > span')
|
||||
.first()
|
||||
.click()
|
||||
await page.getByRole('button', { name: '确定' }).first().click()
|
||||
await page.getByPlaceholder('结束时间').click()
|
||||
await page.getByRole('button', { name: '确定' }).last().click()
|
||||
expect(await startDateDom.inputValue()).toBe('2023-05-14 01:01:01')
|
||||
expect(await endDateDom.inputValue()).toBe('2023-05-20 23:59:59')
|
||||
})
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期值：{{ value }}</p>
|
||||
<tiny-date-picker v-model="value" type="datetimerange" :default-time="['00:00:00', '23:59:59']"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [new Date(2023, 4, 15), new Date(2023, 4, 21)]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,14 +1,34 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期值：{{ value }}</p>
|
||||
<tiny-date-picker v-model="value" :default-value="defaultDate" style="width: 270px"></tiny-date-picker>
|
||||
<p>打开日期面板，默认显示的日期</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
|
||||
</div>
|
||||
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetime" :default-value="defaultDate" :default-time="defaultTime"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetimerange" :default-value="defaultDate" :default-time="defaultTimeRange"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref(new Date(2000, 10, 10, 10, 10))
|
||||
const defaultDate = ref(new Date())
|
||||
const value = ref('')
|
||||
const dateTimeValue = ref('')
|
||||
const defaultDate = ref(new Date(2000, 10, 10, 10, 10))
|
||||
const defaultTime = ref('09:00:00')
|
||||
const defaultTimeRange = ref(['09:00:00', '18:00:00'])
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期值：{{ value }}</p>
|
||||
<tiny-date-picker v-model="value" :default-value="defaultDate" style="width: 270px"></tiny-date-picker>
|
||||
<p>打开日期面板，默认显示的日期</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
|
||||
</div>
|
||||
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetime" :default-value="defaultDate" :default-time="defaultTime"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetimerange" :default-value="defaultDate" :default-time="defaultTimeRange"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -14,9 +21,22 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value: new Date(2000, 10, 10, 10, 10),
|
||||
defaultDate: new Date()
|
||||
value: '',
|
||||
dateTimeValue: '',
|
||||
defaultDate: new Date(2000, 10, 10, 10, 10),
|
||||
defaultTime: '09:00:00',
|
||||
defaultTimeRange: ['09:00:00', '18:00:00']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,59 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" disabled></tiny-date-picker>
|
||||
<div>
|
||||
<p>整体禁用：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="disabledValue" disabled placeholder="请选择日期"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>部分禁用：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :picker-options="pickerOptions" placeholder="请选择日期"></tiny-date-picker>
|
||||
</div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker
|
||||
v-model="dateRangeValue"
|
||||
type="daterange"
|
||||
:picker-options="pickerOptions"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>只读模式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="readonlyValue" readonly placeholder="请选择日期"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>文本框不可输入：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="editableValue" :editable="false"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const disabledValue = ref('2020/10/29')
|
||||
const value = ref('')
|
||||
const dateRangeValue = ref('')
|
||||
const readonlyValue = ref('2020/10/29')
|
||||
const editableValue = ref('')
|
||||
|
||||
const pickerOptions = {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now() || time.getTime() < new Date('2023-08-01').getTime()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试禁用状态', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/disabled')
|
||||
})
|
||||
|
|
@ -1,8 +1,37 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" disabled></tiny-date-picker>
|
||||
<div>
|
||||
<p>整体禁用：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="disabledValue" disabled placeholder="请选择日期"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>部分禁用：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :picker-options="pickerOptions" placeholder="请选择日期"></tiny-date-picker>
|
||||
</div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker
|
||||
v-model="dateRangeValue"
|
||||
type="daterange"
|
||||
:picker-options="pickerOptions"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>只读模式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="readonlyValue" readonly placeholder="请选择日期"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>文本框不可输入：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="editableValue" :editable="false"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -11,8 +40,27 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
disabledValue: '2020/10/29',
|
||||
value: '',
|
||||
dateRangeValue: '',
|
||||
readonlyValue: '2020/10/29',
|
||||
editableValue: '',
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now() || time.getTime() < new Date('2023-08-01').getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="daterange" :editable="false"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref([])
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试文本框不可输入', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/editable')
|
||||
const dateInputDom = page.getByRole('textbox').nth(1)
|
||||
await expect(dateInputDom).toHaveAttribute('readonly', '')
|
||||
})
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="daterange" :editable="false"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,22 +2,22 @@
|
|||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="4">
|
||||
<label>blur：</label>
|
||||
<label class="demo-date-picker-label">focus：</label>
|
||||
<tiny-date-picker v-model="value" @focus="handleFocus"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label class="demo-date-picker-label">blur：</label>
|
||||
<tiny-date-picker v-model="value" @blur="handleBlur"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label>change：</label>
|
||||
<label class="demo-date-picker-label">change：</label>
|
||||
<tiny-date-picker v-model="value" @change="handleChange"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label>focus：</label>
|
||||
<tiny-date-picker v-model="value" @focus="handleFocus"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Layout as TinyLayout,
|
||||
|
|
@ -29,15 +29,22 @@ import {
|
|||
|
||||
const value = ref('')
|
||||
|
||||
function handleFocus() {
|
||||
Modal.message({ message: '触发 focus 事件', status: 'info' })
|
||||
}
|
||||
|
||||
function handleBlur() {
|
||||
Modal.message({ message: '可获取组件实例', status: 'info' })
|
||||
Modal.message({ message: '触发 blur 事件', status: 'info' })
|
||||
}
|
||||
|
||||
function handleChange(value) {
|
||||
Modal.message({ message: '组件绑定值为：' + value, status: 'info' })
|
||||
}
|
||||
|
||||
function handleFocus() {
|
||||
Modal.message({ message: '回调参数为组件实例', status: 'info' })
|
||||
Modal.message({ message: '触发 change 事件，组件绑定值为：' + value, status: 'info' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-label {
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
|
|||
|
||||
test('[DatePicker] 测试事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/date-picker-events')
|
||||
await page.goto('http://localhost:7130/pc/date-picker/events')
|
||||
|
||||
// blur 事件
|
||||
await page.getByRole('textbox').nth(1).click()
|
||||
|
|
@ -2,22 +2,22 @@
|
|||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="4">
|
||||
<label>blur：</label>
|
||||
<label class="demo-date-picker-label">focus：</label>
|
||||
<tiny-date-picker v-model="value" @focus="handleFocus"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label class="demo-date-picker-label">blur：</label>
|
||||
<tiny-date-picker v-model="value" @blur="handleBlur"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label>change：</label>
|
||||
<label class="demo-date-picker-label">change：</label>
|
||||
<tiny-date-picker v-model="value" @change="handleChange"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label>focus：</label>
|
||||
<tiny-date-picker v-model="value" @focus="handleFocus"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col, DatePicker, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -33,15 +33,22 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleFocus() {
|
||||
Modal.message({ message: '触发 focus 事件', status: 'info' })
|
||||
},
|
||||
handleBlur() {
|
||||
Modal.message({ message: '可获取组件实例', status: 'info' })
|
||||
Modal.message({ message: '触发 blur 事件', status: 'info' })
|
||||
},
|
||||
handleChange(value) {
|
||||
Modal.message({ message: '组件绑定值为：' + value, status: 'info' })
|
||||
},
|
||||
handleFocus() {
|
||||
Modal.message({ message: '回调参数为组件实例', status: 'info' })
|
||||
Modal.message({ message: '触发 change 事件，组件绑定值为：' + value, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-label {
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" shape="filter" label="日期选择"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="rangeValue" type="daterange" shape="filter" label="日期范围选择"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -9,4 +10,15 @@ import { ref } from 'vue'
|
|||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const rangeValue = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker v-model="value" type="daterange" shape="filter" label="日期范围选择"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref([])
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker v-model="value" type="daterange" shape="filter" label="日期范围选择"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试过滤器模式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/filter-mode')
|
||||
})
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" shape="filter" label="日期选择"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="rangeValue" type="daterange" shape="filter" label="日期范围选择"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,8 +14,19 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
value: '',
|
||||
rangeValue: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-button @click="click">获取焦点</tiny-button>
|
||||
<tiny-button @click="Switchover">启用/禁用</tiny-button>
|
||||
<tiny-date-picker v-model="value" ref="refFocusRef" :disabled="disabled"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const disabled = ref(false)
|
||||
const refFocusRef = ref()
|
||||
|
||||
function click() {
|
||||
refFocusRef.value.$el.querySelector('input').focus()
|
||||
}
|
||||
|
||||
function Switchover() {
|
||||
disabled.value = !disabled.value
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试获取焦点', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/focus')
|
||||
|
||||
const datePanelDom = page.locator('body > .tiny-picker-panel')
|
||||
|
||||
// 禁用日期输入框之后，无法通过 focus 方法获取焦点
|
||||
await page.getByRole('button', { name: '启用/禁用' }).click()
|
||||
await page.getByRole('button', { name: '获取焦点' }).click()
|
||||
await expect(datePanelDom).not.toBeVisible()
|
||||
|
||||
// 启用日期输入框之后，可以通过 focus 方法获取焦点
|
||||
await page.getByRole('button', { name: '启用/禁用' }).click()
|
||||
await page.getByRole('button', { name: '获取焦点' }).click()
|
||||
await expect(datePanelDom).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-button @click="click">获取焦点</tiny-button>
|
||||
<tiny-button @click="Switchover">启用/禁用</tiny-button>
|
||||
<tiny-date-picker v-model="value" ref="refFocus" :disabled="disabled"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
this.$refs.refFocus.$el.querySelector('input').focus()
|
||||
},
|
||||
Switchover() {
|
||||
this.disabled = !this.disabled
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期输入框中显示的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" format="yyyy 年 MM 月 dd 日"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>时间输入框中显示的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="datetime" format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒" time-format="HH 时 mm 分 ss 秒"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>选中值的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="selectedValue" value-format="timestamp"></tiny-date-picker>
|
||||
</div>
|
||||
<p class="select-date">当前选中时间：{{ selectedValue }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref(new Date('2023-05-24'))
|
||||
const selectedValue = ref(1590076800000)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('[DatePicker] 测试日期格式化', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/about-format')
|
||||
await page.goto('http://localhost:7130/pc/date-picker/format')
|
||||
const dateInputDefault = page.getByRole('textbox', { name: '2023 年 05 月 20 日' })
|
||||
const dateInputTimestamp = page.getByRole('textbox', { name: '2020 年 5 月 20 日 0 时 0 分钟 0 秒 AM' })
|
||||
const dateInputString = page.getByRole('textbox', { name: '2020 年 05 月 20 日' })
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期输入框中显示的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" format="yyyy 年 MM 月 dd 日"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>时间输入框中显示的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="datetime" format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒" time-format="HH 时 mm 分 ss 秒"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>选中值的格式：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="selectedValue" value-format="timestamp"></tiny-date-picker>
|
||||
</div>
|
||||
<p class="select-date">当前选中时间：{{ selectedValue }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: new Date('2023-05-24'),
|
||||
selectedValue: 1590076800000,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<p>日期选择</p>
|
||||
<tiny-date-picker v-model="dateValue" label="选择日期"></tiny-date-picker>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<p>日期范围选择</p>
|
||||
<tiny-date-picker v-model="dateRangeValue" label="选择日期范围选择日期范围" type="daterange"></tiny-date-picker>
|
||||
</div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="dateValue" label="选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateRangeValue" label="选择日期范围" type="daterange"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -19,3 +12,13 @@ import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
|||
const dateValue = ref(new Date())
|
||||
const dateRangeValue = ref([])
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('测试 label 内置', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/label-inside')
|
||||
})
|
||||
|
|
@ -1,14 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<p>日期选择</p>
|
||||
<tiny-date-picker v-model="dateValue" label="选择日期"></tiny-date-picker>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<p>日期范围选择</p>
|
||||
<tiny-date-picker v-model="dateRangeValue" label="选择日期范围选择日期范围" type="daterange"></tiny-date-picker>
|
||||
</div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="dateValue" label="选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateRangeValue" label="选择日期范围" type="daterange"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,3 +20,13 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<tiny-form :inline="true" label-suffix="：">
|
||||
<tiny-form-item label="最大值">
|
||||
<tiny-date-picker v-model="max" :picker-options="maxOptions"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="最小值">
|
||||
<tiny-date-picker v-model="min" :picker-options="minOptions"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker, Form as TinyForm, FormItem as TinyFormItem } from '@opentiny/vue'
|
||||
|
||||
const max = ref(new Date())
|
||||
const min = ref(new Date())
|
||||
const maxOptions = ref({
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
})
|
||||
const minOptions = ref({
|
||||
disabledDate(time) {
|
||||
return time.getTime() < Date.now()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试最大最小值', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/max-min')
|
||||
})
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<template>
|
||||
<tiny-form :inline="true" label-suffix="：">
|
||||
<tiny-form-item label="最大值">
|
||||
<tiny-date-picker v-model="max" :picker-options="maxOptions"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="最小值">
|
||||
<tiny-date-picker v-model="min" :picker-options="minOptions"></tiny-date-picker>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker, Form, FormItem } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker,
|
||||
TinyForm: Form,
|
||||
TinyFormItem: FormItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
max: new Date(),
|
||||
min: new Date(),
|
||||
maxOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
},
|
||||
minOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() < Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="monthrange" :picker-options="maxOptions"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const maxOptions = ref({
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="monthrange" :picker-options="pickerOptions"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const pickerOptions = ref({
|
||||
shortcuts: [
|
||||
{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
const tmp = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, 0)
|
||||
const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
|
||||
const end = new Date(tmp.getTime() - 1)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '今年至今',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
const start = new Date(date.getFullYear(), 0)
|
||||
const end = new Date()
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近六个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 6)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试月份范围快捷选项', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/month-range-shortcuts')
|
||||
})
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="monthrange" :picker-options="pickerOptions"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
const tmp = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, 0)
|
||||
const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
|
||||
const end = new Date(tmp.getTime() - 1)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '今年至今',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
const start = new Date(date.getFullYear(), 0)
|
||||
const end = new Date()
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近六个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 6)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试选择月份范围', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/month-range')
|
||||
})
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="monthrange" :picker-options="maxOptions"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
maxOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="datesValue" type="dates" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="yearsValue" type="years" placeholder="请选择年份"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const datesValue = ref('')
|
||||
const yearsValue = ref('')
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('测试多日期选择', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/multiple-dates')
|
||||
})
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="datesValue" type="dates" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="yearsValue" type="years" placeholder="请选择年份"></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datesValue: '',
|
||||
yearsValue: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<span>周：</span>
|
||||
<tiny-date-picker
|
||||
v-model="value1"
|
||||
type="week"
|
||||
placeholder="选择周"
|
||||
format="yyyy 第 WW 周"
|
||||
:default-value="defaultValue"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<span>年：</span>
|
||||
<tiny-date-picker
|
||||
v-model="value2"
|
||||
type="year"
|
||||
placeholder="选择年"
|
||||
:default-value="defaultValue"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<span>月：</span>
|
||||
<tiny-date-picker
|
||||
v-model="value3"
|
||||
type="month"
|
||||
placeholder="选择月"
|
||||
:default-value="defaultValue"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<span>多个日期：</span>
|
||||
<tiny-date-picker
|
||||
v-model="value4"
|
||||
type="dates"
|
||||
placeholder="选择一个或多个日期"
|
||||
:default-value="defaultValue"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value1 = ref('')
|
||||
const value2 = ref('')
|
||||
const value3 = ref('')
|
||||
const value4 = ref('')
|
||||
const defaultValue = ref(new Date(2023, 4, 20))
|
||||
</script>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试其他日期单位', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/other-picker-type')
|
||||
const dateInputWeek = page.getByPlaceholder('选择周')
|
||||
const dateInputYear = page.getByPlaceholder('选择年')
|
||||
const dateInputMonth = page.getByPlaceholder('选择月')
|
||||
const dateInputMultiDate = page.getByPlaceholder('选择一个或多个日期')
|
||||
|
||||
await page.getByPlaceholder('选择周').click()
|
||||
await page.getByRole('cell', { name: '12' }).getByText('12').click()
|
||||
expect(await dateInputWeek.inputValue()).toBe('2023 第 19 周')
|
||||
|
||||
await page.getByPlaceholder('选择年').click()
|
||||
await page.getByRole('cell', { name: '2022' }).getByText('2022').click()
|
||||
expect(await dateInputYear.inputValue()).toBe('2022')
|
||||
|
||||
await page.getByPlaceholder('选择月').click()
|
||||
await page.getByRole('cell', { name: '六月' }).getByText('六月').click()
|
||||
expect(await dateInputMonth.inputValue()).toBe('2023-06')
|
||||
|
||||
await page.getByPlaceholder('选择一个或多个日期').click()
|
||||
await page.getByRole('cell', { name: '16' }).getByText('16').click()
|
||||
await page.getByRole('cell', { name: '18' }).getByText('18').click()
|
||||
await page.getByRole('cell', { name: '20' }).getByText('20').click()
|
||||
await page.getByRole('button', { name: '确定' }).click()
|
||||
expect(await dateInputMultiDate.inputValue()).toBe('2023-05-16, 2023-05-18, 2023-05-20')
|
||||
})
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<span>周：</span>
|
||||
<tiny-date-picker
|
||||
v-model="value1"
|
||||
type="week"
|
||||
placeholder="选择周"
|
||||
format="yyyy 第 WW 周"
|
||||
:default-value="defaultValue"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<span>年：</span>
|
||||
<tiny-date-picker
|
||||
v-model="value2"
|
||||
type="year"
|
||||
placeholder="选择年"
|
||||
:default-value="defaultValue"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="6">
|
||||
<span>月：</span>
|
||||
<tiny-date-picker
|
||||
v-model="value3"
|
||||
type="month"
|
||||
placeholder="选择月"
|
||||
:default-value="defaultValue"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<span>多个日期：</span>
|
||||
<tiny-date-picker
|
||||
v-model="value4"
|
||||
type="dates"
|
||||
placeholder="选择一个或多个日期"
|
||||
:default-value="defaultValue"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col, DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col,
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
defaultValue: new Date(2023, 4, 20)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" readonly></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('2020/10/29')
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试只读状态', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/readonly')
|
||||
})
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" readonly></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '2020/10/29'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="4">
|
||||
<label>medium：</label>
|
||||
<tiny-date-picker v-model="value" size="medium"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label>small：</label>
|
||||
<tiny-date-picker v-model="value" size="small"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label>mini：</label>
|
||||
<tiny-date-picker v-model="value" size="mini"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="4">
|
||||
<label>medium：</label>
|
||||
<tiny-date-picker v-model="value" size="medium"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label>small：</label>
|
||||
<tiny-date-picker v-model="value" size="small"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<label>mini：</label>
|
||||
<tiny-date-picker v-model="value" size="mini"></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col, DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col,
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :picker-options="pickerOptions" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker
|
||||
v-model="dateRangeValue"
|
||||
type="daterange"
|
||||
:picker-options="pickerOptionsDateRange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></tiny-date-picker>
|
||||
<tiny-date-picker
|
||||
v-model="monthRangeValue"
|
||||
type="monthrange"
|
||||
:picker-options="pickerOptionsMonthRange"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>某日起始、某日为止：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker
|
||||
v-model="startFromValue"
|
||||
type="daterange"
|
||||
:picker-options="pickerOptionsStartFrom"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const dateRangeValue = ref('')
|
||||
const monthRangeValue = ref('')
|
||||
const startFromValue = ref('')
|
||||
|
||||
const pickerOptions = {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const pickerOptionsDateRange = {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const pickerOptionsMonthRange = {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
const tmp = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, 0)
|
||||
const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
|
||||
const end = new Date(tmp.getTime() - 1)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '今年至今',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
const start = new Date(date.getFullYear(), 0)
|
||||
const end = new Date()
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近六个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 6)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const pickerOptionsStartFrom = {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '某日起始', // text可以自定义
|
||||
type: 'startFrom'
|
||||
},
|
||||
{
|
||||
text: '某日为止', // text可以自定义
|
||||
type: 'endAt'
|
||||
},
|
||||
{
|
||||
text: '自定义结束日期',
|
||||
type: 'startFrom',
|
||||
endDate: new Date('2030-10-10') // 传入的日期必须为一个日期对象
|
||||
},
|
||||
{
|
||||
text: '自定义开始日期',
|
||||
type: 'endAt',
|
||||
startDate: new Date('2000-10-10') // 传入的日期必须为一个日期对象
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 350px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('[DatePicker] 测试选择快捷选项日期：今天/昨天/一周前', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/date-shortcuts')
|
||||
await page.goto('http://localhost:7130/pc/date-picker/shortcuts')
|
||||
const datePickerDom = page.locator('body > .tiny-date-picker')
|
||||
// 选择今天/昨天/一周前
|
||||
await page.locator('#preview').getByRole('textbox').click()
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :picker-options="pickerOptions" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker
|
||||
v-model="dateRangeValue"
|
||||
type="daterange"
|
||||
:picker-options="pickerOptionsDateRange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></tiny-date-picker>
|
||||
<tiny-date-picker
|
||||
v-model="monthRangeValue"
|
||||
type="monthrange"
|
||||
:picker-options="pickerOptionsMonthRange"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>某日起始、某日为止：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker
|
||||
v-model="startFromValue"
|
||||
type="daterange"
|
||||
:picker-options="pickerOptionsStartFrom"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
dateRangeValue: '',
|
||||
monthRangeValue: '',
|
||||
startFromValue: '',
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', date)
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
pickerOptionsDateRange: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
pickerOptionsMonthRange: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
const tmp = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, 0)
|
||||
const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
|
||||
const end = new Date(tmp.getTime() - 1)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '今年至今',
|
||||
onClick(picker) {
|
||||
const date = new Date()
|
||||
const start = new Date(date.getFullYear(), 0)
|
||||
const end = new Date()
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近六个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 6)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
pickerOptionsStartFrom: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '某日起始', // text可以自定义
|
||||
type: 'startFrom'
|
||||
},
|
||||
{
|
||||
text: '某日为止', // text可以自定义
|
||||
type: 'endAt'
|
||||
},
|
||||
{
|
||||
text: '自定义结束日期',
|
||||
type: 'startFrom',
|
||||
endDate: new Date('2030-10-10') // 传入的日期必须为一个日期对象
|
||||
},
|
||||
{
|
||||
text: '自定义开始日期',
|
||||
type: 'endAt',
|
||||
startDate: new Date('2000-10-10') // 传入的日期必须为一个日期对象
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 350px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-radio-group v-model="radioValue" size="mini" class="demo-date-picker__switch-size">
|
||||
<tiny-radio-button label="medium"></tiny-radio-button>
|
||||
<tiny-radio-button label="small"></tiny-radio-button>
|
||||
<tiny-radio-button label="default"></tiny-radio-button>
|
||||
<tiny-radio-button label="mini"></tiny-radio-button>
|
||||
</tiny-radio-group>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetime" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="weekValue" type="week" :size="radioValue" placeholder="请选择周"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="monthValue" type="month" :size="radioValue" placeholder="请选择月份"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="yearValue" type="year" :size="radioValue" placeholder="请选择年份"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="rangeValue" type="daterange" :size="radioValue" start-placeholder="开始日期" end-placeholder="结束日期"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
DatePicker as TinyDatePicker,
|
||||
RadioGroup as TinyRadioGroup,
|
||||
RadioButton as TinyRadioButton
|
||||
} from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
const dateTimeValue = ref('')
|
||||
const weekValue = ref('')
|
||||
const monthValue = ref('')
|
||||
const yearValue = ref('')
|
||||
const rangeValue = ref('')
|
||||
const radioValue = ref('default')
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,5 +2,5 @@ import { expect, test } from '@playwright/test'
|
|||
|
||||
test('[DatePicker] 测试尺寸设置', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/set-size')
|
||||
await page.goto('http://localhost:7130/pc/date-picker/size')
|
||||
})
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-radio-group v-model="radioValue" size="mini" class="demo-date-picker__switch-size">
|
||||
<tiny-radio-button label="medium"></tiny-radio-button>
|
||||
<tiny-radio-button label="small"></tiny-radio-button>
|
||||
<tiny-radio-button label="default"></tiny-radio-button>
|
||||
<tiny-radio-button label="mini"></tiny-radio-button>
|
||||
</tiny-radio-group>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="dateTimeValue" type="datetime" :size="radioValue" placeholder="请选择日期"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="weekValue" type="week" :size="radioValue" placeholder="请选择周"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="monthValue" type="month" :size="radioValue" placeholder="请选择月份"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="yearValue" type="year" :size="radioValue" placeholder="请选择年份"></tiny-date-picker>
|
||||
<tiny-date-picker v-model="rangeValue" type="daterange" :size="radioValue" start-placeholder="开始日期" end-placeholder="结束日期"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
DatePicker,
|
||||
RadioGroup,
|
||||
RadioButton
|
||||
} from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker,
|
||||
TinyRadioGroup: RadioGroup,
|
||||
TinyRadioButton: RadioButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
dateTimeValue: '',
|
||||
weekValue: '',
|
||||
monthValue: '',
|
||||
yearValue: '',
|
||||
rangeValue: '',
|
||||
radioValue: 'default'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="daterange" :picker-options="pickerOptionsDateRange"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref([])
|
||||
const pickerOptionsDateRange = ref({
|
||||
shortcuts: [
|
||||
{
|
||||
text: '某日起始', // text可以自定义
|
||||
type: 'startFrom'
|
||||
},
|
||||
{
|
||||
text: '某日为止', // text可以自定义
|
||||
type: 'endAt'
|
||||
},
|
||||
{
|
||||
text: '自定义结束日期',
|
||||
type: 'startFrom',
|
||||
endDate: new Date('2030-10-10') // 传入的日期必须为一个日期对象
|
||||
},
|
||||
{
|
||||
text: '自定义开始日期',
|
||||
type: 'endAt',
|
||||
startDate: new Date('2000-10-10') // 传入的日期必须为一个日期对象
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="daterange" :picker-options="pickerOptionsDateRange"></tiny-date-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [],
|
||||
pickerOptionsDateRange: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '某日起始', // text可以自定义
|
||||
type: 'startFrom'
|
||||
},
|
||||
{
|
||||
text: '某日为止', // text可以自定义
|
||||
type: 'endAt'
|
||||
},
|
||||
{
|
||||
text: '自定义结束日期',
|
||||
type: 'startFrom',
|
||||
endDate: new Date('2030-10-10') // 传入的日期必须为一个日期对象
|
||||
},
|
||||
{
|
||||
text: '自定义开始日期',
|
||||
type: 'endAt',
|
||||
startDate: new Date('2000-10-10') // 传入的日期必须为一个日期对象
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期值：{{ value }}</p>
|
||||
<tiny-date-picker :step="step" v-model="value" type="datetimerange"></tiny-date-picker>
|
||||
<p>步长：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="datetime" :step="step"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>箭头控制：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="datetime" time-arrow-control></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,3 +22,9 @@ const step = ref({
|
|||
})
|
||||
const value = ref([])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试步长', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/step')
|
||||
})
|
||||
|
|
@ -1,7 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>日期值：{{ value }}</p>
|
||||
<tiny-date-picker :step="step" v-model="value" type="datetimerange"></tiny-date-picker>
|
||||
<p>步长：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="datetime" :step="step"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>箭头控制：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="datetime" time-arrow-control></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -18,8 +25,14 @@ export default {
|
|||
hour: 2,
|
||||
minute: 5
|
||||
},
|
||||
value: []
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker v-model="value" type="datetime" time-arrow-control></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref('')
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试箭头按钮控制时间选择', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/time-arrow-control')
|
||||
})
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker v-model="value" type="datetime" time-arrow-control></tiny-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="4">
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
type="datetime"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
time-format="HH 时 mm 分 ss 秒"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
type="datetime"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
time-format="HH - mm - ss"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
|
||||
const value = ref(new Date())
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { expect, test } from '@playwright/test'
|
||||
|
||||
test('[DatePicker] 测试时间格式化', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/date-picker/time-format')
|
||||
})
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="4">
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
type="datetime"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
time-format="HH 时 mm 分 ss 秒"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
type="datetime"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
time-format="HH - mm - ss"
|
||||
></tiny-date-picker>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { DatePicker, Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePicker: DatePicker,
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: new Date()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,25 +1,39 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
type="datetime"
|
||||
name="mypicker"
|
||||
:show-timezone="true"
|
||||
:timezone-data="tzData"
|
||||
@select-change="selsxr"
|
||||
default-timezone="Etc/GMT+12"
|
||||
></tiny-date-picker>
|
||||
<div>
|
||||
<p>开启时区选择</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker
|
||||
v-model="timezoneValue"
|
||||
type="datetime"
|
||||
:show-timezone="true"
|
||||
:timezone-data="tzData"
|
||||
default-timezone="Etc/GMT+12"
|
||||
@select-change="selectChange"
|
||||
></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>默认时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="datetime"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>显示为东八区时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="referenceDate" type="datetime" :isutc8="true"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker, Modal } from '@opentiny/vue'
|
||||
import tzData from '@opentiny/vue-renderless/picker/timezone'
|
||||
|
||||
const timezoneValue = ref('')
|
||||
const value = ref('')
|
||||
const referenceDate = ref('2020-10-28T00:00:00.000+0800')
|
||||
|
||||
function selsxr(tz) {
|
||||
function selectChange(tz) {
|
||||
Modal.message({ message: `当前值为 ${tz.tz.name}`, status: 'info' })
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,30 @@
|
|||
<template>
|
||||
<div style="width: 270px">
|
||||
<tiny-date-picker
|
||||
v-model="value"
|
||||
type="datetime"
|
||||
name="mypicker"
|
||||
:show-timezone="true"
|
||||
:timezone-data="tzData"
|
||||
@select-change="selsxr"
|
||||
default-timezone="Etc/GMT+12"
|
||||
></tiny-date-picker>
|
||||
<div>
|
||||
<p>开启时区选择</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker
|
||||
v-model="timezoneValue"
|
||||
type="datetime"
|
||||
:show-timezone="true"
|
||||
:timezone-data="tzData"
|
||||
default-timezone="Etc/GMT+12"
|
||||
@select-change="selectChange"
|
||||
></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>默认时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="datetime"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>显示为东八区时间</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="referenceDate" type="datetime" :isutc8="true"></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { DatePicker, Modal } from '@opentiny/vue'
|
||||
import tzData from '@opentiny/vue-renderless/picker/timezone'
|
||||
|
||||
|
|
@ -23,13 +35,21 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
tzData,
|
||||
value: ''
|
||||
timezoneValue: '',
|
||||
value: '',
|
||||
referenceDate: '2020-10-28T00:00:00.000+0800'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selsxr(tz) {
|
||||
selectChange(tz) {
|
||||
Modal.message({ message: `当前值为 ${tz.tz.name}`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,26 @@
|
|||
<template>
|
||||
<tiny-date-picker v-model="value" type="daterange" unlink-panels></tiny-date-picker>
|
||||
<div>
|
||||
<p>默认启用面板联动：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="daterange"></tiny-date-picker>
|
||||
</div>
|
||||
|
||||
<p>关闭面板联动：</p>
|
||||
<div class="demo-date-picker-wrap">
|
||||
<tiny-date-picker v-model="value" type="daterange" unlink-panels></tiny-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||
|
||||
const value = ref([])
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.demo-date-picker-wrap {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue