Vue Tailwind Datepicker

Appearance

Props ​

All available props, to setting up Vue Tailwind Datepicker.

Default Configuration ​

The datepicker if you don't set any props.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" />
</template>

Overlay ​

Using datepicker with backdrop, by default overlay is false.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" overlay />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" overlay />
</template>

Input classes ​

You can apply apply your own input classes using Tailwind CSS.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    input-classes="block mb-2 text-sm font-medium text-green-700 dark:text-green-500"
  />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    input-classes="block mb-2 text-sm font-medium text-green-700 dark:text-green-500"
  />
</template>

Disabled ​

The datepicker can be fully disabled as well.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :disabled="true" />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :disabled="true" />
</template>

Single Date ​

Using date picker as single date.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" as-single />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" as-single />
</template>

Use Range ​

Using date picker as single date, but datepicker with range.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" as-single use-range />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" as-single use-range />
</template>

Placeholder ​

Change placeholder, by default placeholder use formatter.date object.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" placeholder="My Placeholder" />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" placeholder="My Placeholder" />
</template>

Separator ​

Change placeholder, by default placeholder use formatter.date object.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" separator=" to " />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" separator=" to " />
</template>

Without Input ​

Display Datepicker only without input

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" no-input />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" no-input />
</template>

Formatter ​

Change formatter, default formatter:

js
  {
    date: 'YYYY-MM-DD HH:mm:ss',
    month: 'MMM'
  }
  {
    date: 'YYYY-MM-DD HH:mm:ss',
    month: 'MMM'
  }
vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
const formatter = ref({
  date: 'DD MMM YYYY',
  month: 'MMM',
})
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
const formatter = ref({
  date: 'DD MMM YYYY',
  month: 'MMM',
})
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" />
</template>

Auto apply ​

Change auto apply, by default autoApply is true.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :auto-apply="false" />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :auto-apply="false" />
</template>

Start from ​

Change start from of datepicker, by default startFrom is new Date().

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
const startFrom = new Date(2020, 0, 1)
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :start-from="startFrom" />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
const startFrom = new Date(2020, 0, 1)
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :start-from="startFrom" />
</template>

Weekdays size ​

If you need to use a minimum number of characters for the name of the days of the week (Sun -> Su, Mon -> Mo, etc.), use min, by default weekdaysSize is short (Sun, Mon, etc.).

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" weekdays-size="min" />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" weekdays-size="min" />
</template>

Week number ​

If you want to show week number in the calendar

Shortcuts ​

Display or not the dates shortcuts, default value is true.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :shortcuts="false" />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :shortcuts="false" />
</template>

Disable date ​

Disable some dates in range.

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
function dDate(date) {
  return date < new Date() || date > new Date(2023, 0, 8)
}
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :disable-date="dDate" />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
function dDate(date) {
  return date < new Date() || date > new Date(2023, 0, 8)
}
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" :disable-date="dDate" />
</template>

Slot ​

Two slot are available, a global one that surround the full input and a smaller one just for the icon in the input

Global slot ​

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <div class="flex">
    <vue-tailwind-datepicker
      v-slot="{ value, placeholder, clear }"
      v-model="dateValue"
    >
      <div class="flex">
        <div class="flex-1">
          <button
            type="button"
            class="block w-full bg-gray-50 text-gray-400 hover:text-gray-900 leading-6 py-3 sm:px-6 border border-gray-200 rounded-xl items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-300 focus:outline-none transition ease-out duration-300"
          >
            <span class="text-gray-900">
              {{ value || placeholder }}
            </span>
          </button>
        </div>
        <div class="flex-shrink-0">
          <button
            type="button"
            class="ml-4 block px-3 flex-none bg-indigo-50 text-indigo-400 hover:text-indigo-900 leading-6 py-3 sm:px-6 border border-indigo-200 rounded-xl items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-indigo-300 focus:outline-none transition ease-out duration-300"
            @click="clear"
          >
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </div>
    </vue-tailwind-datepicker>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
</script>

<template>
  <div class="flex">
    <vue-tailwind-datepicker
      v-slot="{ value, placeholder, clear }"
      v-model="dateValue"
    >
      <div class="flex">
        <div class="flex-1">
          <button
            type="button"
            class="block w-full bg-gray-50 text-gray-400 hover:text-gray-900 leading-6 py-3 sm:px-6 border border-gray-200 rounded-xl items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-300 focus:outline-none transition ease-out duration-300"
          >
            <span class="text-gray-900">
              {{ value || placeholder }}
            </span>
          </button>
        </div>
        <div class="flex-shrink-0">
          <button
            type="button"
            class="ml-4 block px-3 flex-none bg-indigo-50 text-indigo-400 hover:text-indigo-900 leading-6 py-3 sm:px-6 border border-indigo-200 rounded-xl items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-indigo-300 focus:outline-none transition ease-out duration-300"
            @click="clear"
          >
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </div>
    </vue-tailwind-datepicker>
  </div>
</template>

inputIcon slot ​

vue
  <VueTailwindDatePicker
    v-model="dateValue"
  >
    <template #inputIcon="{ value }">
      {{ value ? 'delete icon' : "calendar icon" }}
    </template>
  </VueTailwindDatePicker>
  <VueTailwindDatePicker
    v-model="dateValue"
  >
    <template #inputIcon="{ value }">
      {{ value ? 'delete icon' : "calendar icon" }}
    </template>
  </VueTailwindDatePicker>

Options ​

Change default options

vue
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
const options = ref({
  shortcuts: {
    today: 'Hari ini',
    yesterday: 'Kemarin',
    past: period => `${period} hari terakhir`,
    currentMonth: 'Bulan ini',
    pastMonth: 'Bulan lalu',
  },
  footer: {
    apply: 'Terapkan',
    cancel: 'Batal',
  },
})
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    :options="options"
    :auto-apply="false"
  />
</template>
<script setup>
import { ref } from 'vue'

const dateValue = ref([])
const options = ref({
  shortcuts: {
    today: 'Hari ini',
    yesterday: 'Kemarin',
    past: period => `${period} hari terakhir`,
    currentMonth: 'Bulan ini',
    pastMonth: 'Bulan lalu',
  },
  footer: {
    apply: 'Terapkan',
    cancel: 'Batal',
  },
})
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    :options="options"
    :auto-apply="false"
  />
</template>

Released under the MIT License.

Copyright © 2024 Alexandre Le Corre