datetimepicker-clear-button in bulma-calendar submits a form

[kstastny]

Hi,

I would like to use bulma-calendar in a form. However, when pressing the X (button with class datetimepicker-clear-button) to clear calendar value, the form is submitted and the application redirects me to localhost (on development machine).

Is there a way to stop submitting the form?

The only way I found to do it is modifying the calendar HTML and changing <button class="datetimepicker-clear-button"> to <button type="button" class="datetimepicker-clear-button"> but that means touching the component.

thank you

[YoanaDimitrova1]

+1

[jcheng77]

instead of customizing the code, you can disable the button after initialization

var clearbuttons = document.getElementsByClassName('datetimepicker-clear-button');
for(var i = 0; i< clearbuttons.length; i++) {
clearbuttons[i].disabled = true;
}

[YoanaDimitrova1]

@jcheng77 Wouldn't the user be confused by the presence of a button that can't be used? Also, there will be no way of clearing out the date as the input field is disabled with Bulma (if I remember correctly).

[jcerar]

My solution is to manipulate the DOM after calendar initialization like so:

$('.datetimepicker-clear-button').attr('type', 'button');

Achieves what the OP originally set out to do without touching the component source.