Mobile Responsive Datepicker ?

This topic contains 4 replies, has 2 voices, and was last updated by  Stephen Harris 6 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #18860

    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

    Kevin
    #18895

    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.

    Stephen Harris
    #18897

    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;

    The Date Picker
    The Time Picker

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

    Kevin
    #18898

    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

    Kevin
    #18929

    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!

    Stephen Harris
Viewing 5 posts - 1 through 5 (of 5 total)
To enable me to focus on Pro customers, only users who have a valid license for the Pro add-on may post new topics or replies in this forum. If you have a valid license, please log-in or register an account using the e-mail address you purchased the license with. If you don't you can purchase one here. Or there's always the WordPress repository forum.