# Examples

<template>
  <div>
    <v-md-date-range-picker></v-md-date-range-picker>
  </div>
</template>
<script>
export default {
}
</script>

<template>
  <div>
    <v-md-date-range-picker
      start-date="2019-01-01"
      end-date="2019-01-02"
    ></v-md-date-range-picker>
  </div>
</template>
<script>
export default {
}
</script>

<template>
  <div>
    <v-md-date-range-picker
      start-date="2019-01-01"
      end-date="2019-02-02"
    ></v-md-date-range-picker>
  </div>
</template>
<script>
export default {
}
</script>

<template>
  <div>
    <v-md-date-range-picker
      start-date="2019-01-01"
      end-date="2019-03-02"
    ></v-md-date-range-picker>
  </div>
</template>
<script>
export default {
}
</script>

<template>
  <div>
    <v-md-date-range-picker
      start-date="2019-01-01"
      end-date="2019-01-02"
      max-year="2030"
      min-year="2010"
      show-year-select
    ></v-md-date-range-picker>
  </div>
</template>
<script>
export default {
}
</script>

<template>
  <div>
    <v-md-date-range-picker
      start-date="2019-01-01"
      end-date="2019-01-02"
    ></v-md-date-range-picker>
  </div>
</template>
<script>
export default {
}
</script>

<template>
  <div>
    <v-md-date-range-picker
      start-date="2019-01-01"
      end-date="2019-01-02"
      :presets="presets"
    ></v-md-date-range-picker>
  </div>
</template>
<script>
  export default {
    data: () => ({
      presets: [
        {
          label: 'This Week',
        range: [
          moment().subtract(6, 'day'),
          moment()
        ]
      },
      {
        label: 'Last Week',
        range: [
          moment().subtract(13, 'day'),
          moment().subtract(7, 'day'),
        ]
      }
    ]
  })
}
</script>

<template>
  <div>
    <div class="demo-props-switch-wrapper">
      <span>showCustomRangeLabel: </span>
      <input type="checkbox" id="auto-apply-id" v-model="value">
      <label for="auto-apply-id">{{ value }}</label>
    </div>
    <v-md-date-range-picker
      start-date="2019-01-01"
      end-date="2019-01-02"
      :show-custom-range-label="value"
    ></v-md-date-range-picker>
  </div>
</template>
<script>
  export default {
    data: () => ({
      value: true,
    })
  }
</script>

<template>
  <div>
    <div class="demo-props-switch-wrapper">
      <span>autoApply</span>
      <input type="checkbox" id="auto-apply-id" v-model="value">
      <label for="auto-apply-id">{{ value }}</label>
    </div>
    <v-md-date-range-picker
      start-date="2019-01-01"
      end-date="2019-01-02"
      :auto-apply="value"
    ></v-md-date-range-picker>
  </div>
</template>
<script>
  export default {
    data: () => ({
      value: true,
    })
  }
</script>

<template>
  <div>
    <div class="demo-props-switch-wrapper">
      <span>Opens: </span>
      <select v-model="opens">
        <option disabled value="">Please select a item</option>
        <option>left</option>
        <option>center</option>
        <option>right</option>
      </select>
    </div>
    <v-md-date-range-picker
      :opens="opens"
      start-date="2019-01-01"
      end-date="2019-01-02"
    ></v-md-date-range-picker>
  </div>
</template>
<script>
export default {
  data: () => ({
    opens: 'left',
  })
}
</script>

<template>
  <div>
    <v-md-date-range-picker
      :opens="opens"
      start-date="2019-01-01"
      end-date="2019-01-02"
      @change="handleChange"
    ></v-md-date-range-picker>
    <div style="margin: 10px">
      values: {{values}}
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    values: [],
  }),
  methods: {
    handleChange (values) {
      console.log(values)
      this.values = values
    }
  }
}
</script>