@eneropl/vue-date-picker v1.0.4

Содержание

1. Вступление
2. Установка и использование
3. О передаваемых параметрах
4. Список передаваемых параметров

Демонстрация

Чтобы визуально ознакомиться с данным пакетом перейтиде по ссылке

Пожалуй, вместо возможностей, стоит перейти сразу к сути, так что топаем читать следующие главы :3

// npm
npm install @eneropl/vue-date-picker

Затем, чтобы добавить компонент в свой файл, используйте следующий код:

// index.js
<template>
  <vue-date-picker />
</template>

<script>
  import VueDatePicker from 'v-calendar';
  export default {
    components: { VueDatePicker }
    ...
  }
</script>

1. @set-date$emit - событие для получения данных компонента при изменении значений.
2. @search$emit - если вы не трогали <template #footer>, значит это событие будет по умолчанию. Оно выполняется в случае нажатии кнопки "Подтвердить" пользователем.

ATTENTION!параметры, переданные в события идентичны. Они имеют формат:

{
  date: String | Array | Number,
  time: String | Array | Number
}

// index.vue
<vue-date-picker
  :input-icon-styles={ width: 10px }
  :input-icon-classes="isSomethink && 'calendar--bruh'"
/>

// index.vue
<vue-date-picker
  :return-format="'MM-DD'" // "Месяц-День"
/>
<v-date-picker
  range
  :return-format="'MM-DD'" // ["Месяц-День", "Месяц-День"]
/>

// index.vue
<vue-date-picker
  return-timestamp
/>
<vue-date-picker
  range
  :return-format="'MM-DD'" // Будет проигнорирован
  return-timestamp // [timestamp, timestamp]
/>

// index.vue
<vue-date-picker
  range
/>

// index.vue
<vue-date-picker
  :range-separator="'-'" // В форме input "Дата - Дата"
/>
<vue-date-picker
  :range-separator="'+'" // В форме input "Дата + Дата"
/>

// index.vue
<vue-date-picker
  time-control
/>

// index.vue
<vue-date-picker
  time-range-control
/>

// Числовой ограничитель для параметров disable-range-*
{
  range: 10 // Значение, даже хз что написать ещё, итак всё понятно
  rangeOf: String
  // Допустимые значения 'days', 'months', 'years',  в ином случае будет выдана ошибка,
  // а параметр будет проигнорирован
}

// Типовой ограничитель
data() {
  return {
    disableByType: String
    // Допустимые значения:
    'another-months' - запрет на взаимодействие с датами других месяцев в текущем отображаемом месяце
    'days-off' - запрет на взаимодействие с выходными днями
  }
}

// Точечный ограничитель
data() {
  return {
    disableByType: Array
    // Допустимые значения - массив дат из moment(), чтобы их можно было преобразовать без проблем.
  }
}

// index.vue
<vue-date-picker
  :disable-range="disableRange"
/>
...
data() {
  return {
    disableRange: {
      range: 10,
      rangeOf: 'days'
    }
  }
}
...

Иной формат объекта будет проигнорирован. Свойство range выступает в роли значения для формата rangeOf - типа времени, который будет ограничивать диапазон. Например, в примере выше, диапазон будет допускать выбор текущий день, а также 10 дней, предшествующих или последующих относительно текущего дня.

// index.vue
<vue-date-picker
  :disable-range="disableRange"
/>
...
data() {
  return {
    disableRange: {
      range: 1,
      rangeOf: 'months'
    }
  }
}
...

// index.vue
<vue-date-picker
  :disable-range="disableRange"
/>
...
data() {
  return {
    disableRange: {
      range: 1,
      rangeOf: 'years'
    }
  }
}
...

// index.vue
<vue-date-picker
  :disable-range="disableByType"
/>
...
data() {
  return {
    disableByType: 'day-off'
  }
}
...

// index.vue
<vue-date-picker
  :disable-dates="disableDates"
/>
...
data() {
  return {
    disableDates: [169000000, 1691323000, '2021-08-12', '04-15']
  }
}
...

{
  date: String | Array,
  time: String | Array
}

Типы указанных данных имеют зависимость от пропсов range для диапазона дат и time-range-control для диапазона времени. Если передаваемые параметры противоречат зависимостям, будет выбираться 1-ый элемент массива для простого календаря, в то время как для диапазона будет формироваться дата и время с диапазоном в +1 день\час.