---
title: "How to Add a Button to Clear the Date/Time Fields Selection"
source: "https://docs.nexcess.com/software/kadence/iconic/delivery-slots/button-to-clear-the-date-time-fields/"
description: "Coming soon: Iconic Delivery Slots is becoming part of Kadence Shop Kit. You may see both names used while we update the product, documentation, and customer ex…"
vertical: "Software"
area: "Delivery Slots"
date: "2022-05-11"
last_modified: "2026-08-12"
---

# How to Add a Button to Clear the Date/Time Fields Selection

**Coming soon:** Iconic Delivery Slots is becoming part of Kadence Shop Kit. You may see both names used while we update the product, documentation, and customer experience.

If you want to add a button that would clear the selection of delivery fields at the checkout, you can do so with this guide.

Clicking the button would reset the selected date and timeslot and the associated delivery fee, like so:

You can use this code snippet to add the button. Add this code to the functions.php of your active child theme or to the [Code Snippet](https://wordpress.org/plugins/code-snippets/) plugin.

```
<?php
/**
 * Add the clear selection button.
 */
function iconic_add_add_clear_selection_btn() {
	?>
	<a href="#" class="iconic-wds-clear-selection-btn"><?php esc_html_e( 'Clear selection', 'jckwds' ); ?></a>
  <?php
}
add_action( 'iconic_wds_after_delivery_details_fields', 'iconic_add_add_clear_selection_btn' );

/**
 * Add JS code to the checkout page footer.
 */
function iconic_wds_add_custom_js() {
	if ( ! is_checkout() ) {
		return;
	}
	?>
	<script>
		jQuery( document ).on( 'click', '.iconic-wds-clear-selection-btn', function(e) {
			e.preventDefault();
			jQuery('#jckwds-delivery-date').datepicker('setDate', null);
			jQuery("#jckwds-delivery-time").val('0')

			jQuery(document.body).trigger( 'update_checkout' );
		} );
	</script>
	<?php
}
add_action( 'wp_footer', 'iconic_wds_add_custom_js' );

```