| | |
|---|
| | | :clearable="false" |
|---|
| | | :picker-options="pickerOptions" |
|---|
| | | placeholder="選擇時間" |
|---|
| | | prefix-icon="icon-down" |
|---|
| | | prefix-icon="icon-down down-icon" |
|---|
| | | value-format="timestamp" |
|---|
| | | @change="changeTime" |
|---|
| | | > |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script lang="ts"> |
|---|
| | | import { Component, Emit, Vue } from "nuxt-property-decorator"; |
|---|
| | | import { Component, Emit, Prop, Vue, Watch } from "nuxt-property-decorator"; |
|---|
| | | |
|---|
| | | @Component |
|---|
| | | export default class UiTimePicker extends Vue { |
|---|
| | |
|---|
| | | end: '21:00' |
|---|
| | | } |
|---|
| | | |
|---|
| | | @Prop() |
|---|
| | | defaultValue!: string; |
|---|
| | | |
|---|
| | | @Emit('changeTime') |
|---|
| | | changeTime() { |
|---|
| | | return this.timeValue; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @Watch('defaultValue', {immediate: true}) |
|---|
| | | updateDefault() { |
|---|
| | | if (this.defaultValue) { |
|---|
| | | const hours = new Date(this.defaultValue).getHours(); |
|---|
| | | const minutes = new Date(this.defaultValue).getMinutes(); |
|---|
| | | this.timeValue = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`; |
|---|
| | | this.changeTime(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
