@mekari/mekari-ui-vue/src/components/DatePicker/stories/content/DatePickerFormat.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

import locale from '../../locale';

export default (additional = {}) => ({
  data: () => ({
    formatList: [
      'DD MMM YYYY',
      'DD MMMM YYYY',
      'DD/MM/YYYY',
      'YYYY-MM-DD',
      'dddd, DD MMMM YYYY',
    ],
  }),
  methods: {
    getFormat(language, format) {
      if (additional.isRangedDate) {
        return locale.dateFormatBuilder([new Date(), new Date()], language, format);
      }
      return locale.dateFormatBuilder(new Date(), language, format);
    },
    checkLanguage(format) {
      return locale.dateFormatBuilder(new Date(), 'id', format) === locale.dateFormatBuilder(new Date(), 'en', format);
    },
  },
  template: `
    <table class="table">
      <thead>
        <tr class="d-flex">
          <th class="col-4">
            <span>Date Format</span>
          </th>
          <th class="col-4 text-center">
            <span>Result in id</span>
          </th>
          <th class="col-4 text-center">
            <span>Result in en</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="d-flex" v-for="format in formatList">
          <td class="col-4">{{ format }}</td>
          <template v-if="checkLanguage(format)">
            <td class="col-8 text-center" colspan="2">{{ getFormat('id', format) }}</td>
          </template>
          <template v-else>
            <td class="col-4 text-center">{{ getFormat('id', format) }}</td>
            <td class="col-4 text-center">{{ getFormat('en', format) }}</td>
          </template>
        </tr>
      </tbody>
    </table>
  `,
});