mirror of
https://gitlab.com/bramw/baserow.git
synced 2024-11-24 16:36:46 +00:00
108 lines
2.9 KiB
Vue
108 lines
2.9 KiB
Vue
<template>
|
|
<div class="field-date__container">
|
|
<FormGroup class="field-date" :error="touched && !valid">
|
|
<FormInput
|
|
ref="date"
|
|
v-model="date"
|
|
size="large"
|
|
:error="touched && !valid"
|
|
:placeholder="getDatePlaceholder(field)"
|
|
:disabled="readOnly"
|
|
icon-right="iconoir-calendar"
|
|
@keyup.enter="$refs.date.blur()"
|
|
@keyup="updateDate(field, date)"
|
|
@focus="focus($refs.dateContext, $event)"
|
|
@blur="blur($refs.dateContext, $event)"
|
|
></FormInput>
|
|
|
|
<Context
|
|
ref="dateContext"
|
|
:hide-on-click-outside="false"
|
|
class="datepicker-context"
|
|
>
|
|
<client-only>
|
|
<date-picker
|
|
v-if="!readOnly"
|
|
:inline="true"
|
|
:monday-first="true"
|
|
:use-utc="true"
|
|
:value="pickerDate"
|
|
:language="datePickerLang[$i18n.locale]"
|
|
class="datepicker"
|
|
@input="chooseDate(field, $event)"
|
|
></date-picker>
|
|
</client-only>
|
|
</Context>
|
|
</FormGroup>
|
|
|
|
<FormGroup
|
|
v-if="field.date_include_time"
|
|
:error="touched && !valid"
|
|
class="field-date__time"
|
|
>
|
|
<FormInput
|
|
ref="time"
|
|
v-model="time"
|
|
size="large"
|
|
:error="touched && !valid"
|
|
:placeholder="getTimePlaceholder(field)"
|
|
:disabled="readOnly"
|
|
icon-right="iconoir-clock"
|
|
@keyup.enter="$refs.time.blur()"
|
|
@keyup="updateTime(field, time)"
|
|
@focus="focus($refs.timeContext, $event)"
|
|
@blur="blur($refs.timeContext, $event)"
|
|
/>
|
|
|
|
<TimeSelectContext
|
|
v-if="!readOnly"
|
|
ref="timeContext"
|
|
:value="time"
|
|
:hide-on-click-outside="false"
|
|
:notation="field.date_time_format"
|
|
@input="chooseTime(field, $event)"
|
|
></TimeSelectContext>
|
|
|
|
<template #error>
|
|
<span v-show="touched && !valid">
|
|
{{ error }}
|
|
</span>
|
|
</template>
|
|
</FormGroup>
|
|
|
|
<div class="field-date__tzinfo">
|
|
{{ getCellTimezoneAbbr(field, value, { force: true }) }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import TimeSelectContext from '@baserow/modules/core/components/TimeSelectContext'
|
|
import rowEditField from '@baserow/modules/database/mixins/rowEditField'
|
|
import rowEditFieldInput from '@baserow/modules/database/mixins/rowEditFieldInput'
|
|
import dateField from '@baserow/modules/database/mixins/dateField'
|
|
import { en, fr } from 'vuejs-datepicker/dist/locale'
|
|
|
|
export default {
|
|
components: { TimeSelectContext },
|
|
mixins: [rowEditField, rowEditFieldInput, dateField],
|
|
data() {
|
|
return {
|
|
datePickerLang: {
|
|
en,
|
|
fr,
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
focus(...args) {
|
|
this.select()
|
|
dateField.methods.focus.call(this, ...args)
|
|
},
|
|
blur(...args) {
|
|
dateField.methods.blur.call(this, ...args)
|
|
this.unselect()
|
|
},
|
|
},
|
|
}
|
|
</script>
|