click outside not close when open from calendar button icon

[fabbi-linhnt]

Hi, thank you for your contribution,

Demo url: https://codesandbox.io/s/mpklq49wp About Open programatically sample, when click to Open Picker button, we unable to close when click outside. I got same problem when use calendar-button-icon. Please check. Thank you.

[Viliasas]

Hello,

had the same issue. If someone is looking for this, one workaround is to have your own trigger button, which triggers a click on label associated with the datepicker (must have correct "id" and "for" attributes). That way datepicker closes correctly if clicked outside.

[dland512]

Hello,

had the same issue. If someone is looking for this, one workaround is to have your own trigger button, which triggers a click on label associated with the datepicker (must have correct "id" and "for" attributes). That way datepicker closes correctly if clicked outside.

Do you have some sample code for how to do that?

[Viliasas]

@dland512 Here it is:

<div class="form-group">
    <label for="input_date">Invoice Date</label>
    <div :class="[{'input-group': !isFinished}]">
        <datepicker input-class="form-control" id="input_date" ref="input_date"
                    :disabled="!canEditUntilPaid"
                    v-model="invoice.date"
                    format="MM/dd/yyyy"
                    @input="inputDate($event)"></datepicker>
        <span class="input-group-btn" v-if="!isFinished"
                @click="triggerClick('input_date')">
            <button class="btn default" type="button">
                <i class="fa fa-calendar"></i>
            </button>
        </span>
    </div>
</div>

triggerClick: function (id) {
    $('#order_invoices label[for=' + id + ']').click();
},

The idea is to have label tag associated with datepicker input field and when you need it to open, just trigger a click on the label.