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.
type="text", not a date input field - so that's where your "duplicate" pickers are coming from. And date input fields requires the formatyyyy-mm-ddwhen 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.<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 atype="text"field?