Datepicker

The Datepicker component is an input that allows users to choose a date by typing or by selecting one from a calendar ui.

Importing

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

import { CiDatepicker } from '@ci/stratus-components/build/datepicker'

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-datepicker
    v-model="selectedDate"
    sublabel="Date"
    placeholder="Choose a date"
  />
</template>

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

Fullwidth

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

<template>
  <ci-datepicker
    v-model="selectedDate"
    sublabel="Date"
    placeholder="Choose a date"
    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-datepicker
    v-model="selectedDate"
    sublabel="Date"
    placeholder="Choose a future date"
    :valid-range="{ start: new Date() }"
  />
</template>

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

Events

The TimePicker emits two events @input and @update.

Event	Arguments	Description
@input	The value of the input	Emitted whenever an input is made
@update	The selected date in ISO format	Emitted when a date is chosen either through the input or UI

This demo shows how to use @input and @update events. Open your dev console to see the logs of the values emitted by these events.

<template>
  <div>
    selectedDate: <code>{{ selectedDate }}</code>
    <br><br>
    <ci-datepicker
      v-model="selectedDate"
      sublabel="Date"
      placeholder="Choose a date"
      @input="captureInput"
      @update="captureUpdate"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
    }
  },
  methods: {
    captureInput(val) {
      console.log(`input: ${val}`);
    },
    captureUpdate(val) {
      console.log(`update: ${val}`);
    }
  }
}
</script>