162 lines
3.7 KiB
Vue
162 lines
3.7 KiB
Vue
<template>
|
|
<div class="ui-daterangepicker" :class="{'is-disabled': disabled }">
|
|
<button v-if="!inline" type="button" class="ui-linktext" @click="schedule" v-localize="scheduleLocalize" :disabled="disabled"></button>
|
|
<div v-if="inline && value" class="ui-daterangepicker-inline">
|
|
<div class="ui-daterangepicker-group">
|
|
<ui-property :vertical="true">
|
|
<ui-datepicker v-model="value.from" :time="time" />
|
|
</ui-property>
|
|
</div>
|
|
<div class="ui-daterangepicker-group" v-if="rangeEnd">
|
|
<ui-property :vertical="true">
|
|
<ui-datepicker v-model="value.to" :time="time" />
|
|
</ui-property>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import Strings from 'zero/helpers/strings.js';
|
|
import { extend as _extend } from 'underscore';
|
|
import DaterangepickerOverlay from './overlay.vue';
|
|
import Overlay from 'zero/helpers/overlay.js';
|
|
import dayjs from 'dayjs';
|
|
|
|
const DATETIME_FORMAT = 'DD.MM.YY HH:mm';
|
|
const DATE_FORMAT = 'DD.MM.YY';
|
|
|
|
export default {
|
|
name: 'uiDaterangepicker',
|
|
|
|
components: { DaterangepickerOverlay },
|
|
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
default: {
|
|
from: null,
|
|
to: null
|
|
}
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
time: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
maxDate: {
|
|
type: [String, Date],
|
|
default: null
|
|
},
|
|
minDate: {
|
|
type: [String, Date],
|
|
default: null
|
|
},
|
|
fromLabel: {
|
|
type: String,
|
|
default: '@ui.date.range_from'
|
|
},
|
|
toLabel: {
|
|
type: String,
|
|
default: '@ui.date.range_to'
|
|
},
|
|
amPm: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
rangeEnd: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
options: {
|
|
type: Object,
|
|
default: () => { }
|
|
}
|
|
},
|
|
|
|
|
|
data: () => ({
|
|
id: null,
|
|
output: null,
|
|
pickerOptions: {}
|
|
}),
|
|
|
|
|
|
computed: {
|
|
scheduleLocalize()
|
|
{
|
|
return {
|
|
key: !this.value || (!this.value.from && !this.value.to) ? '@ui.date.set' :
|
|
(this.value.from && !this.value.to ? '@ui.date.x' :
|
|
(!this.value.from && this.value.to ? '@ui.date.y' : '@ui.date.xtoy')),
|
|
tokens: {
|
|
x: this.value ? Strings.date(this.value.from, this.format || (this.time ? DATETIME_FORMAT : DATE_FORMAT)) : null,
|
|
y: this.value ? Strings.date(this.value.to, this.format || (this.time ? DATETIME_FORMAT : DATE_FORMAT)) : null
|
|
}
|
|
};
|
|
}
|
|
},
|
|
|
|
|
|
created()
|
|
{
|
|
this.id = 'daterangepicker-' + Strings.guid();
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
schedule()
|
|
{
|
|
Overlay.open({
|
|
component: DaterangepickerOverlay,
|
|
options: {
|
|
format: this.format,
|
|
time: this.time,
|
|
max: this.maxDate,
|
|
min: this.minDate,
|
|
fromText: this.fromLabel,
|
|
toText: this.toLabel,
|
|
amPm: this.amPm,
|
|
rangeEnd: this.rangeEnd
|
|
},
|
|
model: {
|
|
from: this.value.from,
|
|
to: this.value.to
|
|
},
|
|
}).then(res =>
|
|
{
|
|
this.$emit('change', res);
|
|
this.$emit('input', res);
|
|
}, () => { });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ui-daterangepicker.is-primary .ui-linktext
|
|
{
|
|
color: var(--color-primary);
|
|
font-weight: 700;
|
|
text-decoration-color: var(--color-primary) !important;
|
|
}
|
|
|
|
.ui-daterangepicker-inline
|
|
{
|
|
display: flex;
|
|
gap: var(--padding-s);
|
|
}
|
|
</style> |