Closed stuta closed 4 years ago
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'
}
Hello @stuta, you can do this with slots.
How?
<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>
I don't use date range, I have only one input. I had 2 different inputs in my example.
Where are the slots documented?
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>
Few notes:
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">
style="border-radius: 10px 0 0 10px"
In mounted() method I use
this.$refs.Calendar.ChooseDate('15.04.2020')
to set date, but still initial display is only placeholderdd.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: