How to show the initial date

[stuta]

In mounted() method I use this.$refs.Calendar.ChooseDate('15.04.2020') to set date, but still initial display is only placeholder dd.mm.yyyy. When I click to field it shows datepicker and after the pick, I see the chosen date in the input field.

In this example, the end date has been picked but the start date shows only the placeholder.

How can I show the initial date in the input field?

This is my config:

calendarData: {},
calendarConfig: {
    showWeekNumbers: true,
    changeMonthFunction: true,
    changeYearFunction: true,
    changeYearStep: 1,
    calendarsCount: 1,
    isModal: true,
    isAutoCloseable: true,
    isDatePicker: true,
    isMultiple: true,
    isMultipleDatePicker: true,
    isDateRange: false,
    isTypeable: true,
    transition: true,
    sundayStart: false,
    placeholder: false,
    dateFormat: 'dd.mm.yyyy'
}

[stuta]

I found a simple fix:

https://github.com/ManukMinasyan/vue-functional-calendar/pull/59#issuecomment-623627471

I wish we could use v-model so there would be no need for mounted() and this.$refs that is not compatible with Vue 3. The v-model is the source of data in all other components.

it could be like this:

calendarData: {
  date: '01.04.2020'
}

[ManukMinasyan]

Hello @stuta, you can do this with slots.

[stuta]

How?

[ManukMinasyan]

<Calendar class="calendar" :configs="configs">
    <template v-slot:dateRangeInputs="props">
          <label>
            <i class="d-icon icon-datepicker"/>
            <input
              v-model="props.startDate"
              type="text"
              placeholder="Check in"
              value="date1"
              readonly
            >
          </label>
          <label>
            <i class="d-icon icon-datepicker"/>
            <input
              v-model="props.endDate"
              type="text"
              placeholder="Check Out"
              value="date2"
              readonly
            >
          </label>
        </template>

  </Calendar>

[stuta]

I don't use date range, I have only one input. I had 2 different inputs in my example.

Where are the slots documented?

[ManukMinasyan]

Documentation for that is currently unavailable.

<Calendar class="calendar" :configs="configs">
<template v-slot:datePickerInput="props">
         <input class="vfc-single-input" type="text" title="Date"
                       v-model="props.selectedDate">
</template>
</Calendar>

[TitanFighter]

Few notes:

1. Just for those who is not good with slots -> how to get values from "props"? -> add v-model="calendarData" (with the same var in data() ) to <Calendar class="calendar" :configs="configs">, so it must be <Calendar v-model="calendarData" class="calendar" :configs="configs">
2. The example also shows how to change placeholder (actually two placeholders) for range selection in modal mode.
3. The 1st input should have style="border-radius: 10px 0 0 10px"