VsFormDatepicker

Компонент VsDatepicker надає можливість вибору дати за допомогою текстового введення або випадаючого календаря.

Підключення

vue

<vs-form-datepicker v-model="selectedDate" />

hbs

{{{_vue "vs-form-datepicker"}}}

Component API

Style

Name	Description	Type
size	Розмір компоненту (mini, small, large)	String
clearable	Дозволяє очищати обрану дату за допомогою кнопки	Boolean

State

Name	Description	Type
disabled	Визначає, чи компонент вимкнений	Boolean

Events

Name	Description
@change	Викликається при зміні обраної дати
@input	Викликається при введенні або виборі нової дати

Приклади

Базове використання

Використовуйте компонент vs-form-datepicker для вибору дати.

  <template>
    <div class="flex gap-2 items-center w-full">
      <vs-form-datepicker  v-model="selectedDate" style="width: 50%" />
      <span class="w-1/2" style="width: 50%">{{ selectedDate || 'Дата не обрана' }}</span>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          selectedDate: '',
        };
      },
    };
  </script>
  

Очищення обраної дати

Дозволяє очищати обрану дату за допомогою кнопки, якщо встановлено атрибут clearable.

   <template>
    <div class="flex gap-2 items-center w-full">
        <vs-form-datepicker clearable v-model="selectedDate" style="width: 50%"/>
        <span style="width: 50%">{{ selectedDate || 'Дата не обрана' }}</span>
    </div>
   </template>
    <script>
    export default {
      data() {
        return {
          selectedDate: '',
        };
      },
    };
  </script>
  

Вимкнення компоненту

Використовуйте атрибут disabled, щоб вимкнути компонент.

   <template>
    <div class="flex gap-2 items-center w-full">
        <vs-form-datepicker disabled v-model="selectedDate" style="width: 50%"/>
        <span style="width: 50%">{{ selectedDate || 'Дата не обрана' }}</span>
    </div>
   </template>
  <script>
    export default {
      data() {
        return {
          selectedDate: '',
        };
      },
    };
  </script>