[Vuejs]-Quasar UI Q-Date picker. How do I get a q-input to accept another date format and update the model value in q-date?

by

0👍

Ok, figured it out after too many hours.

Here’s the revised code:

<template>
  <q-input class="fit" v-model="formattedDate" :mask="dateMask" id="date-input">
    <template v-slot:prepend>
      <q-icon name="event" class="cursor-pointer">
        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
          <q-date v-model="formattedDate" :mask="dateFormat" today-btn>
            <div class="row items-center justify-end">
              <q-btn v-close-popup label="Close" color="primary" flat />
            </div>
          </q-date>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<script setup lang="ts">
import { date } from "quasar";

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(["update:modelValue"]);

//Get client locale for date formatting
const clientLocale = navigator.language;
const dateFormat = useGetLocaleDateFormat();

//Make a mask for the q-input in the form of ##-##-#### or whatever locale.
const dateMask = dateFormat.replace(/[DMY]/g, "#");

//Format the date for display in the q-input.
const formattedDate = ref(
  date.formatDate(new Date(props.modelValue), dateFormat)
);

//Watchers to emit the updated date when changed.
watch(formattedDate, (newDateValue) => {
  //construct new date ISO string from the formattedDate.
  const newDate = date.extractDate(newDateValue, dateFormat);
  //convert to iso string
  const updatedDate = newDate.toISOString();
  emit("update:modelValue", updatedDate);
});
</script>

Leave a comment