Pickup/Delivery Date on Services->Delivery methods.

xarga · Post by **xarga** » 24 Jun 2020, 18:39

After adding Provider > Date to all our delivery methods the shopper must enter a Delivery/Pickup date after selecting their preferred delivery method.

However, some MacBook Pro users have complained they cannot checkout because the date field does not function as expected in the Safari browser. They don't get a date popup when clicking in the field. They can enter the date manually in the required format but this also gets rejected for some reason.

Would appreciate it, if you have a Mac for testing purposes, whether you can confirm this to be a valid issue and/or direct me to the Javascript code where the date popup is activated along with any suggestions for resolving the problem.

Thanks

I just tested this issue using safari on lambdatest.com and can confirm that clicking on the date field does not elicit a response. Entry of the date in mm/dd/yyyy format as shown in other browsers gives the error message as seen in the image when submitted. Also there is no visible placeholder guidance - just a blank field.

: checkout-on-safari.jpg (80.77 KiB) Viewed 2618 times

Post by **aimeos** » 25 Jun 2020, 08:36

Think the date format must be in (international) "YYYY-MM-DD" format.
Seems like Safari, Opera Mini (not relevant) and IE (not relevant any more) are the only ones which doesn't implement date input fields: https://caniuse.com/#feat=input-datetime

xarga · Post by **xarga** » 26 Jun 2020, 00:45

Yes I've confirmed that the YYYY-MM-DD format is accepted which is different from the mm/dd/yyyy format shown to other non-safari users.

Since a fairly high percentage of these customers are Mac users what do you suggest as the best approach to a fix?

Post by **aimeos** » 26 Jun 2020, 07:21

In the backend we use Modernizr and the jQuery date picker plugin to emulate a date picker for those browsers:
https://github.com/aimeos/ai-admin-jqad ... #L631-L656

If you add that in the frontend, it would be nice if you can open a PR on Github too.

xarga · Post by **xarga** » 10 Jul 2020, 05:35

Per your suggestion - I tried adding the modernizer / jquery script suggested but it didn't work on the date field. Not sure if I implemented it correctly.
But we also have time fields which are causing a similar problem on Safari. Could find any documentation on Modernizr and time fields. I tried putting in a default time of 2:00pm but it appears as 14:00 which is confusing to most people.

I tried adding this in app.blade.php - I didn't get any error in the console but didn't work on Safari.

In the HEAD section

Code: Select all

<script>
        Aimeos = {

            options: null,
        };
            Aimeos.Form = {

            init: function () {

                this.createDateAndTimePickers();

            },
            createDateAndTimePickers : function() {

                if(typeof Modernizr != 'undefined') {

                    if(!Modernizr.inputtypes['time']) {
                        $(".aimeos input[type='time']").each(function(idx, elem) {
                            if($(elem).closest(".prototype").length === 0) {
                                $(elem).timepicker({
                                    timeFormat: 'h a',
                                    constrainInput: false
                                });
                            }
                        });
                    }

                    if(Modernizr && !Modernizr.inputtypes['date']) {
                        $(".aimeos input[type='date']").each(function(idx, elem) {
                            if($(elem).closest(".prototype").length === 0) {
                                $(elem).datepicker({
                                    dateFormat: 'yy-mm-dd',
                                    constrainInput: false
                                });
                            }
                        });
                    }
                }
            },
        };
</script>

Then in the footer I added the modernizr script

Code: Select all

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

@yield('aimeos_scripts')

Post by **aimeos** » 10 Jul 2020, 17:59

It doesn't work because you've copied the code from the Aimeos admin backend but forgot to call the method in any place.

Code: Select all

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <!-- script src="https://code.jquery.com/jquery-1.12.4.js"></script -->
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
      $( function() {
                if(typeof Modernizr != 'undefined') {
                    if(Modernizr && !Modernizr.inputtypes['date']) {
                        $(".aimeos input[type='date']").each(function(idx, elem) {
                                $(elem).datepicker({
                                    dateFormat: 'yy-mm-dd',
                                    constrainInput: false
                                });
                        });
                    }
                }
      } );
  </script>

The jquery-ui library doesn't offer a time picker, so you have to use one of these:
https://www.sitepoint.com/10-jquery-tim ... r-plugins/

Help for Aimeos