AisDatepicker

Datepicker Component

Default behaviour

You can pass javascript date to vmodel. This date be the selected date on datepicker. You can also pass null or empty string if you don't want vmodel to bind any date.

You can also type date in input box in "yyyy-MM-dd" format

In javascript date object, month starts from 0-11. 0 being January and 11 being December

Selected Date: Thu Nov 12 2026 00:00:00 GMT-0600 (Central Standard Time)

<template>
  <div class="grid gap-8">
    <div>
      <AisDatepicker v-model="selectedDate"></AisDatepicker>
    </div>
    <div class="mt-4">
      Selected Date: <b>{{ selectedDate }}</b>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AisDatepicker } from '@ais-public/ais-components'
import { addDate } from "@/components/datepicker/examples/datepicker-example-util.js"
/*All below conditions are true */
// const today = new Date();
const selectedDate = ref(addDate(2))
// console.log(selectedDate.value)
// const selectedDate = ref(new Date());
// const selectedDate = ref(new Date(2022,1,9));
// const selectedDate = ref('2022-02-09');
// const selectedDate = ref(null);
// const selectedDate = ref('');
</script>

Props

exclude

This prop will accept an array of dates or an array of string ('yyyy-MM-dd') that you want to disable. You can also mix match date and string in an array and pass that array in exclude prop.

Selected Date:

<template>
  <div class="grid gap-8">
    <div>
      <AisDatepicker :exclude="exclude" v-model="selectedDate"></AisDatepicker>
    </div>
    <div>
      Selected Date: <b>{{ selectedDate }}</b>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AisDatepicker } from '@ais-public/ais-components'
import { addDate } from "@/components/datepicker/examples/datepicker-example-util.js"

const selectedDate = ref(null)
const d1 = new Date(new Date().getFullYear(), new Date().getMonth(), 8)
const d2 = new Date('2022-02-10')
const d3 = '2022-02-06'
const d4 = addDate(2)

const exclude = [d1, d2, d3, d4]
</script>

only

With this prop all dates are disabled and dates that are passed to this prop are visible.

This prop will accept an array of dates or an array of string ('yyyy-MM-dd') that you want to enable. You can also mix match date and string in an array and pass that array in only prop.

Selected Date:

<template>
  <div class="grid gap-8">
    <div>
      <AisDatepicker :only="only"  v-model="selectedDate"></AisDatepicker>
    </div>
    <div>
      Selected Date: <b>{{selectedDate}}</b>
    </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { AisDatepicker } from '@ais-public/ais-components'
import { addDate } from "@/components/datepicker/examples/datepicker-example-util.js"

const selectedDate = ref(null)
const d1 = new Date(new Date().getFullYear(), new Date().getMonth(), 8)
const d2 = new Date('2022-02-10')
const d3 = '2022-02-06'
const d4 = addDate(2)

const only = [d1, d2, d3, d4]
</script>

min and max

With min prop, you can disable all the dates prior to min prop date and with max prop you can disable all the dates after max prop date.

Both min and max prop accepts date as an input

Selected Date:

<template>
  <div class="grid gap-8">
    <div>
      <AisDatepicker :min="minDate" :max="maxDate" v-model="selectedDate"></AisDatepicker>
    </div>
    <div>
      Selected Date: <b>{{ selectedDate }}</b>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AisDatepicker } from '@ais-public/ais-components'

const selectedDate = ref(null)
const currentDate = new Date()
const minDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 15)
const maxDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 24)
</script>

disabled

<template>
  <div >
    <AisDatepicker disabled></AisDatepicker>
  </div>
</template>

<script setup>
import { AisDatepicker } from '@ais-public/ais-components'
</script>

invalid

<template>
  <div >
    <AisDatepicker invalid></AisDatepicker>
  </div>
</template>

<script setup>
  import { AisDatepicker } from '@ais-public/ais-components'
</script>

size

Allowed values are "sm ,md, lg". The default value is md.

smmdlg

<template>
  <div class="grid gap-8">
    <AisSelect
      :options="sizes"
      v-model="selectedSize"
    />
    <AisDatepicker
      v-model="selectedDate"
      :size="selectedSize"
    />
  </div>
</template>

<script setup>
  import { AisSelect } from '@ais-public/ais-components'
  import { ref } from 'vue'
  import { AisDatepicker } from '@ais-public/ais-components'

  const sizes = ['sm', 'md', 'lg']
  const selectedSize = ref('md')
  const selectedDate = ref(null)
</script>

variant

primarysecondarydefaultinfosuccesswarningdanger

primary Variant

<template>
  <div class="grid gap-4">
    <AisSelect
      :options="variants"
      v-model="selectedVariant"
    />
    <div class="flex justify-end">
      <AisBadge :variant="selectedVariant">{{selectedVariant}} Variant</AisBadge>
    </div>
    <AisDatepicker
      v-model="selectedDate"
      :variant="selectedVariant"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { addDate } from "@/components/datepicker/examples/datepicker-example-util.js"
  import { AisDatepicker } from '@ais-public/ais-components'
  import { AisSelect } from '@ais-public/ais-components'
  import { AisBadge } from '@ais-public/ais-components'

  const variants = [
    'primary', 'secondary', 'default',
    'info', 'success', 'warning', 'danger'
  ]

  const selectedVariant = ref('primary')
  const selectedDate = ref(addDate(2))
</script>

Events

@select

AisDatepicker emits the @select event when a date is selected. Choose a date below to see the event's payload.

selection:

<template>
  <div class="grid gap-8">
    <div>
      <AisDatepicker @select="getSelection" v-model="selectedDate"></AisDatepicker>
    </div>
    <div>
      selection:
    </div>
    <pre>
    {{ displayContextEvent }}
  </pre>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AisDatepicker } from '@ais-public/ais-components'
/*All below conditions are true */
const today = new Date()
const selectedDate = ref(null)
const displayContextEvent = ref(null)
// const selectedDate = ref('2022-02-06');
// const selectedDate = ref(new Date(2022,1,9));
// const selectedDate = ref('2022-02-09');
// const selectedDate = ref(null);
// const selectedDate = ref('');

const getSelection = (event) => {
  displayContextEvent.value = event
}
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
disabled	Boolean			Places component in a disabled state, when true	false
exclude	Array			Disable dates in exclude array	false
invalid	Boolean		false	Places component in an invalid state, when true	false
max	Date			Disable all the dates after to max date	false
min	Date			Disable all the dates prior to min date	false
modelValue	Date, String		""	v-model controls the visibility of the datepicker	false
only	Array			Disable all dates except dates available in only prop array	false
required	Boolean		false	Set component in required state and show astrick(*), when true	false
size	String		undefined	Set the size of the component's appearance Valid values: xs, sm, md, lg, xl	false
variant	String		'primary'	Applies one of the theme color variants to the component.	false

Events

Event	Arguments	Description
select	selectedOptions object - The selected option object(s)	Emitted when the selected values change
update:modelValue	modelValue union - The selected value(s)	Emitted when the selected values change