Hi, in my app i am using multiple calendars all assigned separately with different class element selectors.
Fairly often i am running into an issue where when pressing a date to select and close, the calendar slides down but there is another sitting behind it which cannot be removed without a page refresh which is impossible from the app so means close and re open.
Can anybody help? 
var datePickerEditSet = app.calendar.create({
inputEl: '.date-picker-edit-set',
dateFormat: 'yyyy-mm-dd',
on: {
dayClick: function (p, dayContainer, year, month, day) {
datePickerEditSet.close();
}
}
});
var datePickerEditTarget = app.calendar.create({
inputEl: '.date-picker-edit-target',
dateFormat: 'yyyy-mm-dd',
on: {
dayClick: function (p, dayContainer, year, month, day) {
datePickerEditTarget.close();
}
}
});
UPDATE - I replaced the on: dayClick method of closing to the built in “closeOnSelect: true” and this still doesn’t work. Every calendar is assigned individual to its own class and i cant for the life of me see whats wrong
Here is the console output from replicating the issue using Xcode inspector.
Desperate for help if anyone has any suggestions!
Can you please setup a JSFiddle so i can check? You can start from https://jsfiddle.net/nolimits4web/o2ejupu1/
Hey, so i pasted in a bit of the code to show you how i am initialising date pickers. (First time using JSFiddle) Ive tried to recreate the issue but cant in the fiddle. The exact thing thats happening is as follows:
I click the input, select the desired date and calendar slides away but there is a second calendar instance behind it (As if another was initialised and opened underneath) which cannot be closed either by selecting a date or focusing outside of the calendar. This forces an app close and restart as there is no way to refresh the page.
Its intermittent and takes a lot of date selection and page switching to replicate.
Any help is appreciated! Thanks!
Can’t replicate it as well. Looks like the issue is somewhere on your end. Can you show HTML or component content of the page with inputs and where do you init these calendars
I thought it may be my end, see attached the HTML and page-init code for the calendars. The HTML for the inputs are in index.php inside popups but this init is for the page Goals.php which is ajax loaded (All app popups live in index regardless of where they are used)
First what i see here wrong is that you have calendars always in dom (in index page) and every time you go to Goals page you will create and init same calendars multiple times. Don’t do it. If they are persistent then just init them once on app init.
Second. Popup layout is a bit wrong as well, i recommend you to use correct View structure there so it should be:
<div class="popup">
<div class="view view-init">
<div class="page">
<div class="navbar"> ... </div>
<div class="page-content">...</div>
</div>
</div>
</div>
Hi, so what you suggested has fixed the problem i think and last night the app was release to BETA. What i did was init all the calendars that were in the DOM on app init and then for calendars in ajax pages i created the calendars on page init and then destroyed them on close so they aren’t ever assigned twice. I also updated all popups to use the page and view classes as suggested. Once again amazing support and i will definitely be donating, Framework7 has saved be thousands in app dev!
1 Like
