@nextcloud/vue/dist/chunks/NcDateTimePickerNative-DXF3-uR3.mjs

Nextcloud vue components

import '../assets/NcDateTimePickerNative-BP6eg8aU.css';
import { defineComponent, mergeModels, useModel, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, toDisplayString, mergeProps } from "vue";
import { r as register, a as t } from "./_l10n-DrTiip5c.mjs";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
register();
const _hoisted_1 = ["for"];
const _hoisted_2 = ["id", "type", "value", "min", "max"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ inheritAttrs: false },
  __name: "NcDateTimePickerNative",
  props: /* @__PURE__ */ mergeModels({
    class: { default: void 0 },
    id: { default: () => createElementId() },
    inputClass: { default: "" },
    type: { default: "date" },
    label: { default: () => t("Please choose a date") },
    min: { default: null },
    max: { default: null },
    hideLabel: { type: Boolean }
  }, {
    "modelValue": { default: null },
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const modelValue = useModel(__props, "modelValue");
    const props = __props;
    const formattedValue = computed(() => modelValue.value ? formatValue(modelValue.value) : "");
    const formattedMax = computed(() => props.max ? formatValue(props.max) : void 0);
    const formattedMin = computed(() => props.min ? formatValue(props.min) : void 0);
    function getReadableDate(value) {
      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 };
    }
    function formatValue(value) {
      const { yyyy, MM, dd, hh, mm } = getReadableDate(value);
      if (props.type === "datetime-local") {
        return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
      } else if (props.type === "date") {
        return `${yyyy}-${MM}-${dd}`;
      } else if (props.type === "month") {
        return `${yyyy}-${MM}`;
      } else if (props.type === "time") {
        return `${hh}:${mm}`;
      } else if (props.type === "week") {
        const startDate = new Date(Number.parseInt(yyyy), 0, 1);
        const daysSinceBeginningOfYear = Math.floor((value.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1e3));
        const weekNumber = Math.ceil(daysSinceBeginningOfYear / 7);
        return `${yyyy}-W${weekNumber}`;
      }
      return "";
    }
    function onInput(event) {
      const input = event.target;
      if (!input || isNaN(input.valueAsNumber)) {
        modelValue.value = null;
      } else if (props.type === "time") {
        const time = input.value;
        const { yyyy, MM, dd } = getReadableDate(modelValue.value || /* @__PURE__ */ new Date());
        modelValue.value = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${time}`);
      } else if (props.type === "month") {
        const MM = (new Date(input.value).getMonth() + 1).toString().padStart(2, "0");
        const { yyyy, dd, hh, mm } = getReadableDate(modelValue.value || /* @__PURE__ */ new Date());
        modelValue.value = /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`);
      } else {
        const timezoneOffsetSeconds = new Date(input.valueAsNumber).getTimezoneOffset() * 1e3 * 60;
        const inputDateWithTimezone = input.valueAsNumber + timezoneOffsetSeconds;
        modelValue.value = new Date(inputDateWithTimezone);
      }
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["native-datetime-picker", _ctx.$props.class])
      }, [
        createElementVNode("label", {
          class: normalizeClass(["native-datetime-picker__label", { "hidden-visually": _ctx.hideLabel }]),
          for: _ctx.id
        }, toDisplayString(_ctx.label), 11, _hoisted_1),
        createElementVNode("input", mergeProps({
          id: _ctx.id,
          class: ["native-datetime-picker__input", _ctx.inputClass],
          type: _ctx.type,
          value: formattedValue.value,
          min: formattedMin.value,
          max: formattedMax.value
        }, _ctx.$attrs, { onInput }), null, 16, _hoisted_2)
      ], 2);
    };
  }
});
const NcDateTimePickerNative = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b97e1f7a"]]);
export {
  NcDateTimePickerNative as N
};
//# sourceMappingURL=NcDateTimePickerNative-DXF3-uR3.mjs.map