Datetime picker (TDatePicker)

VueJs reactive date-time picker component with multiple features, configurable classes and variants, and most common events. Friendly with utility-first frameworks like TailwindCSS.

Playground:


Props

PropertyTypeDefault valueDescription
value (v-model)[Date, String, Number, Array]nullThe current value of the component
idStringundefinedid attribute of the text input that shows the user friendly date
disabledBooleanundefineddisabled attribute of the text input that shows the user friendly date
nameStringundefinedname attribute of the hidden input that contains the formatted date
readonlyBooleanundefinedreadonly attribute of the text input that shows the user friendly date
autofocusBooleanundefinedautofocus attribute of the text input that shows the user friendly date
requiredBooleanundefinedrequired attribute of the text input that shows the user friendly date
tabindex[String, Number]undefinedtabindex attribute of the text input that shows the user friendly date
placeholderStringundefinedPlaceholder for the text input that contains the user friendly date
inputNameStringundefinedName attribute for the text input that contains the user friendly date. (The name prop is used for the hidden input)
weekStartNumber0First day of the week show in the calendar, 0 = Sunday
monthsPerViewNumber1How many months the calendar show show per view (see Multiple months per view)
langStringenDefault language used in the component
localeObject{...}Object that define the localization (see Localization)
localesObject{}Object with the different languages objects available (see Formatting tokens)
dateFormatString'Y-m-d'Formatted date added to the hidden input and to the v-model value
userFormatString'F j, Y'User friendly format that is shown in the text input
dateFormatterFunctionundefinedAllows you to override the default date formatter function (see Custom date parse and format)
dateParserFunctionundefinedAllows you to override the default date parser function (see Custom date parse and format)
closeOnSelectBooleantrueIf set will close the date picker when a date is selected
showDaysForOtherMonthBooleantrueIf set will show the days for the prev/next button in the current calendar view
showBooleanfalseIf set will show the datepicker open when the component is loaded
inlineBooleanfalseIf set will show the datepicker opened
initialViewString'day'Initial view of the calendar (valid options: ''day'', 'month', 'year' )
yearsPerViewNumber12How many years will show in the year view
disabledDates[Date, Array, Function, String]undefinedDisable a single date string, a group or dates on an array or based in a function (see Disable dates)
highlightDates[Date, Array, Function, String]undefinedHighlight a single date string, a group or dates on an array or based in a function (see Highlight dates)
maxDate[Date, String]undefinedMax allowed date
minDate[Date, String]undefinedMin allowed date
initialDate[Date, String]undefinedInitial active date
initialTime ^2,2[Date, String]undefinedUseful to set an initial time without setting an initial date
conjunctionString','Used to join the dates values for multiple dates
multipleBooleanfalseWhen set it will create multiple hidden inputs with all the selected dates (see Multiple dates)
rangeBooleanfalseWhen set it will expect a range of dates to be selected (see Range)
clearableBooleantrueIf set will allow you to clear the date value
datepicker ^2,2BooleantrueIf set to false it will hide the date picker to show only the timepicker if set
timepicker ^2,2BooleanfalseIf set it will show a timepicker input
amPm ^2,2BooleanfalseIf set it will show the timepicker input with an AM/PM toggle, otherwise it will use 24 hours format
showSeconds ^2,2BooleanfalseIf set it will add an extra input to the timepicker so you can set the seconds

Classes and variants format

This component expects an object with classes named after every child element.

The properties in that object are the following:

PropertyDescription
wrapperWrapper for the component
inlineWrapperWrapper for the component when the inline options is set
inlineViewsWrapper for the views when the inline options is set
Dropdown related classes
dropdownWrapperDropdown wrapper
dropdownDropdown
enterClassTransition class
enterActiveClassTransition class
enterToClassTransition class
leaveClassTransition class
leaveActiveClassTransition class
leaveToClassTransition class
Text input related classes
inputWrapperInput wrapper
inputText input
clearButtonClear butotn
clearButtonIconClaer button icon
Picker views
viewGroupGroups all the views, for example when shows multiple months
viewA single view of the calendar
Navigator
navigatorDate navigator wrapper
navigatorViewButtonView toggler button
navigatorViewButtonIconView toggler button icon
navigatorViewButtonBackIconView toggler button back icon
navigatorViewButtonMonthView toggler month text
navigatorViewButtonYearView toggler year text
navigatorViewButtonYearRangeView toggler year range text
navigatorLabelLabel show instead of the button when have more that one month per view
navigatorLabelMonthLabel month text
navigatorLabelYearLabel year
navigatorPrevButtonNavigator prev button
navigatorNextButtonNavigator next button
navigatorPrevButtonIconNavigator prev button icon
navigatorNextButtonIconNavigator prev next icon
Calendar View
calendarWrapperCalendar wrapper
calendarHeaderWrapperCalendar header wrapper
calendarHeaderWeekDayCalendar header week day
calendarDaysWrapperCalendar days list wrapper
calendarDaysDayWrapperCalendar single day wrapper
Day item
otherMonthDayDay that is for another month
emptyDayHtml tag used as placeholder when we dont show other month days
inRangeFirstDayFirst day for ranges
inRangeLastDayLast day for ranges
inRangeDayDay inside a range
selectedDayDay selected
activeDayDay active (for keyboard navigation)
highlightedDayHighlighted day
dayDefault day
todayToday day
Months View
monthWrapperMonth list wrapper
selectedMonthSelected month
activeMonthActive month (for keyboard navigation)
monthDefault month
Years View
yearWrapperYears list wrapper
yearDefault year
selectedYearSelected year
activeYearActive year
Timepicker Related ^2.2
timepickerWrapperDivs that wraps the entire timepicker section
timepickerTimeWrapperDiv that wraps the timepicker text inputs within the AM/PM toggle and the ok button
timepickerTimeFieldsWrapperDiv that wraps the timepicker text inputs
timepickerOkButtonTimepicker submit button
timepickerInputTimepicker hours/minutes and seconds text inputs
timepickerTimeLabel"Time" label
timepickerAmPmWrapperAM/PM Toggle wrapper
timepickerAmPmWrapperCheckedAM/PM Toggle wrapper when checked (PM selected)
timepickerAmPmWrapperDisabledAM/PM Toggle wrapper when disabled (currently unused state)
timepickerAmPmWrapperCheckedDisabledAM/PM Toggle wrapper when checked and disabled (currently unused state)
timepickerAmPmButtonAM/PM button
timepickerAmPmButtonCheckedAM/PM button when is selected
timepickerAmPmCheckedPlaceholder"AM" placeholder when PM is selected
timepickerAmPmUncheckedPlaceholder"PM" placeholder when AM is selected

Default fixed classes

As you may know, the fixed classes are merged with the different variants and default classes.

The default fixedClasses on this component are the ones you usually will need as a minimum to ensure this component works as expected.

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

Default classes

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

Events

EventArgumentsDescription
inputString (The current date formatted)Emitted every time the value of the v-model change
changeString (The current date formatted)Emitted every time the value of the v-model change
focusFocusEventEmitted when the text input inside the component is focused
blurFocusEventEmitted when the text input inside the component is blurred
keydownKeyboardEventEmitted when the user key down any key
hidden``Emitted when the dropdown is hidden
shown``Emitted when the dropdown is shown
update:showBooleanUsed to sync the show prop
active-changeDateEmitted when the active date change
user-date-changedStringEmitted when the user formatted date change

Scoped slots

Slotdescription
dayContent of a day button inside the calendar
monthContent of a month button inside the calendar
yearContent of a year button inside the calendar
clearButtonReplaces the SVG icon inside the button to clear the input

Day scoped slot

The day scoped slot include this information that may be useful for you when rendering the value

Propdescription
dayFormattedThe day formatted
isForAnotherMonthIf the day belongs to a different month that the one is active
isFirstDayOfRangeFor ranges: if the day is the first day of the range
isLastDayOfRangeFor ranges: if the day is the last day of the range
isInRangeFor ranges: if the day is part of the range
isSelectedIf the day is selected
isActiveIf the day is active (for keyboard navigation)
isHighlightedIf the day is highlighted
isTodayIf the day is today
dayThe Date object that represents the current
activeDateA Date object that represents the current active day
valueA Date object that represents the currently selected day

Example

Let`s show a cake when the day is in a hypothetical array of birthdays and a taco every Tuesday:

<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>
SunMonTueWedThuFriSat

Month scoped slot

The month scoped slot include this information that may be useful for you when rendering the value

Propdescription
monthFormattedThe month formatted
isSelectedIf the month is selected
isActiveIf the month is active (for keyboard navigation)
monthThe Date object that represents the current month
activeDateA Date object that represents the current active month
valueA Date object that represents the currently selected month

Example

Let's show a pumpkin in October:

<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>

Year scoped slot

The year scoped slot include this information that may be useful for you when rendering the value

Propdescription
yearFormattedThe year formatted
isSelectedIf the year is selected
isActiveIf the year is active (for keyboard navigation)
yearThe Date object that represents the current year
activeDateA Date object that represents the current active year
valueA Date object that represents the currently selected year

Clear icon scoped slit

Props in the clearButton slot

Propdescription
classNameOriginal clearButtonIcon class
formatedDateCurrent formatted date
userFormatedDateCurrent user formatted date
activeDateA Date object that represents the currently active date
valueA Date object that represents the currently selected date

Localization

Since the localization files of this component are based in the Flatpickr component dozens of locales are already available in the source code.

Add more locales

To keep the bundle size small only the English locale is loaded by default but adding more locales is very easy.

  1. Import the locale file from the vue-tailwind/dist/l10n/{localename} path.

  2. Add that locale object to the locale prop in the configuration settings for the TDatepicker:

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)

Multiple locales

If you need multiple locales you can use the locales prop of the date-picker, when using the component you can switch the active language by using the lang prop:

  1. Import all the locale files you need from the vue-tailwind/dist/l10n/{localename} path.

  2. Add those locales to the configuration settings when installing the library:

  3. Optionally define a default language.

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)

When using the component you can switch the language by using the lang prop.

<t-datepicker lang="fr" />

Custom localization

You can also define your own localization file, just use one of the ones available in the source code as a base and add it to your settings.

Since the custom localization files are merged to the default localization you just need to define the attributes you want to override.

Example:

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)
S😴M😭T😑W😶T😔F😎S😵
Notice that in the custom locale I am only defining one of the different attributes the locale files have. These attributes will be merged with the default localization file.

Formatting tokens

Credits to the guys behind the Flatpickr from where I mostly copied the code behind this formatting.

Each character in the table below can be used in dateFormat and userFormat options to achieve the format you need.

Date Formatting Tokens

CharacterDescriptionExample
dDay of the month, 2 digits with leading zeros01 to 31
DA textual representation of a dayMon through Sun
l (lowercase 'L')A full textual representation of the day of the weekSunday through Saturday
jDay of the month without leading zeros1 to 31
JDay of the month without leading zeros and ordinal suffix1st, 2nd, to 31st
wNumeric representation of the day of the week0 (for Sunday) through 6 (for Saturday)
WNumeric representation of the week0 (first week of the year) through 52 (last week of the year)
FA full textual representation of a monthJanuary through December
mNumeric representation of a month, with leading zero01 through 12
nNumeric representation of a month, without leading zeros1 through 12
MA short textual representation of a monthJan through Dec
UThe number of seconds since the Unix Epoch1413704993
yA two-digit representation of a year99 or 03
YA full numeric representation of a year, 4 digits1999 or 2003
ZISO Date format2017-03-04T01:23:43.000Z

Time Formatting Tokens

CharacterDescriptionExample
HHours (24 hours)00 to 23
hHours1 to 12
GHours, 2 digits with leading zeros1 to 12
iMinutes00 to 59
SSeconds, 2 digits00 to 59
sSeconds0, 1 to 59
KAM/PMAM or PM

Escaping Formatting Tokens

You may escape formatting tokens using \\.

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

Custom date parse and format

If you want to use your own date formatter / parser you can do it by using the dateFormatter and dateParser props. You don't need to use both, but you need to ensure that the formatted date works for the parsed date and vice versa.

Both props expect a function that receives the following parameters:

ParameterTypeDescription
dateObjDate or nullDate to be parsed or formatted
formatStringThe format defined in the props

Example

Consider the following example where we use the moment library to handle the dates:

<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>
Notice in the example above that the dateFormat prop and userFormat props are now using valid moment format strings

Disable dates

You can use the disableDates props to disable one date, many dates on an array, or based on a function.

The props accept the following formats:

FormatTypeDescription
Date stringStringDate formatted as a string (will be parsed according to the dateFormat from)
Date objectDateYou can pass a Date object directly
FunctionFunctionA function that receives the current date that is being validated
Array of dates and methodArrayAn array that includes all the methods above

Example

For the following example I am disabling dates with an array with all the valid formats:

<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>
SunMonTueWedThuFriSat

Highlight dates

You can use the highlightDates props to highlight one date, many dates on an array, or based on a function.

The props accept the following formats:

FormatTypeDescription
Date stringStringDate formatted as a string (will be parsed according to the dateFormat from)
Date objectDateYou can pass a Date object directly
FunctionFunctionA function that receives the current date that is being validated
Array of dates and methodArrayAn array that includes all the methods above

Example

For this example lets hightlight dates with an array with all the valid formats:

<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>
SunMonTueWedThuFriSat

Handle multiple dates

This component allows the user to select multiple dates if the v-model (or value) of the input has an array, it doesn't matter if the user sets the multiple prop.

When you use the multiple prop the difference is that it will render one hidden input per value, this especially useful for POST form submissions.

If you set multiple to false (default value) the hidden input will contain all the dates separated by a comma o whatever value set in the conjunction prop

Example

SunMonTueWedThuFriSat
[]

Ranges

The Datepicker is compatible with "range" values, when range is set, the value of the model will expect an array where the first element represents the "from" value, and the second one the "to" value.

Range Values

When the value of a component with the range setting changes, you should consider that the input value will be handled differently if the multiple prop is set or not:

This is how the component handles the value:

  • The v-model of the component will be an array with 2 formatted dates.
  • It will create a hidden input with the formatted dates separated by comma o whatever value used in the conjunction prop.
  • If the multiple prop is set, it will create two hidden inputs with both "from" and "to" values.
  • The text input will render the value with the user format separated with the rangeSeparator defined in the current localization settings.

Example

SunMonTueWedThuFriSat
-- to --

Multiple months per view

The Datepicker allows you to display multiple calendars per view by using the monthsPerView prop.

Example

SunMonTueWedThuFriSat
October2021
SunMonTueWedThuFriSat
November2021
SunMonTueWedThuFriSat

Timepicker

Since ^2.2

You can add a timepicker by setting the timepicker prop.

<t-datepicker timepicker />
SunMonTueWedThuFriSat
The timepicker is currently no compatible with the `range` and `multiple` options and you cannot disable specific times for the moment.

AM/PM Format

Use the amPm prop to show an AM/PM toggle:

<t-datepicker
  timepicker
  am-pm
/>
SunMonTueWedThuFriSat
:
Ok

Show Seconds

Use the showSeconds prop to show an extra input to set the seconds

<t-datepicker
  timepicker
  show-seconds
/>
SunMonTueWedThuFriSat
::
Ok

Set initial time

Use the initialTime prop to set an initial time for the timepicker without needed to set an initial date

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

Timepicker only

Set datepicker=false together with the timepicker option to show a timepicker only.

<t-datepicker
  value="09:30:15 AM"
  user-format="G:i:S K"
  date-format="G:i:S K"
  timepicker
  :datepicker="false"
/>
To show the time formated you should play with the `userFormat` and `dateFormat` props since the time is still treated as a date internally. See the example above.

Sign up for our newsletter

Stay up-to-date on news and updates about this project by email.

I will never spam or share your email under any circustance.