Adding a datepicker to Prestashop Customization Fields

In this quick tip we will see how to enable the jquery date picker for Prestashop customization fields

Watch the screencast

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • Joemarie Alterado Dacillo

    Hi Nemops, the datepicker works well when the customization field is set to not required but when I set it as required I’m prompted with this alert “Please fill in all of the required fields, and then save your customizations.” Thank you

  • MIKE

    Hi i like this Hack ;) is it possible to make it in Prestashop 1.7.1.1?
    can you update your Tutorial please .
    Greetings from Cologne Germany Mike

    • NemoPS

      Hi Mike! Thanks for your comment :)
      I would like to as I understand several users have upgraded to 1.7, but unfortunately I am not much into that version yet, so I can’t really do it anytime soon (maybe at some point, but definitely not now).
      If you are interested, you can have a look at our “1.6 upgrade” project named ThirtyBees at http://thirtybees.com

      That’s the one I actively support now :) I am sure you would find it better than 1.7 in a lot of ways!

  • restaller

    Hello Nemo, I have followed the tutorial. But I found a problem. At the time of to add the product to your cart appears a message saying that I should (don’t remember the message) complete customizable field.The field has a value, but it is as if there is no value in the field.

    • NemoPS

      It has a value…but it doesn’t? I don’t understand. Did you save the customization before adding it to the cart?

      • restaller

        Thanks for answering. Yes, I have applied the changes and this message appears:

        “Please fill in all required before saving the customization fields.”

        I leave a screenshot:

        https://lh3.googleusercontent.com/-KuTPM_oqvFg/VS-0EtlczRI/AAAAAAAABLI/owm9VKdV5j8/w1232-h812-no/screenshot.png

        This is the code I used:

        $(document).ready(function() {

        $(‘.customDatePicker’).datepicker();

        });

        And this is the line of controller:

        $this->addJqueryUi(‘ui.datepicker’);

        • Nuno Rosado

          same error for me if you dont use required field that is working!

        • NemoPS

          It’s odd as I made it required too, and it was working. I recall an old bug about this, having to do with character encoding or something like that. Try to debug from here

          if (!$product->hasAllRequiredCustomizableFields() && !$this->customization_id)

          CartController.php

          I’d check the first method, then the customization id, and proceed from there

        • nuno rosado

          do you now how to use the add cart button to save auto the customization?
          thanks

        • restaller

          Have you found the solution Nuno? I have not gotten anything

        • Nuno

          no nothing my slution was date not required and other text field with required

        • Matt Pavitt

          Hi Nemo, thanks for this tutorial. I followed it and got the datepicker up, but I have a couple of problems. The first is I have 2 texts fields, and the datepicker shows in both. Can I show datepicker in one text field only? The 2nd problem is that after adding the datepicker I no longer have the save button or UPLOAD button showing. I’m using Prestashop 1.6.0.14. with the default theme. If I don’t add text fields, and only use file field, then the SAVE & UPLOAD buttons reappear. I hope you can help? Thank you.

        • NemoPS

          Yup, you can, you just have to give each a separate ID and target that. Check if you have any javascript error for the other issue

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: