forked from opentiny/tiny-vue
docs(date-picker): [date-picker] optimize date-picker api docs (#767)
This commit is contained in:
GitHub
parent
531a43ae56
commit
a3242ddddc
|
|
@ -6,8 +6,8 @@
|
||||||
</div>
|
</div>
|
||||||
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
|
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
|
||||||
<div class="demo-date-picker-wrap">
|
<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="datetime" :default-time="defaultTime"></tiny-date-picker>
|
||||||
<tiny-date-picker v-model="dateTimeValue" type="datetimerange" :default-value="defaultDate" :default-time="defaultTimeRange"></tiny-date-picker>
|
<tiny-date-picker v-model="dateTimeRangeValue" type="datetimerange" :default-time="defaultTimeRange"></tiny-date-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -18,6 +18,7 @@ import { DatePicker as TinyDatePicker } from '@opentiny/vue'
|
||||||
|
|
||||||
const value = ref('')
|
const value = ref('')
|
||||||
const dateTimeValue = ref('')
|
const dateTimeValue = ref('')
|
||||||
|
const dateTimeRangeValue = ref('')
|
||||||
const defaultDate = ref(new Date(2000, 10, 10, 10, 10))
|
const defaultDate = ref(new Date(2000, 10, 10, 10, 10))
|
||||||
const defaultTime = ref('09:00:00')
|
const defaultTime = ref('09:00:00')
|
||||||
const defaultTimeRange = ref(['09:00:00', '18:00:00'])
|
const defaultTimeRange = ref(['09:00:00', '18:00:00'])
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
</div>
|
</div>
|
||||||
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
|
<p>日期时间(范围)，选择日期之后默认显示的时间(范围)</p>
|
||||||
<div class="demo-date-picker-wrap">
|
<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="datetime" :default-time="defaultTime"></tiny-date-picker>
|
||||||
<tiny-date-picker v-model="dateTimeValue" type="datetimerange" :default-value="defaultDate" :default-time="defaultTimeRange"></tiny-date-picker>
|
<tiny-date-picker v-model="dateTimeRangeValue" type="datetimerange" :default-time="defaultTimeRange"></tiny-date-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -23,6 +23,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
value: '',
|
value: '',
|
||||||
dateTimeValue: '',
|
dateTimeValue: '',
|
||||||
|
dateTimeRangeValue: '',
|
||||||
defaultDate: new Date(2000, 10, 10, 10, 10),
|
defaultDate: new Date(2000, 10, 10, 10, 10),
|
||||||
defaultTime: '09:00:00',
|
defaultTime: '09:00:00',
|
||||||
defaultTimeRange: ['09:00:00', '18:00:00']
|
defaultTimeRange: ['09:00:00', '18:00:00']
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,22 @@
|
||||||
<tiny-layout>
|
<tiny-layout>
|
||||||
<tiny-row>
|
<tiny-row>
|
||||||
<tiny-col :span="4">
|
<tiny-col :span="4">
|
||||||
<label class="demo-date-picker-label">focus：</label>
|
<label class="demo-date-picker-label">focus:</label>
|
||||||
<tiny-date-picker v-model="value" @focus="handleFocus"></tiny-date-picker>
|
<tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
|
||||||
</tiny-col>
|
</tiny-col>
|
||||||
<tiny-col :span="4">
|
<tiny-col :span="4">
|
||||||
<label class="demo-date-picker-label">blur：</label>
|
<label class="demo-date-picker-label">blur:</label>
|
||||||
<tiny-date-picker v-model="value" @blur="handleBlur"></tiny-date-picker>
|
<tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
|
||||||
</tiny-col>
|
</tiny-col>
|
||||||
<tiny-col :span="4">
|
<tiny-col :span="4">
|
||||||
<label class="demo-date-picker-label">change：</label>
|
<label class="demo-date-picker-label">change:</label>
|
||||||
<tiny-date-picker v-model="value" @change="handleChange"></tiny-date-picker>
|
<tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
|
||||||
|
</tiny-col>
|
||||||
|
</tiny-row>
|
||||||
|
<tiny-row>
|
||||||
|
<tiny-col :span="12">
|
||||||
|
<label class="demo-date-picker-label">onPick:</label>
|
||||||
|
<tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
|
||||||
</tiny-col>
|
</tiny-col>
|
||||||
</tiny-row>
|
</tiny-row>
|
||||||
</tiny-layout>
|
</tiny-layout>
|
||||||
|
|
@ -27,7 +33,10 @@ import {
|
||||||
Modal
|
Modal
|
||||||
} from '@opentiny/vue'
|
} from '@opentiny/vue'
|
||||||
|
|
||||||
const value = ref('')
|
const valueFocus = ref('')
|
||||||
|
const valueBlur = ref('')
|
||||||
|
const valueChange = ref('')
|
||||||
|
const valueOnPick = ref('')
|
||||||
|
|
||||||
function handleFocus() {
|
function handleFocus() {
|
||||||
Modal.message({ message: '触发 focus 事件', status: 'info' })
|
Modal.message({ message: '触发 focus 事件', status: 'info' })
|
||||||
|
|
@ -40,11 +49,17 @@ function handleBlur() {
|
||||||
function handleChange(value) {
|
function handleChange(value) {
|
||||||
Modal.message({ message: '触发 change 事件，组件绑定值为：' + value, status: 'info' })
|
Modal.message({ message: '触发 change 事件，组件绑定值为：' + value, status: 'info' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const pickerOptions = {
|
||||||
|
onPick: ({ minDate, maxDate }) => {
|
||||||
|
Modal.message({ message: `触发 onPick 事件，开始日期为：${minDate}，结束日期为：${maxDate}`, status: 'info' })
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.demo-date-picker-label {
|
.demo-date-picker-label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 12px;
|
margin: 12px 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,22 @@
|
||||||
<tiny-layout>
|
<tiny-layout>
|
||||||
<tiny-row>
|
<tiny-row>
|
||||||
<tiny-col :span="4">
|
<tiny-col :span="4">
|
||||||
<label class="demo-date-picker-label">focus：</label>
|
<label class="demo-date-picker-label">focus:</label>
|
||||||
<tiny-date-picker v-model="value" @focus="handleFocus"></tiny-date-picker>
|
<tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
|
||||||
</tiny-col>
|
</tiny-col>
|
||||||
<tiny-col :span="4">
|
<tiny-col :span="4">
|
||||||
<label class="demo-date-picker-label">blur：</label>
|
<label class="demo-date-picker-label">blur:</label>
|
||||||
<tiny-date-picker v-model="value" @blur="handleBlur"></tiny-date-picker>
|
<tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
|
||||||
</tiny-col>
|
</tiny-col>
|
||||||
<tiny-col :span="4">
|
<tiny-col :span="4">
|
||||||
<label class="demo-date-picker-label">change：</label>
|
<label class="demo-date-picker-label">change:</label>
|
||||||
<tiny-date-picker v-model="value" @change="handleChange"></tiny-date-picker>
|
<tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
|
||||||
|
</tiny-col>
|
||||||
|
</tiny-row>
|
||||||
|
<tiny-row>
|
||||||
|
<tiny-col :span="12">
|
||||||
|
<label class="demo-date-picker-label">onPick:</label>
|
||||||
|
<tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
|
||||||
</tiny-col>
|
</tiny-col>
|
||||||
</tiny-row>
|
</tiny-row>
|
||||||
</tiny-layout>
|
</tiny-layout>
|
||||||
|
|
@ -29,7 +35,15 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: ''
|
valueFocus: '',
|
||||||
|
valueBlur: '',
|
||||||
|
valueChange: '',
|
||||||
|
valueOnPick: '',
|
||||||
|
pickerOptions: {
|
||||||
|
onPick: ({ minDate, maxDate }) => {
|
||||||
|
Modal.message({ message: `触发 onPick 事件，开始日期为：${minDate}，结束日期为：${maxDate}`, status: 'info' })
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -49,6 +63,6 @@ export default {
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.demo-date-picker-label {
|
.demo-date-picker-label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 12px;
|
margin: 12px 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
title: DatePicker Date Selector
|
title: DatePicker
|
||||||
---
|
---
|
||||||
|
|
||||||
# DatePicker Date Selector
|
# DatePicker
|
||||||
|
|
||||||
<div>Used to input or select a date.</div>
|
<div>Used to input or select a date.</div>
|
||||||
|
|
|
||||||
|
|
@ -4,63 +4,74 @@ export default {
|
||||||
demos: [
|
demos: [
|
||||||
{
|
{
|
||||||
'demoId': 'basic-usage',
|
'demoId': 'basic-usage',
|
||||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
'name': {
|
||||||
'desc': { 'zh-CN': '主要支持选择日期、日期时间、周、月份、年份', 'en-US': 'Mainly supports the selection of date, date time, week, month and year.' },
|
'zh-CN': '基本用法',
|
||||||
|
'en-US': 'Basic usage'
|
||||||
|
},
|
||||||
|
'desc': {
|
||||||
|
'zh-CN': '<p>支持选择日期、日期时间、周、月份、年份。</p>',
|
||||||
|
'en-US': 'Support to select date, date time, week, month, year.'
|
||||||
|
},
|
||||||
'codeFiles': ['basic-usage.vue']
|
'codeFiles': ['basic-usage.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'date-range',
|
'demoId': 'date-range',
|
||||||
'name': { 'zh-CN': '范围选择', 'en-US': 'Select date range' },
|
'name': {
|
||||||
|
'zh-CN': '范围选择',
|
||||||
|
'en-US': 'Select date range'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '<p>设置 <code>type</code> 属性为 <code>daterange</code> / <code>datetimerange</code> / <code>monthrange</code> / <code>yearrange</code>，可以设置以日期范围的形式进行选择。</p>\n',
|
||||||
'<p>设置 <code>type</code> 属性为 daterange，可以设置以日期范围的形式进行选择。\n通过 <code>onPick</code> 获取选中日期后会执行的回调，需要与 <code>daterange</code> 或 <code>datetimerange</code> 才生效，需要配置在 <code>picker-options</code> 中。</p>\n',
|
'en-US': '<p>Set <code>type</code> to <code>daterange</code>, you can select a date range.</p>\n'
|
||||||
'en-US':
|
|
||||||
'<p>Set <code>type</code> to daterange. You can select a date range. \n Callback that will be executed after the selected date is obtained through <code>onPick</code>. The callback takes effect only when <code>daterange</code> or <code>datetimerange</code> is used. This parameter must be configured in <code>picker-options</code>. </p>\n'
|
|
||||||
},
|
},
|
||||||
'codeFiles': ['date-range.vue']
|
'codeFiles': ['date-range.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'dates',
|
'demoId': 'dates',
|
||||||
'name': { 'zh-CN': '多日期选择', 'en-US': 'Select multiple dates' },
|
'name': {
|
||||||
|
'zh-CN': '多日期选择',
|
||||||
|
'en-US': 'Select multiple dates'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '支持选择多个日期和年份',
|
'zh-CN': '<p>支持选择多个日期和年份。</p>',
|
||||||
'en-US': 'Support for selecting multiple dates and years'
|
'en-US': 'Support for selecting multiple dates and years.'
|
||||||
},
|
},
|
||||||
'codeFiles': ['multiple-dates.vue']
|
'codeFiles': ['multiple-dates.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'disabled',
|
'demoId': 'disabled',
|
||||||
'name': { 'zh-CN': '禁用状态', 'en-US': 'Disabled status' },
|
'name': {
|
||||||
|
'zh-CN': '禁用状态',
|
||||||
|
'en-US': 'Disabled status'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': `
|
'zh-CN': `
|
||||||
<p>通过设置 <code>disabled</code> 为 true 后，禁用日期输入框。</p>
|
<p>通过设置 <code>disabled</code> 为 true 后，禁用日期输入框。</p>
|
||||||
<p>通过设置 <code>picker-options</code> 的 <code>disabledDate</code> 属性，可以实现部分禁用，此时只能选择一部分日期。</p>
|
<p>通过设置 <code>picker-options</code> 的 <code>disabledDate</code> 属性，可以实现部分禁用，此时只能选择一部分日期。</p>
|
||||||
<p>日期输入框默认可以输入日期，设置 <code>editable</code> 为 false 后，将不能输入。</p>
|
<p>日期输入框默认可以输入日期，设置 <code>editable</code> 为 false 后，将不能输入。</p>
|
||||||
<p>通过 <code>readonly</code> 属性设置日历组件是否只读。</p>
|
<p>通过 <code>readonly</code> 属性设置日期组件是否只读。</p>
|
||||||
`,
|
`,
|
||||||
'en-US': `
|
'en-US': `
|
||||||
<p>After setting <code>disabled</code> to true, disable the date input box.</p>
|
<p>After setting <code>disabled</code> to true, disable the date input box.</p>
|
||||||
<p>Partial disabling can be achieved by setting the <code>disabledDate</code> property of <code>picker-options</code>, and only part of the date can be selected at this time.</p>
|
<p>Partial disabling can be achieved by setting the <code>disabledDate</code> property of <code>picker-options</code>, and only part of the date can be selected at this time.</p>
|
||||||
<p>You can enter a date by default in the date input box, but it cannot be entered when <code> editable </code> is set to false.</p>
|
<p>You can enter a date by default in the date input box, but it cannot be entered when <code> editable </code> is set to false.</p>
|
||||||
<p>Sets whether the calendar component is read-only through the <code>readonly</code> property. </p>
|
<p>Sets whether the date component is read-only through the <code>readonly</code> property. </p>
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
'desc': {
|
|
||||||
'zh-CN': '<p>通过 <code>readonly</code> 属性设置日历组件是否只读。</p>\n',
|
|
||||||
'en-US':
|
|
||||||
'<p>Sets whether the calendar component is read-only through the <code>readonly</code> property. </p>\n'
|
|
||||||
},
|
|
||||||
'codeFiles': ['disabled.vue']
|
'codeFiles': ['disabled.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'shortcuts',
|
'demoId': 'shortcuts',
|
||||||
'name': { 'zh-CN': '快捷选项', 'en-US': 'Select the shortcut option of the day band' },
|
'name': {
|
||||||
|
'zh-CN': '快捷选项',
|
||||||
|
'en-US': 'Select the shortcut options'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': `
|
'zh-CN': `
|
||||||
<p>通过 <code>picker-options</code> 属性，该属性是一个对象，在其中指定 <code>shortcuts</code> 对象数组可以设置快捷选项。</p>
|
<p>通过在 <code>picker-options</code> 属性中指定 <code>shortcuts</code> 对象数组可以设置快捷选项。</p>
|
||||||
<p>通过设置 <code>type: 'startFrom'</code> 为某日起始，设置 <code>type: 'endAt'</code> 为某日为止，</p>
|
<p>通过<code>type: 'startFrom'</code> 设置某日起始，<code>endDate</code> 属性可设置结束日期，<code>endDate</code> 默认为 <code>2099-12-31</code>。</p>
|
||||||
<p>startDate 属性可设置开始的日期，endDate 属性设置结束日期，startDate 默认为 1970-01-01，endDate 默认为 2099-12-31</p>
|
<p>通过<code>type: 'endAt'</code> 设置某日为止，<code>startDate</code> 属性可设置开始日期，<code>startDate</code> 默认为 <code>1970-01-01</code>。</p>
|
||||||
<p>设置某日起始、某日为止时不用传入 onClick 函数，因为此函数不会被执行。</p>
|
<p>设置某日起始、某日为止时不用传入 <code>onClick</code> 函数，此函数不会被执行。</p>
|
||||||
`,
|
`,
|
||||||
'en-US': `
|
'en-US': `
|
||||||
<p>With the <code>picker-options</code> attribute, which is an object in which you specify an array of <code>shortcuts</code> objects to set shortcut options.</p>
|
<p>With the <code>picker-options</code> attribute, which is an object in which you specify an array of <code>shortcuts</code> objects to set shortcut options.</p>
|
||||||
|
|
@ -73,32 +84,37 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'size',
|
'demoId': 'size',
|
||||||
'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
|
'name': {
|
||||||
|
'zh-CN': '尺寸',
|
||||||
|
'en-US': 'Size'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '<p>通过 <code>size</code> 属性可以设置日期输入框的尺寸，可选值有 medium、small、mini。</p>\n',
|
'zh-CN': '<p>通过 <code>size</code> 属性可以设置日期输入框的尺寸，可选值有 medium、small、mini。</p>\n',
|
||||||
'en-US':
|
'en-US': '<p>You can set the size of the date text box through the <code>size</code> attribute. The options are medium, small, and mini. </p>\n'
|
||||||
'<p>You can set the size of the date text box through the <code>size</code> attribute. The options are medium, small, and mini. </p>\n'
|
|
||||||
},
|
},
|
||||||
'codeFiles': ['size.vue']
|
'codeFiles': ['size.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'clear',
|
'demoId': 'clear',
|
||||||
'name': { 'zh-CN': '清除输入', 'en-US': 'Clear Input' },
|
'name': {
|
||||||
|
'zh-CN': '清除输入',
|
||||||
|
'en-US': 'Clear Input'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '<p>选择日期后，鼠标悬停在输入框时，默认会显示清除图标，单击图标可以清除输入框内容。设置 <code>clearable</code> 属性为 false 后，则不显示清除图标，不可清除。通过 <code>clear-icon</code> 属性可以自定义清除图标。</p>',
|
||||||
'<p>选择日期后，鼠标悬停在输入框时，默认会显示清除图标，单击图标可以清除输入框内容。设置 <code>clearable</code> 属性为 false 后，则不显示清除图标，不可清除。通过 <code>clear-icon</code> 属性可以自定义清除图标。</p>\n',
|
'en-US': '<p>After you select a date, the clear icon is displayed by default when you hover the cursor over the text box. You can click the icon to clear the text box. If <code>clearable</code> is set to false, the clear icon is not displayed and cannot be cleared. The <code>clear-icon</code> property allows you to customize the clear icon. </p>\n'
|
||||||
'en-US':
|
|
||||||
'<p>After you select a date, the clear icon is displayed by default when you hover the cursor over the text box. You can click the icon to clear the text box. If <code>clearable</code> is set to false, the clear icon is not displayed and cannot be cleared. The <code>clear-icon</code> property allows you to customize the clear icon. </p>\n'
|
|
||||||
},
|
},
|
||||||
'codeFiles': ['clear.vue']
|
'codeFiles': ['clear.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'format',
|
'demoId': 'format',
|
||||||
'name': { 'zh-CN': '格式化', 'en-US': 'Formatting' },
|
'name': {
|
||||||
|
'zh-CN': '格式化',
|
||||||
|
'en-US': 'Formatting'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': `
|
'zh-CN': `
|
||||||
<p>通过 <code>format</code> 属性设置输入框的格式，<code>value-format</code> 属性设置绑定值的格式。Date Format 属性列表</p>
|
<p>通过 <code>format</code> 属性设置输入框中显示的日期格式，<code>time-format</code> 属性设置日期选择面板的时间显示格式，<code>value-format</code> 属性设置绑定值的格式。</p>
|
||||||
<p>通过 <code>time-format</code> 属性设置日期选择面板的时间显示格式</p>
|
|
||||||
`,
|
`,
|
||||||
'en-US': `
|
'en-US': `
|
||||||
<p> uses the <code>format</code> attribute to set the format of the text box, and the <code>value-format</code> attribute to set the format of the bound value. Date Format Attribute List</p>
|
<p> uses the <code>format</code> attribute to set the format of the text box, and the <code>value-format</code> attribute to set the format of the bound value. Date Format Attribute List</p>
|
||||||
|
|
@ -109,11 +125,14 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'default-value',
|
'demoId': 'default-value',
|
||||||
'name': { 'zh-CN': '默认值', 'en-US': 'Default value' },
|
'name': {
|
||||||
|
'zh-CN': '默认值',
|
||||||
|
'en-US': 'Default value'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': `
|
'zh-CN': `
|
||||||
<p><code>default-value</code> 属性指定日期选择器面板打开时默认选中的日期。</p>\n
|
<p><code>default-value</code> 属性指定日期选择器面板打开时默认显示的日期。</p>\n
|
||||||
<p>使用 <code>datetimerange</code> 设置日期范围时，可以通过 <code>default-time</code> 属性设置起始与结束的时刻，默认是选定日期的 00:00:00 作为起始与结束的时刻。<code>default-time</code> 接受一个数组，数组的每一项都为一个字符串，第一项控制起始日期的时刻，第二项控制结束日期的时刻。</p>\n
|
<p><code>default-time</code> 属性指定时间选择器面板打开时默认显示的时刻，默认值是 00:00:00。<code>default-time</code> 接受一个数组，数组的每一项都为一个字符串，第一项控制起始日期的时刻，第二项控制结束日期的时刻。</p>\n
|
||||||
`,
|
`,
|
||||||
'en-US': `
|
'en-US': `
|
||||||
<p>By default, you can enter a date in the Date text box. If you set <code>editable</code> to false, you cannot enter a date in the <p>Date text box. </p>\n
|
<p>By default, you can enter a date in the Date text box. If you set <code>editable</code> to false, you cannot enter a date in the <p>Date text box. </p>\n
|
||||||
|
|
@ -124,13 +143,18 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'custom-weeks',
|
'demoId': 'custom-weeks',
|
||||||
'name': { 'zh-CN': '周次序号', 'en-US': 'Weekly serial number' },
|
'name': {
|
||||||
|
'zh-CN': '周次序号',
|
||||||
|
'en-US': 'Weekly serial number'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': `
|
'zh-CN': `
|
||||||
<p>通过 <code>show-week-number</code> 属性展示原始周次序号，通过<code>format-weeks</code>属性传入两个参数</p>
|
<p>通过设置 <code>show-week-number</code> 属性为 <code>true</code> 显示周次序号，通过<code>format-weeks</code>属性设置周次显示格式，<code>format-weeks</code>函数有两个参数：</p>
|
||||||
<p>参数设置如下：</p>
|
<ul>
|
||||||
<ul><li>customWeeks：设置自定义周次的序号</li><li>weekFirstDays：获取每周次中的首个日期</li></ul>
|
<li>customWeeks：自定义周次的序号</li>
|
||||||
<p>通过 <code>picker-options</code> 的 <code> firstDayOfWeek </code> 属性来设置每周的第一天时星期几，默认值是7，也就是星期天</p>
|
<li>weekFirstDays：获取每周次中的首个日期</li>
|
||||||
|
</ul>
|
||||||
|
<p>通过 <code>picker-options</code> 的 <code> firstDayOfWeek </code> 属性来设置每周的第一天是星期几，默认值是7，也就是星期天。</p>
|
||||||
`,
|
`,
|
||||||
'en-US': `
|
'en-US': `
|
||||||
<p>Display the original weekly sequence number through the <code> show-week-number </code> attribute, and pass in two parameters through the <code> format-weeks </code> attribute.</p>
|
<p>Display the original weekly sequence number through the <code> show-week-number </code> attribute, and pass in two parameters through the <code> format-weeks </code> attribute.</p>
|
||||||
|
|
@ -143,16 +167,22 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'filter-mode',
|
'demoId': 'filter-mode',
|
||||||
'name': { 'zh-CN': '过滤器模式', 'en-US': 'Filter mode' },
|
'name': {
|
||||||
|
'zh-CN': '过滤器模式',
|
||||||
|
'en-US': 'Filter mode'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '<p>通过 <code>shape=\'filter\'</code> 属性切换至过滤器模式。</p><p>过滤器模式下可传入 label 显示标题，tip 显示提示信息，clearable 是否显示清除按钮。</p>',
|
'zh-CN': '<p>通过 <code>shape="filter"</code> 属性切换至过滤器模式。</p><p>过滤器模式下可传入 label 显示标题，tip 显示提示信息，clearable 是否显示清除按钮。</p>',
|
||||||
'en-US': '<p>Switch to filter mode through the <code> shape=\'filter\' </code> attribute. </p><p> in filter mode, label display caption can be passed in, tip displays prompt information, and whether clearable displays the clear button.</p>'
|
'en-US': '<p>Switch to filter mode through the <code> shape=\'filter\' </code> attribute. </p><p> in filter mode, label display caption can be passed in, tip displays prompt information, and whether clearable displays the clear button.</p>'
|
||||||
},
|
},
|
||||||
'codeFiles': ['filter-mode.vue']
|
'codeFiles': ['filter-mode.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'label-inside',
|
'demoId': 'label-inside',
|
||||||
'name': { 'zh-CN': 'label 内置', 'en-US': '' },
|
'name': {
|
||||||
|
'zh-CN': 'label 内置',
|
||||||
|
'en-US': ''
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '<p>通过 <code>label</code> 属性可以设置日期选择器的 label，使其放置在组件的开始位置。</p>\n',
|
'zh-CN': '<p>通过 <code>label</code> 属性可以设置日期选择器的 label，使其放置在组件的开始位置。</p>\n',
|
||||||
'en-US': ''
|
'en-US': ''
|
||||||
|
|
@ -161,7 +191,10 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'step',
|
'demoId': 'step',
|
||||||
'name': { 'zh-CN': '步长', 'en-US': 'Step' },
|
'name': {
|
||||||
|
'zh-CN': '步长',
|
||||||
|
'en-US': 'Step'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': `
|
'zh-CN': `
|
||||||
<p><code>step</code> 和 <code>time-arrow-control</code> 都是当 type 为 datetime、datetimerange 时使用。</p>
|
<p><code>step</code> 和 <code>time-arrow-control</code> 都是当 type 为 datetime、datetimerange 时使用。</p>
|
||||||
|
|
@ -178,22 +211,26 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'align',
|
'demoId': 'align',
|
||||||
'name': { 'zh-CN': '对齐方式', 'en-US': 'Alignment' },
|
'name': {
|
||||||
|
'zh-CN': '对齐方式',
|
||||||
|
'en-US': 'Alignment'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '<p>通过 <code>align</code> 属性可以设置日期选择面板与输入框之间的对齐方式，可选值有 left、right、center，默认为 left 左对齐。</p>\n',
|
||||||
'<p>通过 <code>align</code> 属性可以设置日期选择面板与输入框之间的对齐方式，可选值有 left、right、center，默认为 left 左对齐。</p>\n',
|
'en-US': '<p>You can use the <code>align</code> attribute to set the alignment mode between the date selection panel and the text box. The options are left, right, and center. The default value is left. </p>\n'
|
||||||
'en-US':
|
|
||||||
'<p>You can use the <code>align</code> attribute to set the alignment mode between the date selection panel and the text box. The options are left, right, and center. The default value is left. </p>\n'
|
|
||||||
},
|
},
|
||||||
'codeFiles': ['align.vue']
|
'codeFiles': ['align.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'custom-suffix-icon',
|
'demoId': 'custom-suffix-icon',
|
||||||
'name': { 'zh-CN': '后置图标', 'en-US': 'Customized rear icon' },
|
'name': {
|
||||||
|
'zh-CN': '后置图标',
|
||||||
|
'en-US': 'Customized rear icon'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': `
|
'zh-CN': `
|
||||||
<p>通过 <code>suffix-icon</code> 属性设置日期输入框后置图标，从 <code>@opentiny/vue-icon</code> 中导入一个图标并进行初始化后传给 <code>suffix-icon</code>。</p>
|
<p>通过 <code>suffix-icon</code> 属性设置日期输入框后置图标，从 <code>@opentiny/vue-icon</code> 中导入一个图标并进行初始化后传给 <code>suffix-icon</code>。</p>
|
||||||
<p>通过 <code>popper-class</code> 属性可以为 DatePicker 下拉弹框添加 class 类名</p>
|
<p>通过 <code>popper-class</code> 属性可以为 DatePicker 下拉弹框添加 class 类名。</p>
|
||||||
`,
|
`,
|
||||||
'en-US': `
|
'en-US': `
|
||||||
<p>Uses the <code>suffix-icon</code> attribute to set the icon behind the date text box. An icon is imported from the <code>@opentiny/vue-icon</code>, initialized, and transferred to the <code>suffix-icon</code>. </p>
|
<p>Uses the <code>suffix-icon</code> attribute to set the icon behind the date text box. An icon is imported from the <code>@opentiny/vue-icon</code>, initialized, and transferred to the <code>suffix-icon</code>. </p>
|
||||||
|
|
@ -204,18 +241,22 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'unlink-panels',
|
'demoId': 'unlink-panels',
|
||||||
'name': { 'zh-CN': '面板联动', 'en-US': 'Default time setting when the selector is enabled' },
|
'name': {
|
||||||
|
'zh-CN': '面板联动',
|
||||||
|
'en-US': 'Default time setting when the selector is enabled'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '<p>范围选择时，默认情况下，在开始日期面板中单击上一月或上一年箭头图标时，结束日期面板中日期也联动切换到上一月或上一年。在结束日期面板中切换下一月或下一年时，开始日期面板也随之联动。但若配置 <code>unlink-panels</code> 属性为 true ，面板之间就不再联动，切换年月时只对当前面板生效。</p>\n',
|
||||||
'<p>范围选择时，默认情况下，在开始日期面板中单击上一月或上一年箭头图标时，结束日期面板中日期也联动切换到上一月或上一年。在结束日期面板中切换下一月或下一年时，开始日期面板也随之联动。但若配置 <code>unlink-panels</code> 属性为 true ，面板之间就不再联动，切换年月时只对当前面板生效。</p>\n',
|
'en-US': '<p><code>default-value</code> property specifies the date that is selected by default when the date picker panel opens. </p>\n'
|
||||||
'en-US':
|
|
||||||
'<p><code>default-value</code> property specifies the date that is selected by default when the date picker panel opens. </p>\n'
|
|
||||||
},
|
},
|
||||||
'codeFiles': ['unlink-panels.vue']
|
'codeFiles': ['unlink-panels.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'timezone',
|
'demoId': 'timezone',
|
||||||
'name': { 'zh-CN': '时区选择', 'en-US': 'Time Zone Selection' },
|
'name': {
|
||||||
|
'zh-CN': '时区选择',
|
||||||
|
'en-US': 'Time Zone Selection'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': `
|
'zh-CN': `
|
||||||
<p>通过 <code>show-timezone</code> 属性可以设置日期选择面板时区选择，同时需要引入 timezoneData 时区数据。</p>
|
<p>通过 <code>show-timezone</code> 属性可以设置日期选择面板时区选择，同时需要引入 timezoneData 时区数据。</p>
|
||||||
|
|
@ -230,21 +271,25 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'validate-event',
|
'demoId': 'validate-event',
|
||||||
'name': { 'zh-CN': '表单校验', 'en-US': 'Validate event' },
|
'name': {
|
||||||
|
'zh-CN': '表单校验',
|
||||||
|
'en-US': 'Validate event'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '<p>日期选择器在输入时默认会触发表单校验，触发方式有 blur、change。但若设置 <code>validate-event</code> 属性为 false，将不再触发表单校验。</p>\n',
|
||||||
'<p>日期选择器在输入时默认会触发表单校验，触发方式有 blur、change。但若设置 <code>validate-event</code> 属性为 false，将不再触发表单校验。</p>\n',
|
|
||||||
'en-US': ''
|
'en-US': ''
|
||||||
},
|
},
|
||||||
'codeFiles': ['validate-event.vue']
|
'codeFiles': ['validate-event.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'events',
|
'demoId': 'events',
|
||||||
'name': { 'zh-CN': '事件', 'en-US': 'Events' },
|
'name': {
|
||||||
|
'zh-CN': '事件',
|
||||||
|
'en-US': 'Events'
|
||||||
|
},
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '<p>主要事件有 focus、blur、change。</p>',
|
'zh-CN': '<p>支持 <code>focus</code>、<code>blur</code>、<code>change</code>、<code>onPick</code> 事件。<br><code>onPick</code> 代表获取选中日期后执行的回调，需要与 <code>daterange</code> 或 <code>datetimerange</code> 类型配合使用才生效，配置在 <code>picker-options</code> 中。</p>',
|
||||||
'en-US':
|
'en-US': '<p>The main events are focus, blur and change.</p>'
|
||||||
'<p>The main events are focus, blur and change.</p>'
|
|
||||||
},
|
},
|
||||||
'codeFiles': ['events.vue']
|
'codeFiles': ['events.vue']
|
||||||
}
|
}
|
||||||
|
|
@ -256,68 +301,78 @@ export default {
|
||||||
'properties': [
|
'properties': [
|
||||||
{
|
{
|
||||||
'name': 'align',
|
'name': 'align',
|
||||||
'type': 'String',
|
'type': '\'left\' | \'center\' | \'right\'',
|
||||||
'defaultValue': '该属性的默认值为 left',
|
'defaultValue': '\'left\'',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '对齐方式;该属性的可选值为 left / center / right',
|
'zh-CN': '日期选择面板和输入框的对齐方式',
|
||||||
'en-US': 'Alignment mode; The optional values of this attribute are left / center / right'
|
'en-US': 'Alignment of the date selection panel and the input box'
|
||||||
},
|
},
|
||||||
'demoId': 'align'
|
'demoId': 'align'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'clearable',
|
'name': 'clearable',
|
||||||
'type': 'Boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '该属性的默认值为 true',
|
'defaultValue': 'true',
|
||||||
'desc': { 'zh-CN': '是否显示清除按钮', 'en-US': 'Display Clear Button' },
|
'desc': {
|
||||||
|
'zh-CN': '是否显示清除按钮',
|
||||||
|
'en-US': 'Display Clear Button'
|
||||||
|
},
|
||||||
'demoId': 'clear'
|
'demoId': 'clear'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'clear-icon',
|
'name': 'clear-icon',
|
||||||
'type': 'String',
|
'type': 'object',
|
||||||
'defaultValue': '该属性的默认值为 IconOperationfaild',
|
'defaultValue': 'IconOperationfaild',
|
||||||
'desc': { 'zh-CN': '自定义清空图标', 'en-US': '' },
|
'desc': {
|
||||||
|
'zh-CN': '自定义清空图标',
|
||||||
|
'en-US': ''
|
||||||
|
},
|
||||||
'demoId': 'clear'
|
'demoId': 'clear'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'default-time',
|
'name': 'default-time',
|
||||||
'type': 'String',
|
'type': 'string | string[]',
|
||||||
'defaultValue': '',
|
'defaultValue': '\'00:00:00\' | [\'00:00:00\', \'00:00:00\']',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '范围选择时选中日期所使用的当日内具体时刻;该属性的可选值为 见日期格式',
|
'zh-CN': 'type="datetime" 时，default-time 是一个字符串，用于设置选择一个日期后，时间输入框中的默认值；<br>type="datetimerange" 时，default-time 是一个字符串数组，用于设置选择一个日期范围后，开始和结束时间输入框中的默认值',
|
||||||
'en-US':
|
'en-US': ''
|
||||||
'Specifies whether the date selector triggers form validation during input. The default value is true.'
|
|
||||||
},
|
},
|
||||||
'demoId': 'default-value'
|
'demoId': 'default-value'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'default-value',
|
'name': 'default-value',
|
||||||
'type': 'Date',
|
'type': 'string | Date',
|
||||||
'defaultValue': '',
|
'defaultValue': 'new Date()',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '可选，当选中的日期值为空时，选择器面板打开时默认显示的时间，需设置为可被new Date()解析的值',
|
'zh-CN': '当选中的日期值为空时，选择器面板打开时默认显示的时间，可以是日期格式或者能被 new Date() 解析的字符串',
|
||||||
'en-US':
|
'en-US': 'Use the arrow button to select the time. This parameter is used when type is set to datetime or datetimerange. By default, the time is selected by scrolling the mouse wheel'
|
||||||
'Use the arrow button to select the time. This parameter is used when type is set to datetime or datetimerange. By default, the time is selected by scrolling the mouse wheel'
|
|
||||||
},
|
},
|
||||||
'demoId': 'default-value'
|
'demoId': 'default-value'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'disabled',
|
'name': 'disabled',
|
||||||
'type': 'Boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '该属性的默认值为 false',
|
'defaultValue': 'false',
|
||||||
'desc': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
|
'desc': {
|
||||||
|
'zh-CN': '禁用',
|
||||||
|
'en-US': 'Disabled'
|
||||||
|
},
|
||||||
'demoId': 'disabled'
|
'demoId': 'disabled'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'editable',
|
'name': 'editable',
|
||||||
'type': 'boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '该属性的默认值为 true',
|
'defaultValue': 'true',
|
||||||
'desc': { 'zh-CN': '文本框可输入', 'en-US': 'The text box can be entered.' },
|
'desc': {
|
||||||
|
'zh-CN': '文本框可输入',
|
||||||
|
'en-US': 'The text box can be entered.'
|
||||||
|
},
|
||||||
'demoId': 'disabled'
|
'demoId': 'disabled'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'end-placeholder',
|
'name': 'end-placeholder',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '',
|
'defaultValue': '\'\'',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '范围选择时结束日期的占位内容',
|
'zh-CN': '范围选择时结束日期的占位内容',
|
||||||
'en-US': 'Placeholder of the end date when the range is selected'
|
'en-US': 'Placeholder of the end date when the range is selected'
|
||||||
|
|
@ -326,93 +381,99 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'format',
|
'name': 'format',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '该属性的默认值为 yyyy-MM-dd',
|
'defaultValue': 'yyyy-MM-dd',
|
||||||
'desc': { 'zh-CN': '显示在输入框中的格式', 'en-US': 'Display format in the text box' },
|
'desc': {
|
||||||
|
'zh-CN': '显示在输入框中的格式',
|
||||||
|
'en-US': 'Display format in the text box'
|
||||||
|
},
|
||||||
'demoId': 'format'
|
'demoId': 'format'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'format-weeks',
|
'name': 'format-weeks',
|
||||||
'type': 'Function',
|
'type': '(customWeeks: number, weekFirstDays: string[]) => string',
|
||||||
'defaultValue': '',
|
'defaultValue': '--',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '格式化周次序号，该回调函数有两个参数，customWeeks 用来获取自定义周次的序号，weekFirstDays 用来获取每周次中的首个日期',
|
||||||
'格式化周次序号，该回调函数有两个参数，customWeeks 用来设置自定义周次的序号，weekFirstDays 用来获取每周次中的首个日期',
|
|
||||||
'en-US': 'The following table lists the options of the current time and date selector.'
|
'en-US': 'The following table lists the options of the current time and date selector.'
|
||||||
},
|
},
|
||||||
'demoId': 'custom-weeks'
|
'demoId': 'custom-weeks'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'isutc8',
|
'name': 'isutc8',
|
||||||
'type': 'Boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '',
|
'defaultValue': 'false',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '默认值为 false，设置为 true 时切换系统默认时区，时间依然显示为东八区时间，适用场景为海外地区显示东八区时间',
|
||||||
'默认值为 false ,设置为 true 时切换系统默认时区，时间依然显示为东八区时间。适用场景为海外地区显示东八区时间',
|
'en-US': 'The default value is false. If this parameter is set to true, the time in GMT+8 is still displayed when the default time zone is switched. Applicable scenario: The GMT+8 time is displayed in regions outside China'
|
||||||
'en-US':
|
|
||||||
'The default value is false. If this parameter is set to true, the time in GMT+8 is still displayed when the default time zone is switched. Applicable scenario: The GMT+8 time is displayed in regions outside China'
|
|
||||||
},
|
},
|
||||||
'demoId': 'isutc8'
|
'demoId': 'isutc8'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'label',
|
'name': 'label',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '',
|
'defaultValue': '\'\'',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '设置 shape="filter" 属性之后，代表过滤器模式下显示的标题，单独设置 label 属性可以使 label 放置在组件的开始位置',
|
||||||
"设置 shape='filter' 属性之后，代表过滤器模式下显示的标题，单独设置 label 属性可以使 label 放置在组件的开始位置。",
|
'en-US': 'Optional. When the selected date is empty, the time displayed by default when the selector panel is opened. Set it to a value that can be parsed by new Date().'
|
||||||
'en-US':
|
|
||||||
'Optional. When the selected date is empty, the time displayed by default when the selector panel is opened. Set it to a value that can be parsed by new Date().'
|
|
||||||
},
|
},
|
||||||
'demoId': 'filter-mode'
|
'demoId': 'filter-mode'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'modelValue / v-model',
|
'name': 'modelValue / v-model',
|
||||||
'type': 'Date / Array',
|
'type': 'Date | string | number | Array',
|
||||||
'defaultValue': '',
|
'defaultValue': '',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '设置日历组件的初始值。;绑定值',
|
'zh-CN': '绑定值',
|
||||||
'en-US': 'Set the initial value of the calendar component. ;Bound Value'
|
'en-US': 'Set the initial value of the calendar component. ;Bound Value'
|
||||||
},
|
},
|
||||||
'demoId': 'basic-usage'
|
'demoId': 'basic-usage'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'name',
|
'name': 'name',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '',
|
'defaultValue': '\'\'',
|
||||||
'desc': { 'zh-CN': '原生属性', 'en-US': '' },
|
'desc': {
|
||||||
|
'zh-CN': '原生属性',
|
||||||
|
'en-US': ''
|
||||||
|
},
|
||||||
'demoId': ''
|
'demoId': ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'picker-options',
|
'name': 'picker-options',
|
||||||
'type': 'Object',
|
'type': 'IPickerOptions',
|
||||||
'defaultValue': '该属性的默认值为 {}',
|
'typeAnchorName': 'IPickerOptions',
|
||||||
'desc': { 'zh-CN': '当前时间日期选择器特有的选项参考下表', 'en-US': "Custom selector's rear icon" },
|
'defaultValue': '--',
|
||||||
|
'desc': {
|
||||||
|
'zh-CN': '配置部分禁用、快捷选项等，包含 firstDayOfWeek / disabledDate / onPick / shortcuts 属性，详细用法可参考 IPickerOptions 类型声明',
|
||||||
|
'en-US': 'Custom selector\'s rear icon'
|
||||||
|
},
|
||||||
'demoId': 'shortcuts'
|
'demoId': 'shortcuts'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'placeholder',
|
'name': 'placeholder',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '该属性的默认值为 []',
|
'defaultValue': '\'\'',
|
||||||
'desc': { 'zh-CN': '非范围选择时的占位内容', 'en-US': 'Placeholder content for non-range selection' },
|
'desc': {
|
||||||
|
'zh-CN': '非范围选择时的占位内容',
|
||||||
|
'en-US': 'Placeholder content for non-range selection'
|
||||||
|
},
|
||||||
'demoId': 'basic-usage'
|
'demoId': 'basic-usage'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'popper-append-to-body',
|
'name': 'popper-append-to-body',
|
||||||
'type': 'Boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '该属性的默认值为 true',
|
'defaultValue': 'true',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '是否将弹出框插入至 body 元素，在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
|
||||||
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
|
'en-US': 'Indicates whether to insert a pop-up box to the body element. When a fault occurs in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
|
||||||
'en-US':
|
|
||||||
'Indicates whether to insert a pop-up box to the body element. When a fault occurs in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
|
|
||||||
},
|
},
|
||||||
'demoId': ''
|
'demoId': ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'popper-class',
|
'name': 'popper-class',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '',
|
'defaultValue': '--',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '为 DatePicker 下拉弹框添加的 class 类名',
|
'zh-CN': '为 DatePicker 下拉弹框添加的 class 类名',
|
||||||
'en-US': 'Cancel the linkage between two date panels in the range selector.'
|
'en-US': 'Cancel the linkage between two date panels in the range selector.'
|
||||||
|
|
@ -421,29 +482,38 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'range-separator',
|
'name': 'range-separator',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '该属性的默认值为 - ',
|
'defaultValue': '\'-\'',
|
||||||
'desc': { 'zh-CN': '选择范围时的分隔符', 'en-US': 'Custom Clear Icon' },
|
'desc': {
|
||||||
|
'zh-CN': '选择范围时的分隔符',
|
||||||
|
'en-US': 'Custom Clear Icon'
|
||||||
|
},
|
||||||
'demoId': 'date-range'
|
'demoId': 'date-range'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'readonly',
|
'name': 'readonly',
|
||||||
'type': 'Boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '该属性的默认值为 false',
|
'defaultValue': 'false',
|
||||||
'desc': { 'zh-CN': '设置日历组件是否只读。', 'en-US': 'Set whether the calendar component is read-only.' },
|
'desc': {
|
||||||
|
'zh-CN': '设置日历组件是否只读',
|
||||||
|
'en-US': 'Set whether the calendar component is read-only.'
|
||||||
|
},
|
||||||
'demoId': 'disabled'
|
'demoId': 'disabled'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'shape',
|
'name': 'shape',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '',
|
'defaultValue': '--',
|
||||||
'desc': { 'zh-CN': "通过 shape='filter' 属性切换至过滤器模式。", 'en-US': 'Separator for selecting a range' },
|
'desc': {
|
||||||
|
'zh-CN': '通过 shape="filter" 属性切换至过滤器模式',
|
||||||
|
'en-US': 'Separator for selecting a range'
|
||||||
|
},
|
||||||
'demoId': 'filter-mode'
|
'demoId': 'filter-mode'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'show-timezone',
|
'name': 'show-timezone',
|
||||||
'type': 'boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '该属性的默认值为 false',
|
'defaultValue': 'false',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '是否开启设置日期选择面板时区选择',
|
'zh-CN': '是否开启设置日期选择面板时区选择',
|
||||||
'en-US': 'Whether to enable the time zone selection function on the date selection panel'
|
'en-US': 'Whether to enable the time zone selection function on the date selection panel'
|
||||||
|
|
@ -453,24 +523,27 @@ export default {
|
||||||
{
|
{
|
||||||
'name': 'show-week-number',
|
'name': 'show-week-number',
|
||||||
'type': 'boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '该属性的默认值为 false',
|
'defaultValue': 'false',
|
||||||
'desc': { 'zh-CN': '是否展示周次序号', 'en-US': 'Class name added to the DatePicker drop-down list box' },
|
'desc': {
|
||||||
|
'zh-CN': '是否展示周次序号',
|
||||||
|
'en-US': 'Class name added to the DatePicker drop-down list box'
|
||||||
|
},
|
||||||
'demoId': 'custom-weeks'
|
'demoId': 'custom-weeks'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'size',
|
'name': 'size',
|
||||||
'type': 'String',
|
'type': '\'medium\' | \'small\' | \'\' | \'mini\'',
|
||||||
'defaultValue': '',
|
'defaultValue': '\'\'',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '输入框尺寸;该属性的可选值为 medium,small, mini',
|
'zh-CN': '输入框尺寸',
|
||||||
'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
|
'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
|
||||||
},
|
},
|
||||||
'demoId': 'size'
|
'demoId': 'size'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'start-placeholder',
|
'name': 'start-placeholder',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '',
|
'defaultValue': '\'\'',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '范围选择时开始日期的占位内容',
|
'zh-CN': '范围选择时开始日期的占位内容',
|
||||||
'en-US': 'Placeholder of the start date when the range is selected'
|
'en-US': 'Placeholder of the start date when the range is selected'
|
||||||
|
|
@ -479,89 +552,93 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'step',
|
'name': 'step',
|
||||||
'type': 'object',
|
'type': 'IStep',
|
||||||
'defaultValue': '',
|
'typeAnchorName': 'IStep',
|
||||||
|
'defaultValue': '--',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '设置 type="datetime" 或者 type="datetimerange" 属性之后，可以通过 step 配置时间的步长，step 是一个对象，包含三个属性：hour、minute、second，分别用来配置时、分、秒的步长',
|
||||||
"设置 type='datetimerange' 属性之后，可以通过 step 配置时间的步长，step 是一个对象，包含三个属性：hour、minute、second，分别用来配置时、分、秒的步长。",
|
|
||||||
'en-US': 'Native attribute'
|
'en-US': 'Native attribute'
|
||||||
},
|
},
|
||||||
'demoId': 'step'
|
'demoId': 'step'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'suffix-icon',
|
'name': 'suffix-icon',
|
||||||
'type': 'Object',
|
'type': 'object',
|
||||||
'defaultValue': '该属性的默认值为 IconCalendar，',
|
'defaultValue': 'IconCalendar',
|
||||||
'desc': { 'zh-CN': '自定义选择器的后置图标', 'en-US': '' },
|
'desc': {
|
||||||
|
'zh-CN': '自定义选择器的后置图标',
|
||||||
|
'en-US': ''
|
||||||
|
},
|
||||||
'demoId': 'custom-suffix-icon'
|
'demoId': 'custom-suffix-icon'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'time-arrow-control',
|
'name': 'time-arrow-control',
|
||||||
'type': 'Boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '',
|
'defaultValue': 'false',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '通过箭头按钮控制时间选择，当 type 为 datetime、datetimerange 时使用，默认为 通过鼠标滚轮滚动选择时间',
|
||||||
'通过箭头按钮控制时间选择，当 type 为 datetime、datetimerange 时使用;默认为 通过鼠标滚轮滚动选择时间',
|
|
||||||
'en-US': ''
|
'en-US': ''
|
||||||
},
|
},
|
||||||
'demoId': 'step'
|
'demoId': 'step'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'time-format',
|
'name': 'time-format',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '',
|
'defaultValue': '\'HH:mm:ss\'',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '当自定义的format格式无法自动区分时间与日期时可配置该选项用来辅助确定格式',
|
'zh-CN': '当自定义的 format 格式无法自动区分时间与日期时，可配置该选项用来辅助确定格式',
|
||||||
'en-US':
|
'en-US': 'If the user-defined format cannot automatically distinguish the time and date, you can set this parameter to assist in determining the format.'
|
||||||
'If the user-defined format cannot automatically distinguish the time and date, you can set this parameter to assist in determining the format.'
|
|
||||||
},
|
},
|
||||||
'demoId': 'format'
|
'demoId': 'format'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'tip',
|
'name': 'tip',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '',
|
'defaultValue': '--',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '过滤器模式下显示的提示信息。',
|
'zh-CN': '过滤器模式下显示的提示信息',
|
||||||
'en-US':
|
'en-US': 'The specific time of the current day used by the selected date during range selection; The optional value of this attribute is see date format'
|
||||||
'The specific time of the current day used by the selected date during range selection; The optional value of this attribute is see date format'
|
|
||||||
},
|
},
|
||||||
'demoId': 'filter-mode'
|
'demoId': 'filter-mode'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'type',
|
'name': 'type',
|
||||||
'type': 'String',
|
'type': 'IType',
|
||||||
'defaultValue': '该属性的默认值为 date',
|
'typeAnchorName': 'IType',
|
||||||
|
'defaultValue': '\'date\'',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN':
|
'zh-CN': '显示类型，该属性的可选值可参考 IType 类型声明',
|
||||||
'显示类型;该属性的可选值为 year / month / dates / week / daterange / date / datetime / datetimerange / monthrange',
|
'en-US': 'Display type; The optional value of this attribute is year / month / dates / week / daterange / date / datetime / datetimerange / monthrange'
|
||||||
'en-US':
|
|
||||||
'Display type; The optional value of this attribute is year / month / dates / week / daterange / date / datetime / datetimerange / monthrange'
|
|
||||||
},
|
},
|
||||||
'demoId': 'basic-usage'
|
'demoId': 'basic-usage'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'unlink-panels',
|
'name': 'unlink-panels',
|
||||||
'type': 'boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '该属性的默认值为 false',
|
'defaultValue': 'false',
|
||||||
'desc': { 'zh-CN': '在范围选择器里取消两个日期面板之间的联动', 'en-US': '' },
|
'desc': {
|
||||||
|
'zh-CN': '在范围选择器里取消两个日期面板之间的联动',
|
||||||
|
'en-US': ''
|
||||||
|
},
|
||||||
'demoId': 'unlink-panels'
|
'demoId': 'unlink-panels'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'validate-event',
|
'name': 'validate-event',
|
||||||
'type': 'boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': '',
|
'defaultValue': 'true',
|
||||||
'desc': { 'zh-CN': '设置日期选择器在输入时是否会触发表单校验;默认为 true', 'en-US': '' },
|
'desc': {
|
||||||
|
'zh-CN': '设置日期选择器在输入时是否会触发表单校验',
|
||||||
|
'en-US': ''
|
||||||
|
},
|
||||||
'demoId': 'validate-event'
|
'demoId': 'validate-event'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'value-format',
|
'name': 'value-format',
|
||||||
'type': 'String',
|
'type': 'string',
|
||||||
'defaultValue': '该属性的默认值为 Date 对象',
|
'defaultValue': 'Date 对象',
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '指定绑定值的格式。不指定则绑定值为 Date 对象',
|
'zh-CN': '指定绑定值的格式，不指定则绑定值为 Date 对象',
|
||||||
'en-US':
|
'en-US': 'Specifies the format of the binding value. If this parameter is not specified, the binding value is Date'
|
||||||
'Specifies the format of the binding value. If this parameter is not specified, the binding value is Date'
|
|
||||||
},
|
},
|
||||||
'demoId': 'format'
|
'demoId': 'format'
|
||||||
}
|
}
|
||||||
|
|
@ -569,33 +646,28 @@ export default {
|
||||||
'events': [
|
'events': [
|
||||||
{
|
{
|
||||||
'name': 'blur',
|
'name': 'blur',
|
||||||
'type': 'Function',
|
'type': '() => void',
|
||||||
'defaultValue': '',
|
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '当 input 失去焦点时触发;blur() { \n//do something you want...\n}',
|
'zh-CN': '当 input 失去焦点时触发',
|
||||||
'en-US': 'This event is triggered when the input loses focus; blur() {\n//do something you want...\n}'
|
'en-US': 'This event is triggered when the input loses focus; blur() {\n//do something you want...\n}'
|
||||||
},
|
},
|
||||||
'demoId': 'events'
|
'demoId': 'events'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'change',
|
'name': 'change',
|
||||||
'type': 'Function(arg1)',
|
'type': '(value: Date) => void',
|
||||||
'defaultValue': '',
|
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '用户确认选定的值时触发;change（arg1）{ // arg1为datepicker改变后的日期或者是日期集}',
|
'zh-CN': '用户确认选定的值时触发',
|
||||||
'en-US':
|
'en-US': 'This event is triggered when the user confirms the selected value. change (arg1) {//arg1 is the changed date or date set of datepicker}'
|
||||||
'This event is triggered when the user confirms the selected value. change (arg1) {//arg1 is the changed date or date set of datepicker}'
|
|
||||||
},
|
},
|
||||||
'demoId': 'events'
|
'demoId': 'events'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'focus',
|
'name': 'focus',
|
||||||
'type': 'Function(arg1)',
|
'type': '() => void',
|
||||||
'defaultValue': '',
|
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '当 input 获得焦点时触发;focus(arg1}{ \n// arg1 = 对组件vue实例 \n//do something you want...\n}',
|
'zh-CN': '当 input 获得焦点时触发',
|
||||||
'en-US':
|
'en-US': 'This event is triggered when the input is focused. focus(arg1}{\n// arg1 = to component vue instance\n//do something you want...\n}'
|
||||||
'This event is triggered when the input is focused. focus(arg1}{\n// arg1 = to component vue instance\n//do something you want...\n}'
|
|
||||||
},
|
},
|
||||||
'demoId': 'events'
|
'demoId': 'events'
|
||||||
}
|
}
|
||||||
|
|
@ -604,13 +676,15 @@ export default {
|
||||||
'methods': [
|
'methods': [
|
||||||
{
|
{
|
||||||
'name': 'focus',
|
'name': 'focus',
|
||||||
'type': '',
|
'type': '() => void',
|
||||||
'defaultValue': '',
|
'desc': {
|
||||||
'desc': { 'zh-CN': '使 input 获取焦点', 'en-US': 'Enable input to focus.' },
|
'zh-CN': '使 input 获取焦点',
|
||||||
|
'en-US': 'Enable input to focus.'
|
||||||
|
},
|
||||||
'demoId': ''
|
'demoId': ''
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'props format': [
|
'format': [
|
||||||
{
|
{
|
||||||
'name': 'a',
|
'name': 'a',
|
||||||
'desc': { 'zh-CN': 'am/pm', 'en-US': '' },
|
'desc': { 'zh-CN': 'am/pm', 'en-US': '' },
|
||||||
|
|
@ -691,5 +765,47 @@ export default {
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
'types': [
|
||||||
|
{
|
||||||
|
name: 'IPickerOptions',
|
||||||
|
type: 'interface',
|
||||||
|
code: `
|
||||||
|
interface IPickerOptions {
|
||||||
|
// 每周的第一天是星期几，默认值是7，也就是星期天
|
||||||
|
firstDayOfWeek: number
|
||||||
|
// 实现部分禁用，此时只能选择一部分日期
|
||||||
|
disabledDate: (time: Date) => boolean
|
||||||
|
// 选中日期后执行的回调，需要与 daterange 或 datetimerange 类型配合使用才生效
|
||||||
|
onPick: (range: { minDate: Date, maxDate: Date }) => void
|
||||||
|
// 快捷选项
|
||||||
|
shortcuts: {
|
||||||
|
text: string
|
||||||
|
onClick: (picker: { $emit: (type: string, date: Date) => void }) => void
|
||||||
|
type: 'startFrom' | 'EndAt'
|
||||||
|
startDate: Date
|
||||||
|
endDate: Date
|
||||||
|
}[]
|
||||||
|
}
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'IStep',
|
||||||
|
type: 'interface',
|
||||||
|
code: `
|
||||||
|
interface IStep {
|
||||||
|
hour: number
|
||||||
|
minute: number
|
||||||
|
second: number
|
||||||
|
}
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'IType',
|
||||||
|
type: 'type',
|
||||||
|
code: `
|
||||||
|
type IType = 'date' | 'dates' | 'daterange' | 'datetime' | 'datetimerange' | 'week' | 'month' | 'monthrange' | 'year' | 'years' | 'yearrange'
|
||||||
|
`
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue