This applies to both the search forms and the booking form on the single listing page.

By default a guest can click the Check-Out field in either of them. That click re-opens the same calendar the Check-In field uses. If the guest has already picked a start date, the next date they click starts a new range instead of finishing the current one, so the Check-Out box stays empty.

This article shows how to stop that with a small piece of code in your child theme. After the change the guest picks both dates in one calendar, opened from Check-In only.

Before you start

This is a custom code change. It is not a theme setting, and it is not covered by standard support. Add it in a child theme, test it on a staging site first, and check it again after each theme update.

You need a child theme. If you do not have one, create it before you continue.

Why the readonly attribute alone does not work

Adding the HTML readonly attribute to the Check-Out field looks like the obvious answer, but on its own it changes nothing.

The readonly attribute blocks one thing only: typing into the box. It does not block clicking. The Check-Out box in WPRentals is never typed into. Its only job is to open the calendar when clicked, and that click comes from a JavaScript handler the theme attaches to the field.

You can see this in the theme itself. The Check-In field is already read only, and it still opens the calendar every time.

So the code below does two separate things. It adds the readonly attribute to block typing, and it removes the click handler to block the calendar.

The code

Add this to the functions.php file of your child theme.

add_action( 'wp_footer', 'wpr_custom_readonly_checkout', 100 );
function wpr_custom_readonly_checkout() { ?>
<style>
input#check_out[readonly],
input#check_out_list[readonly],
input#check_out_widget[readonly],
input#check_out_shortcode[readonly],
input#check_out_mobile[readonly],
input#end_date[readonly] {
    background-color: #f1f1f1 !important;
    color: #9a9a9a !important;
    cursor: default !important;
}
input#check_out[readonly]::placeholder,
input#check_out_list[readonly]::placeholder,
input#check_out_widget[readonly]::placeholder,
input#check_out_shortcode[readonly]::placeholder,
input#check_out_mobile[readonly]::placeholder,
input#end_date[readonly]::placeholder {
    color: #b3b3b3 !important;
}
</style>
<script>
jQuery(document).ready(function($){
    // Search-form Check-Out fields plus the booking-form Check-Out field.
    var $out = $('[id="check_out"], [id="check_out_list"], [id="check_out_widget"], [id="check_out_shortcode"], [id="check_out_mobile"], [id="end_date"]');

    // Block typing.
    $out.attr('readonly', 'readonly');

    // Block the click that re-opens the calendar.
    $out.off('click');
});
</script>
<?php }

Which fields it covers

The code covers the Check-Out field in the main search form, the half map search, the search widget, the search shortcode, the mobile search form, and the booking form on the single listing page.

It does not touch the Contact Owner form. If you want that form included as well, add the booking_to_date field to the list in the script, and to the two style rules.

Three details that matter

Use the attribute selector, not the ID selector. Some pages render more than one element with the same ID, for example the desktop and the mobile search form on the same page. In jQuery, an ID selector matches only the first one, so the second field would keep working. The attribute selector used in the code above matches all of them.

The grey styling needs the important flag. The theme’s own stylesheet forces read only inputs back to a white background, using a rule strong enough to win against a simple selector. That is why the CSS above combines the input tag, the ID and the readonly attribute, together with the important flag. A weaker selector applies cleanly and still leaves the field white.

The code runs in the footer at priority 100. This is on purpose. It has to run after the theme has attached its own handlers, otherwise there is nothing to remove yet.

How to test it

Open your homepage and click the Check-Out field in the search form. The calendar must not open, and the field should look grey. Then click Check-In. The calendar must open normally, and picking two dates must fill both boxes.

Repeat the same check in the Book Now box on a single listing page.

If nothing changed, clear your site cache and your browser cache, then reload the page. The code prints in the page footer, so a cached page will not contain it.

How to remove it

Delete the whole block from your child theme functions.php and clear the cache. Nothing else is stored, and the fields go back to their normal behaviour straight away.