dateformat.md

Date format in OHRM Application

Date format for the application can be configured within Admin - Localisation screen via a Admin user. this format is universal for the application and once changed all places should be updated. This format is only used for the display purposes and all the communication between BE/FE via API is carried out via single date format that is not user changeable. (Hence the distinction display format and io format)

Difference between BE/FE date format.

The tokens (symbols) that is used between PHP and JavaScript languages are different when using date format.

• PHP Tokens => https://www.php.net/manual/en/datetime.format.php
• JS (date-fns) Tokens => https://date-fns.org/v2.28.0/docs/format

Consider date with format 2022-05-11 (Year-month-date)

• PHP Format - Y-m-d
• JS Format (date-fns) - yyyy-MM-dd
• User Format (which is displayed for placeholder) - yyyy-mm-dd

Getting user configured date format in component

Date format is supplied from BE to FE via layout props. since the props are received at layout level (root node) regular components cannot access this props directly. for this purpose we utilise provide/inject pattern. Simply use the composable useDateFormat.ts (src/core/util/composable/useDateFormat.ts)

<template>
  <p>{{ jsDateFormat }} {{ userDateFormat }}</p>
</template>

<script>
import useDateFormat from "@/core/util/composable/useDateFormat";

export default {
  setup() {
    const { jsDateFormat, userDateFormat } = useDateFormat();

    return {
      jsDateFormat,
      userDateFormat,
    };
  },

  methods: {
    testMethod() {
      console.log(this.jsDateFormat);
      console.log(this.userDateFormat);
    },
  },
};
</script>

What's Locale and how you can get it in component

In some date formats the month name or day name will be visible to user. these names should be localised according to user's language preference. To allow for it we use Locale object. Locale object is date-fns implementation of localisation. Since we utilize date-fns to format date we need to pass this locale object to get the date localised while being formatted. To get the current locale object, simply use composable useLocale (src/core/util/composable/useLocale.ts)

<template>
  <p>{{ date }}</p> <!-- 11 août 2022 -->
</template>

<script>
import { formatDate } from "@/core/util/helper/datefns";
import useLocale from "@/core/util/composable/useLocale";

export default {
  setup() {
    const { locale } = useLocale();

    return {
      date: formatDate(new Date(), "dd MMMM yyyy", { locale }),
    };
  },
};
</script>

Supporting date format in date picker components.

To support date format in oxd-date-input component, you need to pass ioFormat, displayFormat and locale props to the component. To prevent this repetition please use date-input (src/core/components/inputs/DateInput.vue) component available in ohrm app which has been globally registered.

Supporting date format in card table.

In all tables where date format need to be shown, it must be formatted with user configured date format. To facilitate this we can utilise the normalizer function available.

<template>
  <oxd-card-table
    :items="items"
    :headers="headers"
    row-decorator="oxd-table-decorator-card"
  />
</template>

<script>
import { ref } from "vue";
import useLocale from "@/core/util/composable/useLocale";
import useDateFormat from "@/core/util/composable/useDateFormat";
import { formatDate, parseDate } from "@/core/util/helper/datefns";

export default {
  setup() {
    const { locale } = useLocale();
    const { jsDateFormat } = useDateFormat();

    const data = [
      { id: 1, date: "2022-05-01", leaveType: "Annual", leaveBalance: 10 },
      { id: 2, date: "2022-05-01", leaveType: "Casual", leaveBalance: 9 },
      { id: 3, date: "2022-05-01", leaveType: "Annual", leaveBalance: 8 },
    ];

    const headers = ref([
      { name: "date", title: "Date" },
      { name: "leaveType", title: "Leave Type" },
      { name: "leaveBalance", title: "Balance" },
    ]);

    const leaveNormalizer = (data) => {
      return data.map((item) => ({
        ...data,
        date: formatDate(parseDate(item.date), jsDateFormat, {
          locale,
        }),
      }));
    };

    const items = ref([...leaveNormalizer(data)]);

    return {
      items,
      headers,
    };
  },
};
</script>