@mekari/mekari-ui-vue/src/components/DatePickerRanged/stories/DatePickerRanged.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 DatePickerRangedIntroduction from './content/DatePickerRangedIntroduction.mdx';
import DatePickerFormat from '../../DatePicker/stories/content/DatePickerFormat.js';

import argTypesDefault  from './config';

import MDatePickerRanged from '../index.vue';
import { BFormInvalidFeedback } from 'bootstrap-vue';

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

export const Template = (args) => ({
  props: Object.keys(argTypesDefault),
  template: `
    <m-date-picker-ranged
      :value="value"
      :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: { MDatePickerRanged },
});

# Date Picker - Ranged

<DatePickerRangedIntroduction />

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

## Example

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

<ArgsTable story="Default" />

export const CustomInput = (args) => ({
  props: Object.keys(argTypesDefault),
  template: `
    <m-date-picker-ranged
      :value="value"
      :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"
      :use-custom-input="true"
    >
      <template #datePickerInputContainer="{ setShowDatePicker, evBlur, triggerId }">
        <button class="btn btn-primary" :id="triggerId" @click="setShowDatePicker(true)" @blur="evBlur">Trigger</button>
      </template>
    </m-date-picker-ranged>
  `,
  components: { MDatePickerRanged },
});

## Slot For Date Picker Activator
You can create any element to be the activator. To do so, you can use slot `datePickerInputContainer`, and uou nees to set props `useCustomInput` to `true`. Here is the usage of ranged date picker:

<Canvas>
  <Story
    name="Custom Input"
    argTypes={{ ...argTypesDefault }}parameters={{
      docs: {
        source: {
          code: `\`<template>${CustomInput.bind({})().template}</template>\``
        }
      }
     }}
  >
    {CustomInput.bind({})}
  </Story>
</Canvas>

## Frequently Used Date Format

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