Mobile Responsive Datepicker ?

[Kevin]

The date picker in FES is not mobile responsive and makes it unusable on a mobile device… As I am building a site that is predominantly going to be used on a smartphone, do you have any solutions for this?

Thanks for your help,

Kevin

[Stephen Harris]

Hi Kevin,

FES uses the jQuery UI datepicker (as does the core version, admin side). While it certainly doesn’t lend itself to a mobile device, it should still be usable. Additionally, while there exist javascript datepickers which are designed to cater for mobiles these lack the extensive API offered by jQuery UI which Event Organiser (and FES) rely on. In short, while jQuery UI works on mobile devices, I’m afraid there isn’t really an option for a responsive datepicker at this point.

[Kevin]

That’s a shame… everything else is perfect, but as you can see from the images, as it is it is definitely not usable on a production site;

Is there a way I can switch the selector off and have it as purely a text input?

[Kevin]

Ok, scrap that… I’ve solved it by adding this code to my css stylesheet in mobile media query;

div.ui-datepicker tbody td {width:auto;display:table-cell;}

and the same for time picker and it works fine now!

Thanks for replying,

Kevin

[Stephen Harris]

Hi Kevin,

Thanks for the follow up post. My suggestion to disable the datepicker would have been to edit the file event-organiser-fes/assets/js/event-form-controller.js (and the min.js vesion) to remove

eventOrganiserSchedulePicker.init({
    views: {
        start_date: '#eo-event-start-date',
        start_time: '#eo-event-start-time',
        end_date: '#eo-event-end-date',
        end_time: '#eo-event-end-time',
        is_all_day: "#eo-event-all-day",
        schedule: "#eo-event-schedule",
        frequency: '#eo-event-frequency',
        week_repeat: '#dayofweekrepeat',
        month_repeat: '#dayofmonthrepeat',
        summary: "#eo-event-summary",
        schedule_last_date: '#eo-event-schedule-last',
        schedule_span: '#recpan',//day(s)|week(s)|month(s)|year(s) - human readable span
        recurrence_section: '.reocurrence_row',
        occurrence_picker: '#eo_occurrence_datepicker',
        occurrence_picker_toggle: '.eo_occurrence_toogle',
        include: '#eo_occurrence_includes',
        exclude: '#eo_occurrence_excludes',
    },
    format: $('#eo-event-start-date').data('date_format'),
    is24hour:  $('#eo-event-start-time').data('is24hour'),
    startday: EO_ES_Form.startday,
    schedule: window.eventOrganiserSchedule,
    locale: EO_ES_Form.locale,
    editable: true,
});

Your solution is much better as you can implement it without editing the core files and resolves (rather than ‘mutes’) the problem.

Lastly, to clarify my earlier post, the screenshots you’ve provided don’t reflect what I see on a mobile device so I suspect that it could be specific to the theme your are using. What your screenshots show is certainly unusable.

I’m glad you’ve been able to resolve this!

[Author]

Posts