0

I'm working on a WordPress website, and I have a specific page with a custom element implemented in PHP. I'm using jQuery UI's datepicker for this input field. Here's my code:

(function($){
    $(function() {
        jQuery.browser = {};
        (function () {
            jQuery.browser.msie = false;
            jQuery.browser.version = 0;
            if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
                jQuery.browser.msie = true;
                jQuery.browser.version = RegExp.$1;
            }
        })();
        
        // Commented out the line below because it caused an error
        // document.getElementById('ordine-datepicker').valueAsDate = new Date('dd-MM-yyyy');
        
        console.log("ciao");

        // Using jQuery UI datepicker with date format option
        $('#ordine-datepicker').datepicker({
            dateFormat: 'mm/dd/yy', // Set the date format here
            onSelect: function (dateText) {
                // Convert the selected date to 'yyyy-MM-dd' format
                var selectedDate = $.datepicker.formatDate('yy-mm-dd', $.datepicker.parseDate('mm/dd/yy', dateText));
                
                $.ajax({
                    type: "POST",
                    url: admin_ajax_path,
                    data: {
                        'giorno' : selectedDate,
                        'action': 'get_ordini_function'
                    },
                    dataType: "json",
                    success: function (response) {
                        var questions_array = get_questions_from_survey(response);
                        render_questions_selector(questions_array, $);
                    },
                    error: function (errormessage) {
                        console.log(errormessage);
                    }
                });
            }
        });
    });
})(jQuery);

I'm encountering two issues:

When I import the jQuery UI library for the datepicker, two datepickers appear—one created by the browser and one customized. However, if I remove the jQuery UI library import, the customized datepicker doesn't appear.

The customized datepicker wasn't built by me or the theme and I can't modify it.

How can I ensure that only one datepicker appears?

Thank you all in advance.

3
  • 1
    The jQuery UI DatePicker is supposed to be used on an input with type="text", not a date input field - so that's where your "duplicate" pickers are coming from. And date input fields requires the format yyyy-mm-dd when setting the date, no matter if the display format is different - so that might also be related to the fact that you used it on a date field in the first place. Commented Aug 31, 2023 at 9:01
  • 1
    Now you removed the "I have a specific page with a custom <input type="date"> element" from the question, shortly after I wrote the previous comment. So is that still the case, or are you also having these problems with a type="text" field? Commented Aug 31, 2023 at 9:03
  • I didn't see your comment before editing the question, I was still using the <input type="date"> but I deleted it without noticing. Anyway I'm doing some tests and you were right, it was because I wasn't using type="text". Thank you!! Commented Aug 31, 2023 at 9:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.