Datetime picker (TDatePicker)

{
  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 flex-wrap',
  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',
};

{
  wrapper: 'flex flex-col',
  dropdownWrapper: 'relative z-10',

  // Dropdown related classes
  dropdown: 'origin-top-left absolute rounded shadow bg-white overflow-hidden mt-1',
  enterClass: 'opacity-0 scale-95',
  enterActiveClass: 'transition transform ease-out duration-100',
  enterToClass: 'opacity-100 scale-100',
  leaveClass: 'opacity-100 scale-100',
  leaveActiveClass: 'transition transform ease-in duration-75',
  leaveToClass: 'opacity-0 scale-95',

  // Wrapper for inline calendar
  inlineWrapper: '',
  inlineViews: 'rounded bg-white border mt-1 inline-flex flex-col',

  // Text input related classes
  inputWrapper: '',
  input: 'block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
  clearButton: 'hover:bg-gray-100 rounded transition duration-100 ease-in-out text-gray-600',
  clearButtonIcon: '',

  // Picker views
  viewGroup: '',
  view: '',

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

  // Calendar View
  calendarWrapper: 'px-3 py-2',
  calendarHeaderWrapper: '',
  calendarHeaderWeekDay: 'uppercase text-xs text-gray-500 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-50 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-50 disabled:cursor-not-allowed',
  selectedDay: 'text-sm rounded-full w-8 h-8 mx-auto bg-blue-500 text-white disabled:opacity-50 disabled:cursor-not-allowed',
  activeDay: 'text-sm rounded-full bg-blue-100 w-8 h-8 mx-auto disabled:opacity-50 disabled:cursor-not-allowed',
  highlightedDay: 'text-sm rounded-full bg-blue-200 w-8 h-8 mx-auto disabled:opacity-50 disabled:cursor-not-allowed',
  day: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed',
  today: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed border border-blue-500',

  // Months View
  monthWrapper: 'px-3 py-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: 'px-3 py-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',

  // Time selector *Since 2.2*
  timepickerWrapper: 'flex items-center px-4 py-2 space-x-2',
  timepickerTimeWrapper: 'flex items-center space-x-2',
  timepickerTimeFieldsWrapper: 'bg-gray-100 rounded-md w-full text-right flex items-center border border-gray-100 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
  timepickerOkButton: 'text-blue-600 text-sm uppercase font-semibold transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded cursor-pointer',
  timepickerInput: 'text-center w-8 border-transparent bg-transparent p-0 h-6 text-sm transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded',
  timepickerTimeLabel: 'flex-grow text-sm text-gray-500',
  timepickerAmPmWrapper: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out bg-gray-100 border border-transparent rounded cursor-pointer focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
  timepickerAmPmWrapperChecked: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out bg-gray-100 border border-transparent rounded cursor-pointer focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
  timepickerAmPmWrapperDisabled: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out opacity-50 cursor-not-allowed',
  timepickerAmPmWrapperCheckedDisabled: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out opacity-50 cursor-not-allowed',
  timepickerAmPmButton: 'absolute flex items-center justify-center w-6 h-6 text-xs text-gray-800 transition duration-200 ease-in-out transform translate-x-0 bg-white rounded shadow',
  timepickerAmPmButtonChecked: 'absolute flex items-center justify-center w-6 h-6 text-xs text-gray-800 transition duration-200 ease-in-out transform translate-x-full bg-white rounded shadow',
  timepickerAmPmCheckedPlaceholder: 'flex items-center justify-center w-6 h-6 text-xs text-gray-500 rounded-sm',
  timepickerAmPmUncheckedPlaceholder: 'flex items-center justify-center w-6 h-6 text-xs text-gray-500 rounded-sm',
}

<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 TDatepicker from 'vue-tailwind/dist/t-datepicker'
import Spanish from 'vue-tailwind/dist/l10n/es'

const settings = {
  // ...,
  't-datepicker': {
    component: TDatepicker,
    props: {
      // classes: {...},
      // fixedClasses: {...},
      locale: Spanish,
    }    
  }
}

Vue.use(VueTailwind, settings)

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

import TDatepicker from 'vue-tailwind/dist/t-datepicker'

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 = {
  // ...,
  't-datepicker': {
    component: TDatepicker,
    props: {
      // 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'
import TDatepicker from 'vue-tailwind/dist/t-datepicker'

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

const settings = {
  // ...,
  't-datepicker': {
    component: TDatepicker,
    props: {
      // 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>

<t-datepicker timepicker />

<t-datepicker
  timepicker
  am-pm
/>

<t-datepicker
  timepicker
  show-seconds
/>

<t-datepicker
  timepicker
  initial-time="09:00"
/>

<t-datepicker
  value="09:30:15 AM"
  user-format="G:i:S K"
  date-format="G:i:S K"
  timepicker
  :datepicker="false"
/>