JinWen
Lunar-Date-Picker компонент, лёгкий, мощный, простой в использовании, с праздниками и солнечными терминами.
Новое в версии 2.0
Добавлена новая опция:
Исправлены ошибки.
Установка
npm install vue-jlunar-datepicker --save
.
Использование
main.js
import Vue from 'vue';
import JDatePicker from 'vue-jlunar-datepicker';
Vue.component("j-date-picker",JDatePicker);
test.vue
<template>
<j-date-picker v-model="value1"
:width="width1"
:placeholder="placeholder"
:picker-options="pickerOptions"
:rangeSeparator="rangeSeparator"
@change="onDateChange"
:disabled="disabled"
:showLunarClass="showLunarClass"
:showLunarControl="showLunarControl"
:type="type"
:showBackYears="showBackYears"
:showLunarIcon="showLunarIcon"
:format="format">
</j-date-picker>
</template>
<script>
export default{
data(){
return{
data:{
value1:'',
type:'DATE',
showLunarClass:'MIX',
showBackYears:2,
showLunarIcon:true,
showLunarControl:true,
width1:'300',
format:'YYYY.MM.DD',
placeholder:'please input something ...',
rangeSeparator:'-',
disabled:false,
editable:true,
clearable:true,
pickerOptions: {
disabledDate (time) {
return time.getTime() < Date.now() - 8.64e7;
}
}
}
}
}
</script>
Атрибуты
Свойства | Описание | Тип | Необязательное значение | Значение по умолчанию |
---|---|---|---|---|
value | Привязанное значение (v-модель) | Строка, дата, массив | — | — |
width | Ширина | Строка | — | 200px/200 |
type | Можно выбрать день или период времени | Строка | DATE/DATERANGE | DATE |
showLunarClass | Отображаемый тип лунной даты; нечувствителен к регистру | Строка | FULLLUNAR/LUNAR/NUMBER/MIX | NUMBER |
showLunarIcon | Показывать ли лунный значок | Логическое значение | true/false | false |
showBackYears | Количество лет после текущего года на основе текущего года | Число | — | 2 |
format | Формат даты | Строка | — | YYYY-MM-DD |
showLunarControl | Показывать ли управление лунным календарем по умолчанию | Логическое значение | true/false | true |
editable | Возможность ввода вашей даты в компонент | Логическое значение | true/false | false |
placeholder | Заполнитель для компонента | Строка | — | — |
clearable | Показывать ли кнопку очистки | Логическое значение | true/false | true |
disabled | Отключить этот компонент | Логическое значение | true/false | false |
rangeSeparator | Разделитель дат | Строка | — | - |
picker-options | См. ниже | Объект | — | {} |
picker-options
Свойства | Описание | Тип | Необязательное значение | Значение по умолчанию |
---|---|---|---|---|
disabledDate | Установить дату отключения. Параметр — текущая дата. Вы должны вернуть логическое значение. Например! | Функция | — | — |
Событие
Название события | Описание | Возвращаемое значение |
---|---|---|
change | Когда... | Входные изменения возвращают значение. |
Значение |
---|
GitHub |
https://github.com/tuhe32/vue-jLunar-datePicker |
|
| OSChina
https://gitee.com/tuhe32/vue-jLunar-datePicker |
Для подробного объяснения того, как всё работает, ознакомьтесь с гайдом и документацией по vue-loader.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )