Date picker appears at bottom of page before click

[Nicksab82]

I am currently using datepicker on my site with the following code:

$(function(){
	$("#attrib-23-0").attr( 'readOnly' , 'true' );
    $('#attrib-23-0').datepicker({ 
	  dateFormat: 'MM dd, yy',
	  beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('mm/dd/yy', date);
var day = date.getDay();
return [ ( day > 0 && day < 6 && dates.indexOf(string) == -1), "" ];
	}
});
    var dates = ["07/14/2023","2023-07-04", "04-07-2023", "07/05/2023", "07/04/2023","07/06/2023","07/03/2023","07/07/2023"];
	
    var d = new Date();
    var targetTimeOffset  = +6*60; //desired time zone, taken as GMT-4
    d.setMinutes(d.getMinutes() + d.getTimezoneOffset() + targetTimeOffset );
    $( "#attrib-23-0" ).datepicker( "option", "minDate", d );
});

When the page is first accessed, the calendar is displayed at the bottom of the page. Once the input field is clicked, the calendar is displayed correctly and the one at the bottom of the page disappeared.

Is this a known bug ? or is there a way to fix it?

An sample page can be seen here: https://www.royal-fleur.com/all-flowers/above-larkspur-sunset-bouquet

Thank you in advance for the help.

[mgol]

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex.