fc9a87a8ab
We've had to add a couple of hacks in order to make jQuery UI datepicker work with Turbolinks, and one of our tests is failing because the datepicker changes its height when changing from a month with 5 weeks to a month with 6 weeks. We could add a workaround so the test still passes (jQuery UI doesn't provide a configuration option to always displays 6 weeks in the datepicker), but I think it's easier to just use the HTML5 native date input field, which also allows us to simplify the code a bit and IMHO it improves the user experience, particularly when using mobile phones. Since date fields are not supported in Safari and Internet Explorer, we're still using the jQuery UI datepicker on those browsers (and on any other browser not supporting date fields). Due to these changes, we're moving the tests checking datepicker's behaviour to the dashboard. I've choosing not to change the public pages because I'm not 100% sure everybody would like this change (some people prefer the datepicker because we can configure the way it looks).
61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
(function() {
|
|
"use strict";
|
|
App.AdvancedSearch = {
|
|
advanced_search_terms: function() {
|
|
return $("#js-advanced-search").data("advanced-search-terms");
|
|
},
|
|
toggle_form: function(event) {
|
|
event.preventDefault();
|
|
$("#js-advanced-search").slideToggle();
|
|
},
|
|
toggle_date_options: function() {
|
|
if ($("#js-advanced-search-date-min").val() === "custom") {
|
|
$("#js-custom-date").show();
|
|
$(".js-calendar").datepicker("option", "disabled", false);
|
|
} else {
|
|
$("#js-custom-date").hide();
|
|
$(".js-calendar").datepicker("option", "disabled", true);
|
|
}
|
|
},
|
|
init_calendar: function() {
|
|
var locale;
|
|
locale = $("#js-locale").data("current-locale");
|
|
$(".js-calendar").datepicker({
|
|
maxDate: "+0d"
|
|
});
|
|
$(".js-calendar-full").datepicker();
|
|
|
|
if (!App.AdvancedSearch.browser_supports_date_field()) {
|
|
$("input[type='date']").datepicker();
|
|
}
|
|
|
|
$.datepicker.setDefaults($.datepicker.regional[locale]);
|
|
$.datepicker.setDefaults({ dateFormat: "dd/mm/yy" });
|
|
},
|
|
browser_supports_date_field: function() {
|
|
var datefield;
|
|
|
|
datefield = document.createElement("input");
|
|
datefield.setAttribute("type", "date");
|
|
return datefield.type === "date";
|
|
},
|
|
initialize: function() {
|
|
App.AdvancedSearch.init_calendar();
|
|
if (App.AdvancedSearch.advanced_search_terms()) {
|
|
$("#js-advanced-search").show();
|
|
App.AdvancedSearch.toggle_date_options();
|
|
}
|
|
$("#js-advanced-search-title").on({
|
|
click: function(event) {
|
|
App.AdvancedSearch.toggle_form(event);
|
|
}
|
|
});
|
|
$("#js-advanced-search-date-min").on({
|
|
change: function() {
|
|
App.AdvancedSearch.toggle_date_options();
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}).call(this);
|