custom code to list the date and select it in datepicker

functions.php

<?php
add_action('woocommerce_before_add_to_cart_button', 'add_custom_date_picker', 10000 );
function add_custom_date_picker() {
    ?>
    <style>
        .date-list {
            list-style-type: none;
            padding: 0;
        }

        .date-list li {
            cursor: pointer;
            margin: 5px 0;
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            width: 100px;
            text-align: center;
        }

        .date-list li:hover {
            background-color: #e0e0e0;
        }
    </style>

    <ul class="date-list">
        <li data-date="10/24/2024" data-hidden-date="24-10-2024">October 24, 2024</li>
        <li data-date="11/15/2024" data-hidden-date="15-11-2024">November 15, 2024</li>
        <li data-date="12/05/2024" data-hidden-date="5-12-2024">December 5, 2024</li>
    </ul>

    <script>
        jQuery(function($) {

            // When a date from the list is clicked, set it in the datepicker
            $(".date-list li").click(function() {
                let selectedDate  = $(this).data("date");
		let split_date    = selectedDate.split( "/" );
		let selected_date = new Date( split_date[ 2 ], split_date[ 0 ] - 1, split_date[ 1 ] );
		$("#booking_calender").datepicker( "setDate", selected_date );

		let hidden_date = $(this).data("hidden-date");
		$("#wapbk_hidden_date").val( hidden_date );
		var split  = hidden_date.split( '-' );
		split[ 1 ] = split[ 1 ] - 1;
		let startinst = {
			selectedMonth: split[1],
			selectedDay: split[0],
			selectedYear: split[2]
		};
	
                bkap_show_times( hidden_date, startinst );
            });
        });
    </script>
    <?php
}