@nextcloud/vue
Version:
Nextcloud vue components
198 lines (197 loc) • 6.91 kB
JavaScript
import '../assets/NcDateTimePickerNative-BAcKr0B3.css';
import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
import { S as ScopeComponent } from "../chunks/ScopeComponent-BVnA9iVd.mjs";
const inputDateTypes = ["date", "datetime-local", "month", "time", "week"];
const _sfc_main = {
name: "NcDateTimePickerNative",
inheritAttrs: false,
props: {
/**
* The date is – like the `Date` object in JavaScript – tied to UTC.
* The selected time zone does not have an influence of the selected time and date value.
* You have to translate the time yourself when you want to factor in time zones.
* Pass null to clear the input field.
*/
value: {
type: Date,
default: null
},
/**
* id attribute of the input field
*/
id: {
type: String,
required: true
},
/**
* type attribute of the input field
* default type: String
* The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`
*/
type: {
type: String,
default: "date",
validate: (name) => inputDateTypes.includes(name)
},
/**
* text inside the label element
* default type: String
*/
label: {
type: String,
default: "Please choose a date"
},
/**
* min attribute of the input field
* default type: null
*/
min: {
type: [Date, Boolean],
default: null
},
/**
* max attribute of the input field
* default type: null
*/
max: {
type: [Date, Boolean],
default: null
},
/**
* Flag to hide the label
* default type: String
* The hidden input label for accessibility purposes.
*/
hideLabel: {
type: Boolean,
default: false
},
/**
* Class to add to the input field.
* Necessary to use NcDateTimePickerNative in the NcActionInput component.
*/
inputClass: {
type: [Object, String],
default: ""
}
},
emits: [
"input"
],
computed: {
formattedValue() {
return this.formatValue(this.value);
},
formattedMin() {
if (this.min) {
return this.formatValue(this.min);
}
return false;
},
formattedMax() {
if (this.max) {
return this.formatValue(this.max);
}
return false;
},
listeners() {
return {
...this.$listeners,
/**
* Handle the input event
*
* @param {InputEvent} $event input event payload
* @return {Date|string} new chosen Date() or an empty string
*/
input: ($event) => {
if (isNaN($event.target.valueAsNumber)) {
return this.$emit("input", null);
}
if (this.type === "time") {
const time = $event.target.value;
if (this.value === "") {
const { yyyy: yyyy2, MM: MM2, dd: dd2 } = this.getReadableDate(/* @__PURE__ */ new Date());
return this.$emit("input", new Date("".concat(yyyy2, "-").concat(MM2, "-").concat(dd2, "T").concat(time)));
}
const { yyyy, MM, dd } = this.getReadableDate(this.value);
return this.$emit("input", new Date("".concat(yyyy, "-").concat(MM, "-").concat(dd, "T").concat(time)));
} else if (this.type === "month") {
const MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, "0");
if (this.value === "") {
const { yyyy: yyyy2, dd: dd2, hh: hh2, mm: mm2 } = this.getReadableDate(/* @__PURE__ */ new Date());
return this.$emit("input", new Date("".concat(yyyy2, "-").concat(MM, "-").concat(dd2, "T").concat(hh2, ":").concat(mm2)));
}
const { yyyy, dd, hh, mm } = this.getReadableDate(this.value);
return this.$emit("input", new Date("".concat(yyyy, "-").concat(MM, "-").concat(dd, "T").concat(hh, ":").concat(mm)));
}
const timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1e3 * 60;
const inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds;
return this.$emit("input", new Date(inputDateWithTimezone));
}
};
}
},
methods: {
/**
* Returns Object with string values of a Date
*
* @param {Date} value The selected value
* @return {object|undefined}
*/
getReadableDate(value) {
if (value instanceof Date) {
const yyyy = value.getFullYear().toString().padStart(4, "0");
const MM = (value.getMonth() + 1).toString().padStart(2, "0");
const dd = value.getDate().toString().padStart(2, "0");
const hh = value.getHours().toString().padStart(2, "0");
const mm = value.getMinutes().toString().padStart(2, "0");
return { yyyy, MM, dd, hh, mm };
}
},
/**
* Returns preformatted value for the input field
*
* @param {Date} value The selected value
* @return {string|undefined}
*/
formatValue(value) {
if (value instanceof Date) {
const { yyyy, MM, dd, hh, mm } = this.getReadableDate(value);
if (this.type === "datetime-local") {
return "".concat(yyyy, "-").concat(MM, "-").concat(dd, "T").concat(hh, ":").concat(mm);
} else if (this.type === "date") {
return "".concat(yyyy, "-").concat(MM, "-").concat(dd);
} else if (this.type === "month") {
return "".concat(yyyy, "-").concat(MM);
} else if (this.type === "time") {
return "".concat(hh, ":").concat(mm);
} else if (this.type === "week") {
const startDate = new Date(yyyy, 0, 1);
const daysSinceBeginningOfYear = Math.floor((value - startDate) / (24 * 60 * 60 * 1e3));
const weekNumber = Math.ceil(daysSinceBeginningOfYear / 7);
return "".concat(yyyy, "-W").concat(weekNumber);
}
} else {
return "";
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "native-datetime-picker" }, [_c("label", { class: { "hidden-visually": _vm.hideLabel }, attrs: { "for": _vm.id } }, [_vm._v(_vm._s(_vm.label))]), _c("input", _vm._g(_vm._b({ staticClass: "native-datetime-picker--input", class: _vm.inputClass, attrs: { "id": _vm.id, "type": _vm.type, "min": _vm.formattedMin, "max": _vm.formattedMax }, domProps: { "value": _vm.formattedValue } }, "input", _vm.$attrs, false), _vm.listeners))]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"fbe2ff4a"
);
const NcDateTimePickerNative = __component__.exports;
ScopeComponent(NcDateTimePickerNative);
export {
NcDateTimePickerNative as default
};