BricksUltimate

BricksUltimate released the Checkout Builder feature for the WooCommerce checkout page. With this feature, you can directly make custom fields. In this tutorial, We show how to create the delivery date picker field.

Step 1: Create a shipping field. So we select the Shipping Fields element in the canvas.
Step 2: Select the “Custom Field” option from the Field dropdown
Step 3: Field Type would be “Text”
Step 4: Enter the field name like “shipping_delivery”
Step 5: Enter the field label under the Label section
Step 6: You can also adjust other options
Step 7: Last we save the checkout template

Enqueue JS Code

Open the functions.php file of the bricks child theme and add the following code

/**
 * Register/enqueue custom scripts and styles
 */
add_action( 'wp_enqueue_scripts', function() {
	if( is_checkout() ) {
		wp_enqueue_script( 'jquery-ui-datepicker' );
		wp_enqueue_style( 'jquery-ui-style', WC()->plugin_url() . '/assets/css/jquery-ui/jquery-ui.min.css', array(), '1.0' );
	}
} );

Sync Datepicker with Custom Field

Now we shall sync the datepicker with our custom field. You can use the snippet plugin or bricks code element. Here is the JS code:

<script>
  jQuery(document).ready(function($) {
  // Initialize datepicker
  $('#shipping_delivery').datepicker({
  	minDate: 3, // Disable past dates and set the first selectable date to today + 3 days
  	beforeShowDay: function(date) {
  		var day = date.getDay();
  		// Disable weekends (Saturday = 6, Sunday = 0)
  		return [(day != 0 && day != 6)];
  	},
  	dateFormat: 'dd.mm.yy' // Date format
  });
});
</script>

Video