WordPress站点jQuery UI Datepicker重复显示问题解决问询

我正在开发一个WordPress网站，在特定页面通过PHP实现了自定义输入元素，并为该字段使用jQuery UI的datepicker组件，代码如下：

(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);

目前遇到两个问题：

• 导入jQuery UI库后，页面会显示两个日期选择器：一个浏览器原生的，一个自定义样式的；但移除库导入后，自定义样式的日期选择器无法正常显示。
• 自定义样式的日期选择器并非由我或当前主题开发，无法对其进行修改。

解决方法：仅保留自定义样式日期选择器 #

问题根源是输入元素大概率被设置为type="date"，浏览器会自动渲染原生日期选择器，同时jQuery UI又附加了自定义组件，导致双重显示。以下是几种可行的解决方式：

方法1：修改输入元素的type属性

如果能控制PHP生成的输入元素代码，直接将type="date"改为type="text"，浏览器就不会触发原生日期选择器，只保留jQuery UI的自定义版本。

方法2：通过JS强制转换输入类型（无法修改HTML时使用）

如果输入元素由第三方代码生成，无法直接修改HTML，可以在初始化datepicker前添加代码，强制将输入类型转为text：

(function($){
    $(function() {
        // 先转换输入类型，禁用原生选择器
        $('#ordine-datepicker').attr('type', 'text');

        // 原代码内容保持不变
        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;
            }
        })();
        
        console.log("ciao");

        $('#ordine-datepicker').datepicker({
            dateFormat: 'mm/dd/yy',
            onSelect: function (dateText) {
                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);

方法3：通过CSS隐藏原生日期选择器控件

如果上述方法都不生效，可以用CSS针对不同浏览器隐藏原生控件：

/* 隐藏Chrome/Edge的原生日期选择器按钮 */
#ordine-datepicker::-webkit-calendar-picker-indicator {
    display: none;
}
/* 隐藏Firefox的原生日期选择器 */
#ordine-datepicker[type="date"] {
    -moz-appearance: textfield;
}
/* 隐藏IE的原生控件 */
#ordine-datepicker::-ms-clear, #ordine-datepicker::-ms-reveal {
    display: none;
}

将这段CSS添加到主题自定义CSS区域或页面的<style>标签中即可。

内容的提问来源于stack exchange，提问作者liz14