Woocommerce Bookings: Allow Month and Year Select Change

Question

I am using Woocommerce bookings for a simple product that is bookable in single blocks up to a year in advance. I'd like to modify the woocommerce bookings datepicker, which is displayed at the single product page, to allow the month to be changeable.

At the moment a user has to scroll through the months, as it displays per image 1 below. I would like to enable the selection of the month, and if possible the year (image two)

Image One: - swap this

For this - with selectable month dropdown

I have had a look at woocommerce-bookings/booking-form/datepicker.php - however there is nothing obvious that can be changed in there.

And I can't see anything relevent in https://woocommerce.com/document/bookings-action-and-filter-reference/#section-2

Is there a snippet to modify the datepicker using jquery?

Can we use e.g. https://api.jqueryui.com/datepicker/#option-changeMonth

Answer 1

For anyone else looking for this, here is the answer that allows you to show month and year if needed, in the woocommerce bookings calendar.

/*
 * =============================================================
*
 * @snippet to add month and year dropdown in woocommerce booking.
 *  
 */
function wc_booking_date_picker_mod() {
?> <script>
        jQuery(function($) {
            $(window).load(function() {
                if($(".wc-bookings-date-picker").length){
                    $(".wc-bookings-date-picker").each((function() {
                        $(this).find(".picker").datepicker("option", "changeMonth", true);
                        $(this).find(".picker").datepicker("option", "changeYear", true);
                    }));
                }
            });
        });
    </script>
<?php
}
add_action('wp_head', 'wc_booking_date_picker_mod');