@mekari/mekari-ui-vue/src/components/DatePicker/stories/DatePicker.stories.mdx

--- 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 { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import DatePickerIntroduction from './content/DatePickerIntroduction.mdx';
import DatePickerFormat from './content/DatePickerFormat.js';

import argTypesDefault  from './config';

import MDatePicker from '../index.vue';
import MDatePickerInput from '../components/DatePickerInput';
import { BFormInvalidFeedback } from 'bootstrap-vue';

<Meta title="Date Picker" component={MDatePicker} />

export const Template = (args) => ({
  props: Object.keys(argTypesDefault),
  data() {
    return {
      currentDate: null,
    }
  },
  template: `
    <m-date-picker
      v-model="currentDate"
      :language="language"
      :date-format="dateFormat"
      :state="state"
      :error-text="errorText"
      :hint-text="hintText"
      :clickable-readonly="clickableReadonly"
      :disabled="disabled"
      :label-text="labelText"
      :placeholder="placeholder"
      :clearable="clearable"
      :placement="placement"
      :offset-x="offsetX"
      :offset-y="offsetY"
      :disable-past-dates="disablePastDates"
    />
  `,
  components: { MDatePicker, MDatePickerInput },
});

export const ManualInput = (args) => ({
  props: Object.keys(argTypesDefault),
  data() {
    return {
      currentDate: null,
    }
  },
  template: `
    <m-date-picker
      v-model="currentDate"
      :language="language"
      :date-format="dateFormat"
      :state="state"
      :error-text="errorText"
      :hint-text="hintText"
      :clickable-readonly="clickableReadonly"
      :disabled="disabled"
      :label-text="labelText"
      :placeholder="placeholder"
      :clearable="clearable"
      :placement="placement"
      :offset-x="offsetX"
      :offset-y="offsetY"
      :disable-past-dates="disablePastDates"
      :readonly="false"
    />
  `,
  components: { MDatePicker, MDatePickerInput },
});

# Date Picker

<DatePickerIntroduction />

<Anchor storyId="date-picker--default-story"></Anchor>

## Example

<Canvas>
  <Story
    name="Default"
    argTypes={{ ...argTypesDefault }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Manual Input

<Canvas>
  <Story
    name="Manual Input"
    argTypes={{ ...argTypesDefault }}
  >
    {ManualInput.bind({})}
  </Story>
</Canvas>

## Frequently Used Date Format

<Story
  name="example-date-format"
  argTypes={{ ...argTypesDefault }}
>
  {DatePickerFormat.bind({})}
</Story>