app/assets/javascripts/datepicker.js
// Based on code by Javan Makhmali
// https://github.com/turbolinks/turbolinks/issues/253#issuecomment-289101048
// The jQuery UI date picker widget appends a shared element to the
// body which it expects will never leave the page, but Turbolinks
// removes that shared element when it rerenders. We satisfy that
// expectation by removing the shared element from the page before
// Turbolinks caches the page, and appending it again before
// Turbolinks swaps the new body in during rendering.
//
// Additionally, returning to the cached version of a page that
// previously had date picker elements would result in those date
// pickers not being initialized again. We fix this issue by finding
// all initialized date picker inputs on the page and calling the
// date picker's destroy method before Turbolinks caches the page.
(function() {
"use strict";
App.Datepicker = {
initialize: function() {
var locale;
locale = document.documentElement.lang;
$(".js-calendar").datepicker({
maxDate: "+0d"
});
$(".js-calendar-full").datepicker();
if (!App.Datepicker.browser_supports_datetime_local_field()) {
if (App.Datepicker.browser_supports_date_field()) {
$("input[type='datetime-local']").prop("type", "text")
.val(App.Datepicker.datetime_to_date)
.prop("type", "date");
} else {
$("input[type='datetime-local']").val(App.Datepicker.datetime_to_date).datepicker();
}
}
if (!App.Datepicker.browser_supports_date_field()) {
$("input[type='date']").datepicker();
}
$.datepicker.setDefaults($.datepicker.regional[locale]);
$.datepicker.setDefaults({ dateFormat: "dd/mm/yy" });
},
destroy: function() {
$.datepicker.dpDiv.remove();
document.querySelectorAll("input.hasDatepicker").forEach(function(input) {
$(input).datepicker("hide");
$(input).datepicker("destroy");
});
},
browser_supports_date_field: function() {
return App.Datepicker.browser_supports_field_with_type("date");
},
browser_supports_datetime_local_field: function() {
return App.Datepicker.browser_supports_field_with_type("datetime-local");
},
browser_supports_field_with_type: function(field_type) {
var field;
field = document.createElement("input");
field.setAttribute("type", field_type);
return field.type === field_type;
},
datetime_to_date: function(index, value) {
return value.split("T")[0];
}
};
document.addEventListener("turbolinks:before-render", function(event) {
$.datepicker.dpDiv.appendTo(event.data.newBody);
});
}).call(this);