MazPicker

MazPicker is a standalone component for select dates and time. Provides range, date and time mode

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

TIP

This component use MazInput, so it inherits all his props

To use this component, you have to install the dayjs dependency

npm install dayjs

Basic Usage

Select date

-

-

SunMonTueWedThuFriSat

<MazPicker
  v-model="newDateValue"
  label="Select date"
/>

Documentation

• As for the input value, min-date, max-date or disabled-dates you must provide the same and a valid format of Dayjs

  • Simply date: The better format is YYYY-MM-DD - Example: "2022-03-02" (for range picker "{ start: '2022-03-02', end: '2022-03-28' }")
  • Date Time: The better format is YYYY-MM-DD HH:mm or YYYY-MM-DD h:mm a - Example: "2022-03-02 16:30" or "2022-03-02 04:30 pm"
  • Only Time: HH:mm, h:mm a, etc - Example: "16:30" or "4:30 pm"

• The returned value is formatted by days.format() function with the format provided

• This component uses MazInput, so it inherits its props:

  • Use label & placeholder props

Options

• time: To enable the time picker

• only-time: To only enable the time picker

• format: Will be used to parse the input date (v-model) and format the date emitted on output.

• locale: You can provide a local (example: fr-FR, en-US, de-DE, etc), otherwise the component will get the user locale from the browser language. If no browser locale is available, the component will fetch the local from https://ip2c.org/s (network needed). And lastly, if no browser is available from ip2c, the en-US locale is used.

• first-day-of-week (default: 0): should be a number - Example: For France, you should set :first-day-of-week="1" to have monday at the first day of week in calendar.

• inputDateStyle: To customize the date time format into the input - Must be a value of Intl.DateTimeFormatOptions - Default option: { dateStyle: 'full' }

• inputDateTransformer: (payload: { formattedDate?: string; value?: PickerValue; locale: string }) => string - To transform the value displayed into the input - Must return a string

• shortcut: With the shortcut property, you can specify a shortcut that's selected by default by passing its identifier.

• min-date & max-date: Must have the same format as model-value - the component will validate the dates automatically - Exemple: see example

• disabled-weekly : Days of the week which are disabled every week, in Array format with day index, Sunday as 0 and Saturday as 6: [0,4,6]

• disabled-dates : Provides an array of date string, the days in date picker will be disabled. Time will be taken for the time picker Ex: ['2022-02-02', '2022-02-22']

• disabled-hours : For time picker or date time picker, to globally disable hours, provide an Array format with hours value: [0, 1,..., 22, 23] (0 to 23)

• 12h format: To enable the Date Time Picker or Time Picker with the 12h format selection mode, you must add the property format with hh:mm a or hh:mm a, etc.

• minute-interval (default: 5): Is the interval between minutes in the Time picker

• double: Date Picker can have 2 calendar in the same row - useful in range mode.

• inline: see example

• auto-close: The picker will be automatically closed after the user has selected a value

Date Picker

v-model="2022-02-03"

Select date

2022

Thursday, February 3

SunMonTueWedThuFriSat

<template>
  <MazPicker
    v-model="dateValue"
    label="Select date"
    color="secondary"
  />
</template>

<script setup lang="ts">
  import MazPicker from 'maz-ui/components/MazPicker'
  import { ref } from 'vue'
  const dateValue = ref('2022-02-03')
</script>

Date Time Picker

24 format

v-model="2022-02-03 16:30"

Select date and time

2022

Thursday, February 3

16:30

SunMonTueWedThuFriSat

<template>
  <MazPicker
    v-model="dateTimeValue"
    format="YYYY-MM-DD HH:mm"
    label="Select date and time"
    color="secondary"
    time
  />
</template>

<script setup lang="ts">
  import MazPicker from 'maz-ui/components/MazPicker'
  import { ref } from 'vue'
  const dateTimeValue = ref('2022-02-03 16:30')
</script>

12 format

v-model="2022-02-03 04:30 pm"

Select date and time

2022

Thursday, February 3

4:30 PM

SunMonTueWedThuFriSat

<template>
  <MazPicker
    v-model="dateTime12Value"
    format="YYYY-MM-DD hh:mm a"
    label="Select date and time"
    color="secondary"
    time
  />
</template>

<script setup lang="ts">
  import MazPicker from 'maz-ui/components/MazPicker'
  import { ref } from 'vue'
  const dateTime12Value = ref('2022-02-03 04:30 pm')
</script>

Time Picker

24h format

v-model="2022-02-03 16:30"

Select time

16:30

<template>
  <MazPicker
    v-model="dateTimeValue"
    format="YYYY-MM-DD HH:mm"
    label="Select time"
    color="secondary"
    only-time
  />
</template>

<script setup lang="ts">
  import MazPicker from 'maz-ui/components/MazPicker'
  import { ref } from 'vue'
  const dateTimeValue = ref('2022-02-03 16:30')
</script>

12h format

v-model="2022-02-03 04:30 pm"

Select time

4:30 PM

<template>
  <MazPicker
    v-model="dateTime12Value"
    format="YYYY-MM-DD HH:mm a"
    label="Select time"
    color="secondary"
    only-time
  />
</template>

<script setup lang="ts">
  import MazPicker from 'maz-ui/components/MazPicker'
  import { ref } from 'vue'
  const dateTime12Value = ref('2022-02-03 04:30 pm')
</script>

Range Picker

To enable the range mode, you should provide an object like this { start: undefined, end: undefined } as initiale model-value

v-model="{
  "start": "2024-10-05",
  "end": "2024-11-22"
}"

Select periode

2024 - 2024

Saturday, October 5 - Friday, November 22

SunMonTueWedThuFriSat

SunMonTueWedThuFriSat

<template>
  <MazPicker
    v-model="rangeValues"
    label="Select periode"
    color="secondary"
    :min-date="minMaxDates.min"
    :max-date="minMaxDates.max"
    double
  />
</template>

<script setup lang="ts">
  import MazPicker from 'maz-ui/components/MazPicker'
  import { ref } from 'vue'

  const rangeValues = ref({
    start: '2022-02-03',
    end: '2022-02-28',
  })

  const minMaxDates = ref({
    min: '2022-05-05',
    max: '2022-06-20',
  })
</script>

Inline with custom shortcuts

Inputs

rangeValues (v-model): { "start": "2024-10-05", "end": "2024-11-22" }

min-date: 2024-10-03

max-date: 2024-11-24

2024 - 2024

Saturday, October 5 - Friday, November 22

SunMonTueWedThuFriSat

SunMonTueWedThuFriSat

<template>
  <MazPicker
    v-model="rangeValues"
    color="secondary"
    :min-date="minMaxDates.min"
    :max-date="minMaxDates.max"
    :shortcuts="shortcuts"
    inline
    double
  />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import MazPicker, { type  PickerShortcut } from 'maz-ui/components/MazPicker'

  const startDate = dayjs().subtract(1, 'month').set('date', 5)
  const endDate = dayjs().add(1, 'month').set('date', 25)

  const rangeValues = ref({ start: startDate.format('YYYY-MM-DD'), end: endDate.format('YYYY-MM-DD') })

  const minMaxDates = ref({
    min: startDate.subtract(2, 'days').format('YYYY-MM-DD'),
    max: endDate.add(2, 'days').format('YYYY-MM-DD'),
  })

  const shortcuts: PickerShortcut[] = [
    {
      label: 'Next month',
      identifier: 'nextMonth',
      value: {
        start: dayjs().add(1, 'month').set('date', 1).format('YYYY-MM-DD'),
        end: dayjs()
          .add(1, 'month')
          .set('date', dayjs().add(1, 'month').daysInMonth())
          .format('YYYY-MM-DD'),
      },
    }, {
      label: 'Last 3 days',
      identifier: 'last3Days',
      value: {
        start: dayjs().subtract(2, 'days').format('YYYY-MM-DD'),
        end: dayjs().format('YYYY-MM-DD'),
      },
    },
  ]
</script>

Using input-date-transformer

You can use the input-date-transformer prop to transform the value displayed into the input.

Select date

-

-

SunMonTueWedThuFriSat

<MazPicker
  v-model="newDateValue"
  label="Select date"
  :input-date-transformer="({ value }) => dayjs(value).format('YYYY/MM/DD')"
/>

Property shortcuts

Model

interface PickerShortcut {
  identifier: string // should be uniq
  label: string
  value: {
    start: string
    end: string
  }
}

type PickerShortcuts = PickerShortcut[]

Example

import { PickerShortcut } from 'maz-ui/components/MazPicker'

const shortcuts: PickerShortcut[] = [{
  label: 'Next month',
  identifier: 'nextMonth',
  value: {
    start: dayjs().add(1, 'month').set('date', 1).format('YYYY-MM-DD'),
    end: dayjs()
      .add(1, 'month')
      .set('date', dayjs().add(1, 'month').daysInMonth())
      .format('YYYY-MM-DD'),
  },
}]

View default shortcuts

const shortcuts = [
  {
    label: 'Last 7 days',
    identifier: 'last7Days',
    value: {
      start: dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
      end: dayjs().format('YYYY-MM-DD'),
    },
  },
  {
    label: 'Last 30 days',
    identifier: 'last30Days',
    value: {
      start: dayjs().subtract(29, 'day').format('YYYY-MM-DD'),
      end: dayjs().format('YYYY-MM-DD'),
    },
  },
  {
    label: 'This week',
    identifier: 'thisWeek',
    value: {
      start: dayjs().startOf('week').format('YYYY-MM-DD'),
      end: dayjs().endOf('week').format('YYYY-MM-DD'),
    },
  },
  {
    label: 'Last week',
    identifier: 'lastWeek',
    value: {
      start: dayjs()
        .subtract(1, 'week')
        .startOf('week')
        .format('YYYY-MM-DD'),
      end: dayjs().subtract(1, 'week').endOf('week').format('YYYY-MM-DD'),
    },
  },
  {
    label: 'This month',
    identifier: 'thisMonth',
    value: {
      start: dayjs().set('date', 1).format('YYYY-MM-DD'),
      end: dayjs()
        .set('date', dayjs().daysInMonth())
        .format('YYYY-MM-DD'),
    },
  },
  {
    label: 'This year',
    identifier: 'thisYear',
    value: {
      start: dayjs().startOf('year').format('YYYY-MM-DD'),
      end: dayjs().endOf('year').format('YYYY-MM-DD'),
    },
  },
  {
    label: 'Last year',
    identifier: 'lastYear',
    value: {
      start: dayjs()
        .subtract(1, 'year')
        .startOf('year')
        .format('YYYY-MM-DD'),
      end: dayjs().subtract(1, 'year').endOf('year').format('YYYY-MM-DD'),
    },
  },
]

Types

PickerValue

type PickerValue = string | undefined | { start: string; end: string }

Position

export type Position =
  | 'top'
  | 'top right'
  | 'top left'
  | 'bottom'
  | 'bottom right'
  | 'bottom left'
  | 'left'
  | 'right'

Props & Event

Props

Prop name	Description	Type	Values	Default
style	The style of the component	TSIndexedAccessType	-	undefined
class	The class of the component	TSIndexedAccessType	-	undefined
modelValue	The value of the component	PickerValue	-	undefined
format	The format of the date	string	-	'YYYY-MM-DD'
open	If true picker window will be open	boolean	-	false
label	The label of the input	string	-	undefined
placeholder	The placeholder of the input	string	-	undefined
inputDateStyle	The style of the input date	TSTypeReference	-	() => ({ dateStyle: 'full' })
inputDateTransformer	The transformer of the input date	TSFunctionType	-	undefined
locale	The locale of the component	string	-	undefined
noHeader	If true, the header will be hidden	boolean	-	false
disabled	If true, the component will be disabled	boolean	-	false
firstDayOfWeek	The first day of the week (between 0 and 6)	union	-	0
autoClose	If true, the picker will close after a date selection	boolean	-	false
customElementSelector	The selector of the custom element to trigger the picker	string	-	undefined
double	If true, the picker will be double	boolean	-	false
inline	If true, the picker will be inline	boolean	-	false
color	The color of the component	Color	-	'primary'
pickerPosition	The position of the picker	Position	-	undefined
time	If true, the picker has a time picker	boolean	-	false
onlyTime	If true, the picker will be a time picker	boolean	-	false
minuteInterval	The interval of the minutes	number	-	5
noUseBrowserLocale	If true, the browser locale will be used	boolean	-	false
noFetchLocal	If true, the browser locale will not be fetched	boolean	-	false
noShortcuts	If true, the shortcuts will be hidden	boolean	-	false
shortcuts	The shortcuts of the picker	Array	-	() => [ { label: 'Last 7 days', identifier: 'last7Days', value: { start: dayjs().subtract(6, 'day').format('YYYY-MM-DD'), end: dayjs().format('YYYY-MM-DD'), }, }, { label: 'Last 30 days', identifier: 'last30Days', value: { start: dayjs().subtract(29, 'day').format('YYYY-MM-DD'), end: dayjs().format('YYYY-MM-DD'), }, }, { label: 'This week', identifier: 'thisWeek', value: { start: dayjs().startOf('week').format('YYYY-MM-DD'), end: dayjs().endOf('week').format('YYYY-MM-DD'), }, }, { label: 'Last week', identifier: 'lastWeek', value: { start: dayjs().subtract(1, 'week').startOf('week').format('YYYY-MM-DD'), end: dayjs().subtract(1, 'week').endOf('week').format('YYYY-MM-DD'), }, }, { label: 'This month', identifier: 'thisMonth', value: { start: dayjs().set('date', 1).format('YYYY-MM-DD'), end: dayjs().set('date', dayjs().daysInMonth()).format('YYYY-MM-DD'), }, }, { label: 'This year', identifier: 'thisYear', value: { start: dayjs().startOf('year').format('YYYY-MM-DD'), end: dayjs().endOf('year').format('YYYY-MM-DD'), }, }, { label: 'Last year', identifier: 'lastYear', value: { start: dayjs().subtract(1, 'year').startOf('year').format('YYYY-MM-DD'), end: dayjs().subtract(1, 'year').endOf('year').format('YYYY-MM-DD'), }, }, ]
shortcut	The shortcut of the picker	string	-	undefined
minDate	The min date of the picker	string	-	undefined
maxDate	The max date of the picker	string	-	undefined
disabledWeekly	The disabled weekly days of the picker	Array	-	() => []
disabledDates	The disabled dates of the picker	Array	-	() => []
disabledHours	The disabled hours of the time picker	Array	-	() => []
block	The input will be displayed in full width	boolean	-

Events

Event name	Properties	Description
update:model-value
close