203 lines
3.6 KiB
Vue
203 lines
3.6 KiB
Vue
<template>
|
|
<div class="ui-datepicker" :class="{'is-disabled': disabled }">
|
|
<input type="text" class="ui-input ui-datepicker-input" v-localize:placeholder="placeholder" :value="output" @input="onChange" @focus="onFocus" @blur="onBlur" :disabled="disabled" />
|
|
<ui-icon v-if="!clear || !value" symbol="fth-calendar" class="ui-datepicker-icon" :size="17" />
|
|
<button v-if="clear && value" type="button" class="ui-datepicker-input-button" @click="clearInput"><ui-icon symbol="fth-x" :size="15" /></button>
|
|
|
|
<ui-dropdown ref="overlay" class="ui-datepicker-overlay" @opened="overlayOpened">
|
|
<ui-calendar :today="value" @change="onSelect" :options="pickerOptions" />
|
|
</ui-dropdown>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { generateId } from '../utils/numbers';
|
|
import { formatDate, toIsoDate } from '../utils/dates';
|
|
|
|
const DATETIME_FORMAT = 'DD.MM.YY HH:mm';
|
|
const DATE_FORMAT = 'DD.MM.YY';
|
|
|
|
export default {
|
|
name: 'uiDatepicker',
|
|
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '@ui.date.select'
|
|
},
|
|
clear: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
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
|
|
},
|
|
amPm: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
|
|
data: () => ({
|
|
id: null,
|
|
output: null,
|
|
pickerOptions: {}
|
|
}),
|
|
|
|
|
|
watch: {
|
|
value()
|
|
{
|
|
this.updateOutput();
|
|
},
|
|
format()
|
|
{
|
|
this.updateOutput();
|
|
}
|
|
},
|
|
|
|
|
|
mounted()
|
|
{
|
|
this.id = 'datepicker-' + generateId();
|
|
this.updateOptions();
|
|
this.updateOutput();
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
updateOutput()
|
|
{
|
|
this.output = formatDate(this.value, this.format || (this.time ? DATETIME_FORMAT : DATE_FORMAT));
|
|
},
|
|
|
|
|
|
updateOptions()
|
|
{
|
|
this.pickerOptions = {
|
|
enableTime: this.time,
|
|
maxDate: this.maxDate,
|
|
minDate: this.minDate,
|
|
time_24hr: !this.amPm
|
|
};
|
|
},
|
|
|
|
|
|
onSelect(date)
|
|
{
|
|
let dateStr = toIsoDate(date);
|
|
this.setValue(dateStr);
|
|
this.$refs.overlay.hide();
|
|
document.activeElement.blur();
|
|
},
|
|
|
|
|
|
onChange(ev)
|
|
{
|
|
this.setValue(ev.target.value);
|
|
},
|
|
|
|
|
|
setValue(value)
|
|
{
|
|
this.$emit('change', value);
|
|
this.$emit('input', value);
|
|
},
|
|
|
|
|
|
onFocus()
|
|
{
|
|
this.$refs.overlay.show();
|
|
},
|
|
|
|
|
|
onBlur()
|
|
{
|
|
if (!this.$refs.overlay.open)
|
|
{
|
|
this.$refs.overlay.hide();
|
|
}
|
|
},
|
|
|
|
|
|
clearInput()
|
|
{
|
|
this.setValue(null);
|
|
},
|
|
|
|
|
|
overlayOpened()
|
|
{
|
|
|
|
}
|
|
|
|
//pick()
|
|
//{
|
|
// this.$el.
|
|
//}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ui-datepicker
|
|
{
|
|
position: relative;
|
|
max-width: 260px;
|
|
}
|
|
|
|
input[type="text"].ui-datepicker-input
|
|
{
|
|
padding-right: 36px;
|
|
}
|
|
|
|
.ui-datepicker-icon
|
|
{
|
|
position: absolute;
|
|
right: 13px;
|
|
top: 50%;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.ui-datepicker-overlay .ui-dropdown
|
|
{
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-datepicker-input-button
|
|
{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 40px;
|
|
text-align: center;
|
|
font-size: var(--font-size);
|
|
padding-top: 1px;
|
|
}
|
|
</style> |