How to disable calendar(make it read only)

[elenberger]

How to make calendar "disabled"? I have form with fields and set attribute "disabled" at

level. Calendar is always enabled and dates could be selected\changed.

[Wikiki]

Hi,

I forgot to integrate this behavior. I'll do it soon.

Regards

[matthewblott]

Any progress on this? Where is the calendar icon generated from? As a workaround I thought I could use a plain input field with the calendar icon and text when in readonly mode but struggled to unpick things when looking at the markup in Chrome dev tools. Thanks in advance :-)

[razvanpavel]

I wanted to use your extension but I will go with something else because this feature is not available. You should prioritise it.

[stefann01]

Any progress?

[ghost]

OK, I came up with a workaround. Not ideal but it seems to work. First, we remove the click handlers, but these won't persist after the month is changed (due to new DOM elements being inserted ... and no event is emitted for changing the month!!!)

So, to make it "permanent," we just set the calendar instance's .datePicker.onDateClickDatePicker function to null. However, if we only nullify the event without removing the event listeners, the first/initial click on the calendar falls through and selects a date, so we need to do both.

const displayCalendars = bulmaCalendar.attach('.calendar', displayOptions);
displayCalendars.forEach(cal => {
    // removes the initial click listeners
    // (only works before month is changed)
    cal.datePicker._ui.days.forEach(day => {
        day.removeEventListener('click', cal.datePicker.onDateClickDatePicker);
        day.removeEventListener('touch', cal.datePicker.onDateClickDatePicker);
    });
    // removes click callback that works for all but the first click
    cal.datePicker.onDateClickDatePicker = null;
});

I'd like to see:

• more event emitters that could be attached to, such as on month changed, on day clicked, etc. which would allow a return of false to cancel the action ... not to mention, a "render completed" event;
• a "read only" option.

[dpineiden]

Hi, I need the 'read_only' feature... Is it ready, or use the tgus.. solution? Thanks!

[dmoebius]

+1 need this, too

[ricardo-reis-1970]

I'm using this in React. Previous use of this calendar was great, because it was the very first input in my menu and therefore it was always active.

I'm not sure if this is the original ask, but I need to disable the calendar for a while, pending previous dropdown selections. I found that either I delay calling bulmaCalendar.attach('[type="date"]', options), in which case I'm stuck with a completely unstyled input, or I hack into it, either by:

• hiding it (as in, not rendering it),
• putting something on top of it, or
• reassigning the .show method to either .hide, or something like () => {}

And all this because the original <input> element results in these two:

<input placeholder="" readonly="readonly" class="datetimepicker-dummy-input" type="text">
<input class="datetimepicker-dummy-input is-hidden" id="My Label" type="text" disabled="" value="">

As you can see, the second one bears the disabled attribute, because I'm putting it there in the original code (together with the id and whatever else), but the first input — the one actually taking the click — is not getting the disabled.

I went to the browser DevTools and added the disabled to the first <input> and it worked exactly as I intended: it taKes no clicks now. Except that I can't do this on the browser in production, and I can't do anything else without serious hacking, like getting the reference of my input, chasing its previous sibling and disabling it, or something even worse.

Would it kill the code if it either came with an option disabled, or if disabling the "main" <input> would also disable the clickable one?

[AzlanCoding]

I use this and it works for me:

// Initialize all input of date type.
const calendars = bulmaCalendar.attach('[type="datetime"]', options);
// Loop on each calendar initialized
calendars.forEach(calendar => {
    calendar.element.parentNode.parentNode.getElementsByTagName("button")[0].hidden = true;
    //Hide the button to clear the date
    calendar.element.parentNode.parentNode.parentNode.style.cssText += 'pointer-events: none;';
    
    // Add listener to show event
    calendar.on('show', event =>{
        //check if the element is disabled
        if (calendar.element.disabled){
            calendar.hide();
        }
    });
});