Woocommerce custom date picker field on checkout page

functions.php

<?php

/**
 * Add the custom field on checkout page
 */

add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );
function display_extra_fields_after_billing_address () {
	_e( "Delivery Date: ", "add_extra_fields");
	?>
	<br>
	<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Delivery Date">
	<script>
	    jQuery(document).ready(function( $ ) {
	        $( ".add_delivery_date").datepicker( {
	        	minDate: 0,	
	        } );
	     } );
	</script>
	<?php  
}

/**
 * Load datepicker script
 */

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

function enqueue_datepicker() {
    if ( is_checkout() ) {
        // Load the datepicker script (pre-registered in WordPress).
         wp_enqueue_script( 'jquery-ui-datepicker' );
         // You need styling for the datepicker. For simplicity I've linked to Google's hosted jQuery UI CSS.
         wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
         wp_enqueue_style( 'jquery-ui' );  
    }  
}

/**
 * Save field value on wp_postmeta table
 */

add_action( 'woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order' , 10, 1);

function add_order_delivery_date_to_order ( $order_id ) {
	if ( isset( $_POST ['add_delivery_date'] ) &&  '' != $_POST ['add_delivery_date'] ) {
		add_post_meta( $order_id, '_delivery_date',  sanitize_text_field( $_POST ['add_delivery_date'] ) );
	}
}

/**
 * Display field value on custom email notification
 */

add_filter( 'woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails' , 10, 3 );

function add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {
    if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {            
        $order_id = $order->get_id();
    } else {
        $order_id = $order->id;
    }
    $delivery_date = get_post_meta( $order_id, '_delivery_date', true );
    if ( '' != $delivery_date ) {
	$fields[ 'Delivery Date' ] = array(
	    'label' => __( 'Delivery Date', 'add_extra_fields' ),
	    'value' => $delivery_date,
	);
    }
    return $fields;
}


/**
 * Display field value on thank you page
 */

add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

function add_delivery_date_to_order_received_page ( $order ) {
	if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {            
        $order_id = $order->get_id();
    } else {
        $order_id = $order->id;
    }
    $delivery_date = get_post_meta( $order_id, '_delivery_date', true );
    
    if ( '' != $delivery_date ) {
    	echo '<p><strong>' . __( 'Delivery Date', 'add_extra_fields' ) . ':</strong> ' . $delivery_date;
	}
}


/**
 * Display field value on the order edit page
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Delivery Date').':</strong> <br/>' . get_post_meta( $order->get_id(), '_delivery_date', true ) . '</p>';
}

any idea how to make this a required field? Seems to ignore the 'required' attribute. Thanks

you can add simple javascript to do this. -------------------Ronwaldo N. PiniliWeb Developer +63 998 860 7876 On Monday, September 27, 2021, 05:39:04 PM GMT+8, samjsharples ***@***.***> wrote: @samjsharples commented on this gist. any idea how to make this a required field? Seems to ignore the 'required' attribute. Thanks — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

any idea how to make this a required field? Seems to ignore the 'required' attribute. Thanks

@ronipl mentioned this can be done with javascript, has anyone got a suggestion on how? looking to do the same