I've added a new date field on the checkout page. I'd like to create a date based delivery fee calculation.

The date field has the 'update_totals_on_change' class. When changing this manually the totals is recalculated as expected. Unfortunately when I use the jQuery datepicker on this field the totals not updating.

In my opinion, I should trigger the update_checkout method in the datepicker's callback. In the WooCommerce checkout.js script there's a input_changed(); which fires the $( 'body' ).trigger( 'update_checkout' );. But I can't call them directly from the datepicker's callback.

jQuery("#delivery_date").datepicker({
    minDate: new Date(),
    firstDay: 1,
    onSelect: function () {
        $( 'body' ).trigger( 'update_checkout' );
    }
});

How can I get working the update_totals_on_change functionality with datepicker?

Edit:

I tried it with triggering the change() function but the datepicker stops working all the times when a callback function was called.

jQuery("#delivery_date").datepicker({
    minDate: new Date(),
    firstDay: 1,
    onSelect: function () {
        $(this).change();
    }
});

I've added a new date field on the checkout page. I'd like to create a date based delivery fee calculation.

The date field has the 'update_totals_on_change' class. When changing this manually the totals is recalculated as expected. Unfortunately when I use the jQuery datepicker on this field the totals not updating.

In my opinion, I should trigger the update_checkout method in the datepicker's callback. In the WooCommerce checkout.js script there's a input_changed(); which fires the $( 'body' ).trigger( 'update_checkout' );. But I can't call them directly from the datepicker's callback.

jQuery("#delivery_date").datepicker({
    minDate: new Date(),
    firstDay: 1,
    onSelect: function () {
        $( 'body' ).trigger( 'update_checkout' );
    }
});

How can I get working the update_totals_on_change functionality with datepicker?

Edit:

I tried it with triggering the change() function but the datepicker stops working all the times when a callback function was called.

jQuery("#delivery_date").datepicker({
    minDate: new Date(),
    firstDay: 1,
    onSelect: function () {
        $(this).change();
    }
});

• plugin-development
• ajax
• woocommerce-offtopic
• datepicker

1 Answer 1

Try wrapping the trigger in a standalone callback.

jQuery(function() {
    jQuery( "#datetimepicker" ).datetimepicker({
        onClose:function(ct,$i){
        my_callback();
        }
    });
    function my_callback() {
        jQuery( 'body' ).trigger( 'update_checkout' );
    }
});