Topic: Datepicker - Event does not trigger on fresh page load
Expected behavior Selecting the calendar icon in the datepicker triggers the calendar to pop up.
Actual behavior The calendar pops up when I navigate from one page to the page where the date picker exists. On the page where the date picker exists if it is refreshed when the calendar is clicked the popup does not open.
Resources (screenshots, code snippets etc.)
$('.datepicker').datepicker({ min: true, format: 'yyyy/mm/dd' }); <%= form_tag events_path, method: :get do %>
<div class="row no-gutters">
<div class="col">
<div class="md-form md-outline input-with-post-icon datepicker mt-1">
<input placeholder="Select Date" type="text" id="selected_date" name="selected_date" class="form-control">
<i class="fas fa-calendar input-prefix" tabindex=1></i>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary btn-rounded m-0 align-bottom"><i class="far fa-hand-pointer"></i></button>
</div>
</div>
<% end %>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: mac pro
- Browser: chrome
- OS: Mojave
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 4 years ago
Hi. Are you sure you have correctly connected MDB on this page? You can check in dev tools if the icon has an event on click?
fkmccallion commented 4 years ago
I just figured out the issue - this is specifically a RoR issue I've ran into before. It is related to turbolinks and to get the functionality to work you will need to wrap the jQuery in an eventlistener as such:
document.addEventListener("turbolinks:load", function(event) { $('.datepicker').datepicker({ min: true, format: 'yyyy/mm/dd' }); // add listener for date change $('.datepicker').on('change', submitForm); function submitForm() { $('#form-submit').submit() } });