mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-27 02:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: [datetimePicker]add guide of value-format (#5082)

Browse Source
This commit is contained in:
Alan Wang 2022-01-04 10:56:55 +08:00 committed by GitHub
parent dd19cae2bc
commit a6ef40d1de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/en-US/component/datetime-picker.md
View File

@ -42,6 +42,26 @@ datetime-picker/date-and-time
:::
## DateTime Formats
Use `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.
By default, the component accepts and emits a `Date` object.
Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-available-formats) of all available formats of Day.js.
:::warning
Pay attention to capitalization
:::
:::demo
datetime-picker/date-and-time-formats
:::
## Date and time range
:::demo You can select date and time range by setting `type` to `datetimerange`.
@ -78,6 +98,7 @@ datetime-picker/default-time
| range-separator | range separator | string | - | '-' |
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
| default-time | the default time value after picking a date | non-range: Date / range: Date[] | non-range: a Date object, range: array of two Date objects, and the first item is for the start date and second for the end date. Time `00:00:00` will be used if not specified | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](https://day.js.org/docs/en/display/format) | — |
| id | same as `id` in native input | string / array(string) | String `id="my-datetime"` or array `:id="['my-range-start', 'my-range-end']"` for date range | - |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |

57
docs/examples/datetime-picker/date-and-time-formats.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Emits Date object</span>
<div class="demonstration">Value: {{ value1 }}</div>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="Pick a Date"
format="YYYY/MM/DD hh:mm:ss"
>
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Use value-format</span>
<div class="demonstration">Value：{{ value2 }}</div>
<el-date-picker
v-model="value2"
type="datetime"
placeholder="Pick a Date"
format="YYYY/MM/DD hh:mm:ss"
value-format="YYYY-MM-DD h:m:s a"
>
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Timestamp</span>
<div class="demonstration">Value：{{ value3 }}</div>
<el-date-picker
v-model="value3"
type="datetime"
placeholder="Pick a Date"
format="YYYY/MM/DD hh:mm:ss"
value-format="x"
>
</el-date-picker>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
return {
value1,
value2,
value3,
}
},
})
</script>