Datepicker

Basic usage with placeholder

<mu-datepicker 
    v-model="dateValue" 
    placeholder="Select date"
/>
1
2
3
4
export default {
    data() {
        return {
            dateValue: ''
        }
    }
};
1
2
3
4
5
6
7

In select language

RU
EN
ES
<div>
    <b>RU</b>
    <mu-datepicker 
        v-model="dateValue" 
        language="ru" 
        placeholder="Выберите дату" 
    />

    <b>EN</b>
    <mu-datepicker 
        v-model="dateValue" 
        language="en" 
        placeholder="Select date" 
    />

    <b>ES</b>
    <mu-datepicker 
        v-model="dateValue" 
        language="es" 
        placeholder="Seleccione una fecha" 
    />
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default {
    data() {
        return {
            dateValue: ''
        }
    }
};
1
2
3
4
5
6
7

With button of clearing of value

<mu-datepicker 
    v-model="dateValue" 
    :clear-button="true"
/>
1
2
3
4
export default {
    data() {
        return {
            dateValue: ''
        }
    },
};
1
2
3
4
5
6
7

With today's date selection button

<mu-datepicker 
    v-model="dateValue" 
    :today-button="true"
/>
1
2
3
4
export default {
    data() {
        return {
            dateValue: ''
        }
    }
};
1
2
3
4
5
6
7

With disable days

You can select the days of the week that are not allowed for selection.

<mu-datepicker 
    v-model="dateValue" 
    language="en" 
    :disable-days="disableDays" 
/>
1
2
3
4
5
export default {
    data() {
        return {
            dateValue: '',
            disableDays: [5,6]
        }
    }
};
1
2
3
4
5
6
7
8

With default date

<mu-datepicker 
    v-model="dateValue" 
    language="en" 
    :default-date="defaultDate"
/>
1
2
3
4
5
export default {
    data() {
        return {
            dateValue: '',
            defaultDate: new Date('05/09/2018')
        }
    }
};
1
2
3
4
5
6
7
8

With min and max date

<mu-datepicker 
    v-model="dateValue" 
    :min-date="minDate" 
    :max-date="maxDate"
/>
1
2
3
4
5
export default {
    data() {
        return {
            dateValue: '',
            minDate: new Date('10/03/2017'),
            maxDate: new Date('08/07/2019'),
        }
    }
};
1
2
3
4
5
6
7
8
9

With range

<mu-datepicker 
    v-model="dateValue" 
    :range="true"
/>
1
2
3
4
export default {
    data() {
        return {
            dateValue: ''
        }
    }
};
1
2
3
4
5
6
7

With range limit

You can set a limit between the selected dates. If the range between the selected dates exceeds the range limit, the dates are reset to the current date and minus the range limit days.

You also need to have been transferred to the props range. You can specify an event to be executed if the range limit is exceeded.

<mu-datepicker 
    v-model="dateValue" 
    :range="true" 
    :range-step="rangeStep" 
    @rangelimit="rangeLimitMethod"
/>

export default {
    data() {
        return {
            dateValue: '',
            rangeStep: 30
        }
    },
    methods: {
        rangeLimitMethod() {
            alert('Date range has been exceeded!');
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

With Date output in the language format

You can choose to display the date in the default format(dd.mm.yy) or in the format of the transferred language

Language formats: ru: dd.mm.yyyy, en: mm/dd/yyyy, es: dd/mm/yyyy

RU
EN
ES
<div>
        <b>RU</b>
        <mu-datepicker 
            v-model="dateValue" 
            language="ru" 
            :lang-format="true" 
            placeholder="dd.mm.yyy"
        />

        <b>EN</b>
        <mu-datepicker 
            v-model="dateValue" 
            language="en" 
            :lang-format="true" 
            placeholder="mm/dd/yyyy"
        />

        <b>ES</b>
        <mu-datepicker 
            v-model="dateValue" 
            language="es" 
            :lang-format="true" 
            placeholder="dd/mm/yyyy"
        />
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default {
    data() {
        return {
            dateValue: ''
        }
    }
};
1
2
3
4
5
6
7

With handle submit

Correct format for handle submit:

dd.mm.yy(langFormat: false)

dd.mm.yyyy - language: 'ru', mm.dd.yyyy - language: 'en', dd.mm.yyyy - language: 'es' (langFormat: true)

<mu-datepicker 
    v-model="dateValue" 
    :readonly="false"
/>
1
2
3
4
export default {
    data() {
        return {
            dateValue: '',

        }
    }
};
1
2
3
4
5
6
7
8

TIP

if you enter the date of the wrong format, the date will be deleted and set default date

With default date, min and max date, handle submit, disable days, range, clear and today buttons

<mu-datepicker 
    v-model="dateValue" 
    :readonly="false" 
    :default-date="defaultDate" 
    :min-date="minDate" 
    :max-date="maxDate" 
    :disable-days="disableDays" 
    :range="true" 
    :clear-button="true" 
    :today-button="true"
/>
1
2
3
4
5
6
7
8
9
10
11
export default {
    data() {
        return {
            dateValue: '',
            disableDays: [6],
            minDate: new Date('04/03/2015'),
            maxDate: new Date('02/07/2019'),
            defaultDate: new Date('05/02/2018'),
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11

TIP

If the entered date does not match the valid minimum and maximum date or if you entered an invalid range, will be set default date

Attributes

Attribute Description Type Accepted Values Default
placeholder Input placeholder String any empty string
language Language for translates String 'ru'/'en'/'es' 'en'
readonly Possibility to enter the date manually Boolean true/false true
clearButton Presence of button of clearing of value Boolean true / false false
todayButton Presence of today's date selection button Boolean true / false false
defaultDate Default start date Date any new date none
defaultDateRange Default end date Date any new date none
minDate Allowed minimum date Date any new date new Date('01/01/1900')
maxDate Allowed maximum date Date any new date new Date('01/01/2099')
range Choice of date range Boolean true / false false
langFormat Date output in the language format Boolean true / false false
disableDays Days of the week that can not be selected Array Array of numbers from 0 to 6 empty array
rangeStep The limit between the selected dates Number any number null

Events

Attribute Description Type Accepted Values Default
rangeLimit Triggered when the limit is exceeded Function any Function empty