| | |
| | | |
| | | <template> |
| | | <div class="dateTime"> |
| | | <UiDatePicker @changeDate="changeDateTime($event, 'date')"></UiDatePicker> |
| | | <UiTimePicker @changeTime="changeDateTime($event, 'time')"></UiTimePicker> |
| | | <UiDatePicker |
| | | @changeDate="changeDateTime($event, 'date')" |
| | | :disabledBeforeSpecificDate="disabledBeforeSpecificDate" |
| | | :isPastDateDisabled="isPastDateDisabled" |
| | | :isFutureDateDisabled="isFutureDateDisabled" |
| | | :defaultValue="defaultValue" |
| | | ></UiDatePicker> |
| | | <UiTimePicker |
| | | @changeTime="changeDateTime($event, 'time')" |
| | | :defaultValue="defaultValue" |
| | | :isPastDateDisabled="isPastDateDisabled" |
| | | :isFutureDateDisabled="isFutureDateDisabled" |
| | | :changeDate="changeDate" |
| | | ></UiTimePicker> |
| | | </div> |
| | | </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 DateTimePicker extends Vue { |
| | | changeDate!: Date; |
| | | changeDate: Date | string = ''; |
| | | changeTime!: string; |
| | | |
| | | @Prop() |
| | | defaultValue!: string; |
| | | |
| | | @Prop() |
| | | isPastDateDisabled!: boolean; |
| | | |
| | | @Prop() |
| | | isFutureDateDisabled!: boolean; |
| | | |
| | | @Prop() |
| | | disabledBeforeSpecificDate?: string; |
| | | |
| | | @Emit('changeDateTime') |
| | | changeDateTime(event, type) { |
| | |
| | | this.changeTime = event; |
| | | } |
| | | if (this.changeDate && this.changeTime) { |
| | | const timeArray = this.changeTime.split(':'); |
| | | const interViewTime = this.changeDate.setHours(+timeArray[0], +timeArray[1]); |
| | | const hour = this.changeTime.split(':')[0]; |
| | | const minute = this.changeTime.split(':')[1]; |
| | | const interViewTime = new Date(this.changeDate).setHours(+hour, +minute); |
| | | return new Date(interViewTime); |
| | | } |
| | | return ''; |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | |
| | |
| | | justify-content: space-between; |
| | | font-size: 20px; |
| | | } |
| | | </style> |
| | | </style> |