I would like the user to be able to select the start_date and automatically (without the user selecting anything) have the same value appear in the end date. Here is the code snippet I have extracted:

                <?php
                $required         = 'false';
                $start_date_value = '';

                if ( 'yes' == $settings['cwbf_start_date_required'] ) {
                    $required = 'true';
                }

                if ( isset( $_GET['start_date'] ) ) {
                    $start_date_value = sanitize_text_field( wp_unslash( $_GET['start_date'] ) );
                }
                $start_place_holder = __( 'Día de la reserva', 'codup-filters-for-woo-booking' );
                ?>
                <input name="start_date" id="start_date" validate-required="<?php echo wp_kses_post( $required ); ?>" placeholder="<?php echo wp_kses_post( $start_place_holder ); ?>" autocomplete="off" min="<?php echo wp_kses_post( gmdate( 'Y-m-d' ) ); ?>" type="text"  value="<?php echo wp_kses_post( $start_date_value ); ?>" />
            </div>
            <?php
            if ( 'yes' == $settings['cwbf_end_date_enable'] ) {
                ?>
                <div >
                    <label >
                <?php
                if ( '' != $settings['cwbf_end_date_text'] ) {
                    echo wp_kses_post( $settings['cwbf_end_date_text'] );
                } else {
                    esc_attr_e( 'End Date', 'codup-filters-for-woo-booking' );
                }
                ?>
                    </label>

                <?php
                $required       = 'false';
                $end_date_value = '';

                if ( 'yes' == $settings['cwbf_end_date_required'] ) {
                    $required = 'true';
                }

                if ( isset( $_GET['end_date'] ) ) {
                    $end_date_value = sanitize_text_field( wp_unslash( $_GET['end_date'] ) );
                }
                $end_place_holder = __( 'Place your End Date here', 'codup-filters-for-woo-booking' );
                ?>
                <input name="end_date" id="end_date" validate-required="<?php echo wp_kses_post( $required ); ?>" placeholder="<?php echo wp_kses_post( $end_place_holder ); ?>" autocomplete="off" min="<?php echo wp_kses_post( gmdate( 'Y-m-d' ) ); ?>" type="text"  value="<?php echo wp_kses_post( $end_date_value ); ?>" />
                </div>
                <?php

I am a newbie in html and php but I think this is a critical issue for my project, thank you very much :)

CodePudding user response：

You can try this with javascript.

<script>
    const startDate = document.querySelector('#start_date');
    const endDate = document.querySelector('#end_date');

    startDate.addEventListener('change', function() {
        endDate.value = startDate.value;
    });
</script>

CodePudding user response：

If you use jquery:

$('#start_date').on('change', function(){
    $('#end_date').val($(this).val())
})

I did not test it in a real environment but I guess it should work without any bugs.

Edit: as @Martin mentioned:

1. Add jquery to your page. You can use this link to add it.
2. The above code is just a UI trigger that updates the end_date value after the start_date input is changed by the user. So it's all in the frontend.