php - How to submit a datepicker in an HTML form?

one text

I have an HTML form with which I submit a selected date with date input using post method and this works fine as shown in the picture below:

However, I would like to use instead of a date input a datepicker because it looks better. The problem when I submit using the datepicker div I don't get any results. The picture below show the datepicker div:

I find online some materials but non worked for me.

HTML form:

                $(function(){
        $("#delivery_date").datepicker({
         inline: true,
         sideBySide: true,
         keepOpen: true,
         dateFormat: "yy-mm-dd",
         debug:true,
         onSelect : function (dateText, inst) {
      $('#myform').submit();
}});
});

.date-search-button {
    border: 1px solid #dddfe2;
    background-color: #1877F2;
    font: 20px Helvetica, Arial, sans-serif;
    color: #ffffff;
    text-align: center;
    border: none;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 20px;
    line-height: 48px;
    padding: 0 16px;
    width: 275px;
    border: none;
    margin-bottom: 15px;
}

input[type="date"]{
    opacity:100;
  }

.date-search-button:hover {
    background: #166fe5;
    cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link
    href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
    rel="stylesheet" />

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<form id="myform" name="myform" action='mainpage.php' method='post'>
<!-- <input class="div1" type="date" id="delivery_date2" value='curdate()' name="delivery_date"> -->
<div id="delivery_date" name="delivery_date" type="text">
</div>
<button id="myBtn" class="date-search-button" type="submit" onclick="JavaScript:AutoRefresh(500);">Search</button>
<!-- <input type='button' name='submit' value='Select' id="myBtn" class="date-search-button"> -->
 </form>

Source