nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.37k stars 852 forks source link

Can't change local globally #757

Open LG0012 opened 3 years ago

LG0012 commented 3 years ago

import VCalendar, { setupCalendar } from 'v-calendar';

setupCalendar({
    locale: 'lt',
    masks: {
        input: 'YYYY-MM-DD',
    },
});

Vue.use(VCalendar);

Also tried like this:

Vue.use(VCalendar, {
    locale: 'lt',
    masks: {
        input: 'YYYY-MM-DD',
    },
});

Mask option works perfectly, but local not. Any ideas why?

image

RufusK commented 3 years ago

I have the exact same problem. When I set locale in the component directly it works but not globally.

LG0012 commented 3 years ago

I found a workaround example:

import DatePicker from 'v-calendar/lib/components/date-picker.umd';

Vue.component('VDatePicker', {
    mixins: [DatePicker],
    props: {
        masks: {
            type: Object,
            default: () => ({
                L: 'YYYY-MM-DD',
                title: 'MMMM YYYY',
                weekdays: 'W',
                navMonths: 'MMM',
                input: ['YYYY-MM-DD', 'YYYY-MM-DD', 'YYYY-MM-DD'],
                dayPopover: 'WWW, MMM D, YYYY',
                data: ['YYYY-MM-DD'],
            }),
        },
        is24hr: {
            type: Boolean,
            default: () => true,
        },
        locale: {
            type: String,
            default: () => 'lt',
        },
        modelConfig: {
            type: Object,
            default: () => ({
                type: 'string',
                mask: 'YYYY-MM-DD',
            }),
        },
        attributes: {
            type: Array,
            default: () => [
                {
                    key: 'today',
                    highlight: {
                        style: {
                            'background-color': '#ffdb99',
                        },
                        contentStyle: {
                            color: '#000000',
                        },
                    },
                    dates: new Date(),
                },
            ],
        },
    },
});

I just overwrite default component props :/

dawid-kokoszka commented 3 years ago

same problem. Is there another solution to set global params like language?