I have a small form designed to have two calendar fields, I am able to submit the form and the calendar works fine. but after submitting the form I am refreshing the page “self.$f7router.refreshPage();”. Once refreshed the startdate input got disabled and calendar neither renders on startdate nor enddate. Here is the code.
....
<f7-list-item item-input id='start-date'>
<f7-label>Start Date</f7-label>
<div class="item-input-wrap">
<input type="text" placeholder="Ex. 15-08-2019" required validate :value="myBannerData.startDate" class="calender"
@input="myBannerData.startDate = $event.target.value" readonly="readonly" id="startDate"/>
</div>
</f7-list-item>
<f7-list-item item-input id='end-date'>
<f7-label>End Date</f7-label>
<div class="item-input-wrap">
<input type="text" placeholder="Ex. 08-01-2019" required validate id="endDate" :value="myBannerData.endDate"
@input="myBannerData.endDate = $event.target.value"/>
</div>
</f7-list-item>
....
and in page init event I am creating calender components:
....
onPageInit(e){
console.log('in page Init')
const self = this;
const app = self.$f7;
const $ = self.$$;
self.startDateCalender = app.calendar.create({
inputEl: '#startDate',
dateFormat: 'dd-mm-yyyy',
closeOnSelect: true
})
self.endDateCalender = app.calendar.create({
inputEl: '#endDate',
dateFormat: 'dd-mm-yyyy',
closeOnSelect: true
})
},
....