Duplicate Datepickers Issue with Custom jQuery UI Datepicker

36 Views Asked by At

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.

0

There are 0 best solutions below