Day picker

The Day picker component is a calendar that allows users to choose a date by selecting one from a calendar UI.

Importing

For code splitting optimizations, Day picker is exported separately and must be imported as shown here:

import { CiDayPicker } from '@ci/stratus-components/build/day-picker'

Default Usage

By default, the Datepicker opens the current month and allows the user to select any date in the past or future.

Use v-model to pass in and watch changes to the data in ISO format (opens new window).

See the Form Field docs for more information about labeling, descriptions, placeholders, error state, success state and more.

<template>
  <ci-day-picker
    v-model="selectedDate"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
    }
  }
}
</script>

Display modes

Day picker has two modes week and month. By default week mode is set.

<template>
  <ci-day-picker
    v-model="selectedDate"
    mode="month"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedDate: ''
    }
  }
}
</script>

Fullwidth

Use the full-width prop to make the input fullwidth.

<template>
  <ci-day-picker
    v-model="selectedDate"
    fullwidth
  />
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
    }
  }
}
</script>

Valid Range

Use the valid-range prop to define a start and end date that the user can navigate to and select. You may specify one without specifying the other to create an open-ended range. See the Fullcalender docs (opens new window) for more information.

<template>
  <ci-day-picker
    v-model="selectedDate"
    :valid-range="{ start: new Date() }"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
    }
  }
}
</script>

Events

The DayPicker emits two events @update.

Event	Arguments	Description
@update	The selected date in ISO format	Emitted when a date is chosen