Date Picker

Date pickers let the user select a date.

Import

import { MpDatePicker } from '@mekari/pixel3'

Playground

API

MpDatePicker

Props

Events

Slots

Name	Type	Default
id Id of date picker.	string	-
model-value The controlled value of the DatePicker. Should be binded-with with v-model.	Date | Date[] | string | string[] | number | number[]	-
type Type of date picker.	date | month | year | week | biweek	date
value-type Value type of date picker.	date | string | timestamp	date
format Format of date picker.	string	-
range-separator Range separator of date picker range.	string	-
placeholder Placeholder of date picker.	string	-
error-message Error message of date picker.	string	Format tanggal/waktu salah
disabled-message Disabled Message of date picker.	string	-
lang Override locales of date picker.	{}	-
input-attr Input attributes of date picker.	{}	-
content-attr Popover content attributes of date picker.	{}	-
hour-step Hour step of time picker.	number	1
minute-step Minute step of time picker.	number	1
second-step Second step of time picker.	number	1
is-range If true, Date Picker will be range.	boolean	false
is-read-only If true, Date Picker will be read only.	boolean	false
is-disabled If true, Date Picker will be disabled.	boolean	false
is-clearable If true, allow to remove input content with clear icon.	boolean	true
is-invalid If true, show error on date picker input.	boolean	false
use-portal If true, popover content is rendered with portal.	boolean	false
is-inline If true, date picker will be rendered inline.	boolean	false
is-not-clickable If true, calendar panel is not clickable.	boolean	false
is-sisable-header If true, datepicker header is not clickable.	boolean	false
is-show-shortcut If true, will show shortcut for Today, This Month, and This Year.	boolean	false
is-show-hour If true, will show hour in time picker.	boolean	true
is-show-minute If true, will show minute in time picker.	boolean	true
is-show-second If true, will show second in time picker.	boolean	true
is-use-12h If true, will use 12h in time picker.	boolean	false
disabled-date Function for handling disabled date	(date: Date) => boolean	() => {}
disabled-month Function for handling disabled month	(month: number, year: number) => boolean	() => {}
disable-year Function for handling disabled year	(year: number) => boolean	() => {}
disabled-time Function for handling disabled time	(date: Date) => boolean	() => {}

Basic

Type

TimePicker

Disabled Date

Range

Override Locale

You can override some of default locale with lang prop.

{
    // the locale of formatting and parsing function
    formatLocale: {
        // MMMM
        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        // MMM
        monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        // dddd
        weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        // ddd
        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        // dd
        weekdaysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        // first day of week
        firstDayOfWeek: 0,
        // first week contains January 1st.
        firstWeekContainsDate: 1,
        // format 'a', 'A'
        meridiem: (h: number, _: number, isLowercase: boolean) {
            const word = h < 12 ? 'AM' : 'PM';
            return isLowercase ? word.toLocaleLowerCase() : word;
        },
        // parse ampm
        meridiemParse: /[ap].?m?.?/i,
        // parse ampm
        isPM: (input: string) {
            return input.toLowerCase().charAt(0) === 'p';
        }
    },
    // the calendar header, default formatLocale.weekdaysMin
    days: [],
    // the calendar months, default formatLocale.monthsShort
    months: [],
    // the calendar title of year
    yearFormat: 'YYYY 年',
    // the calendar title of month
    monthFormat: 'MMM',
    // the calendar title of month before year
    monthBeforeYear: false,
    todayText: 'Today',
    thisMonthText: 'This Month',
    thisYearText: 'This Year'
}

Advance