Date picker (TDatePicker)

<t-datepicker
  v-model="date"
  placeholder="Select a date"
  date-format="Y-m-d"
  user-format="m/d/Y"
/>

{
  navigator: 'flex',
  navigatorViewButton: 'flex items-center',
  navigatorViewButtonIcon: 'flex-shrink-0 h-5 w-5',
  navigatorViewButtonBackIcon: 'flex-shrink-0 h-5 w-5',
  navigatorLabel: 'flex items-center py-1',
  navigatorPrevButtonIcon: 'h-6 w-6 inline-flex',
  navigatorNextButtonIcon: 'h-6 w-6 inline-flex',

  inputWrapper: 'relative',
  viewGroup: 'inline-flex',
  view: 'w-64',
  calendarDaysWrapper: 'grid grid-cols-7',
  calendarHeaderWrapper: 'grid grid-cols-7',
  monthWrapper: 'grid grid-cols-4',
  yearWrapper: 'grid grid-cols-4',

  clearButton: 'flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6',
  clearButtonIcon: 'fill-current h-3 w-3',
};

{
  // Dropdown related classes
  wrapper: 'inline-flex flex-col',
  dropdownWrapper: 'relative z-10',
  dropdown: 'origin-top-left absolute rounded-md shadow-lg',
  enterClass: '',
  enterActiveClass: 'transition ease-out duration-100 transform opacity-0 scale-95',
  enterToClass: 'transform opacity-100 scale-100',
  leaveClass: 'transition ease-in transform opacity-100 scale-100',
  leaveActiveClass: '',
  leaveToClass: 'transform opacity-0 scale-95 duration-75',

  // Wrapper for inline calendar
  inlineWrapper: '',

  // Text input related classes
  inputWrapper: '',
  input: 'form-input w-full',
  clearButton: 'hover:bg-gray-200 text-gray-500 rounded',
  clearButtonIcon: '',

  // Picker views
  viewGroup: 'bg-white border',
  view: '',

  // Navigator
  navigator: 'pt-2 px-2',
  navigatorViewButton: 'transition ease-in-out duration-100 inline-flex cursor-pointer rounded-full px-2 py-1 -ml-1 hover:bg-gray-200',
  navigatorViewButtonIcon: 'fill-current text-gray-500',
  navigatorViewButtonBackIcon: 'fill-current text-gray-500',
  navigatorViewButtonMonth: 'text-gray-700 font-semibold',
  navigatorViewButtonYear: 'text-gray-600 ml-1',
  navigatorViewButtonYearRange: 'text-gray-600 ml-1',
  navigatorLabel: 'py-1',
  navigatorLabelMonth: 'text-gray-700 font-semibold',
  navigatorLabelYear: 'text-gray-600 ml-1',
  navigatorPrevButton: 'transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 rounded-full p-1 ml-2 ml-auto disabled:opacity-25 disabled:cursor-not-allowed',
  navigatorNextButton: 'transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 rounded-full p-1 -mr-1 disabled:opacity-25 disabled:cursor-not-allowed',
  navigatorPrevButtonIcon: 'text-gray-500',
  navigatorNextButtonIcon: 'text-gray-500',

  // Calendar View
  calendarWrapper: 'p-2',
  calendarHeaderWrapper: '',
  calendarHeaderWeekDay: 'uppercase text-xs text-gray-600 w-8 h-8 flex items-center justify-center',
  calendarDaysWrapper: '',
  calendarDaysDayWrapper: 'w-full h-8 flex flex-shrink-0 items-center',

  // Day item
  otherMonthDay: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 text-gray-400 disabled:opacity-25 disabled:cursor-not-allowed',
  emptyDay: '',
  inRangeFirstDay: 'text-sm bg-blue-500 text-white w-full h-8 rounded-l-full',
  inRangeLastDay: 'text-sm bg-blue-500 text-white w-full h-8 rounded-r-full',
  inRangeDay: 'text-sm bg-blue-200 w-full h-8 disabled:opacity-25 disabled:cursor-not-allowed',
  selectedDay: 'text-sm rounded-full w-8 h-8 mx-auto bg-blue-500 text-white disabled:opacity-25 disabled:cursor-not-allowed',
  activeDay: 'text-sm rounded-full bg-blue-100 w-8 h-8 mx-auto disabled:opacity-25 disabled:cursor-not-allowed',
  highlightedDay: 'text-sm rounded-full bg-blue-200 w-8 h-8 mx-auto disabled:opacity-25 disabled:cursor-not-allowed',
  day: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-25 disabled:cursor-not-allowed',
  today: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-25 disabled:cursor-not-allowed border border-blue-500',

  // Months View
  monthWrapper: 'p-2',
  selectedMonth: 'text-sm rounded w-full h-12 mx-auto bg-blue-500 text-white',
  activeMonth: 'text-sm rounded w-full h-12 mx-auto bg-blue-100',
  month: 'text-sm rounded w-full h-12 mx-auto hover:bg-blue-100',

  // Years View
  yearWrapper: 'p-2',
  year: 'text-sm rounded w-full h-12 mx-auto hover:bg-blue-100',
  selectedYear: 'text-sm rounded w-full h-12 mx-auto bg-blue-500 text-white',
  activeYear: 'text-sm rounded w-full h-12 mx-auto bg-blue-100',

}

<t-datepicker
  v-model="date"
  inline
>
  <template
    slot="day"
    slot-scope="{ day, dayFormatted }"
  >
    <span v-if="birthdays.includes(day)">
      🎂
    </span>
    <span v-else-if="day.getDay() === 2">
      🌮
    </span>
    <span v-else>
      {{ dayFormatted }}
    </span>
  </template>
</t-datepicker>

<t-datepicker
  v-model="date"
  initial-view="month"
  inline
>
  <template
    slot="month"
    slot-scope="{ month, monthFormatted }"
  >
    <span v-if="month.getMonth() === 9">
      🎃
    </span>
    <span v-else>
      {{ monthFormatted }}
    </span>
  </template>
</t-datepicker>

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import Spanish from 'vue-tailwind/dist/l10n/es'

const settings = {
  // TInput: {...},
  // ...,
  TDatepicker: {
    // classes: {...},
    // fixedClasses: {...},
    locale: Spanish,
  }
}

Vue.use(VueTailwind, settings)

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

import English from 'vue-tailwind/dist/l10n/index'
import Spanish from 'vue-tailwind/dist/l10n/es'
import Mandarin from 'vue-tailwind/dist/l10n/zh'
import Japanese from 'vue-tailwind/dist/l10n/ja'
import French from 'vue-tailwind/dist/l10n/fr'

const settings = {
  // TInput: {...},
  // ...,
  TDatepicker: {
    // classes: {...},
    // fixedClasses: {...},
    locales: {
      en:  English,
      es:  Spanish,
      zh:  Mandarin,
      ja:  Japanese,
      fr:  French,
    },
    // Optionally define the default language
    lang: 'es'
  }
}

Vue.use(VueTailwind, settings)

<t-datepicker lang="fr" />

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const customLocale = {
  weekdays: {
    shorthand: ["S😴", "M😭", "T😑", "W😶", "T😔", "F😎", "S😵"],    
  },
}

const settings = {
  // TInput: {...},
  // ...,
  TDatepicker: {
    // classes: {...},
    // fixedClasses: {...},
    locale: customLocale,
  }
}

Vue.use(VueTailwind, settings)

{
    dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z
}

<template>
  <t-datepicker
    v-model="date"
    :date-formatter="dateFormatter"
    :date-parser="dateParser"
    date-format="YYYY-MM-DD"
    user-format="LLLL"
  />
</template>

<script>
import moment from 'moment'

export default {
  data () {
    return {
      date: '1987-03-18'
    }
  },
  methods: {
    dateFormatter (date, format) {
      return moment(date).format(format)
    },
    dateParser (date, format) {
      return moment(date, format).toDate()
    }
  }
}
</script>

<template>
  <t-datepicker
    v-model="date"
    inline
    :disabled-dates="disabledDates"
  />
</template>

<script>
export default {
  data () {
    return {
      date: '1987-03-18',
      disabledDates: [
        // A formatted date
        '1987-03-19',
        // A date object ('1987-03-25',)
        new Date(1987, 4, 25),
        // Disable mondays
        function (date) {
          return date.getDay() === 1
        }
      ]
    }
  }

}
</script>

<template>
  <t-datepicker
    v-model="date"
    inline
    :highlight-dates="highlightDates"
  />
</template>

<script>
export default {
  data () {
    return {
      date: '1987-03-18',
      highlightDates: [
        // A formatted date
        '1987-03-19',
        // A date object ('1987-03-25',)
        new Date(1987, 4, 25),
        // Disable mondays
        function (date) {
          return date.getDay() === 1
        }
      ]
    }
  }

}
</script>