Topic: datepicker confirmDateOnSelect
KelsoField priority asked 3 months ago
Expected behavior adding confirmDateOnSelect to the input container maked the datepicker cloise on select Actual behavior no errors, but I cannot make it work. Again, i feel the documatation is too fragmented, wheras one method may cancel another and it is difficult to determine the best method. I am using UMD with all the options set via data attributes. I want the picker to close when the user selects a date.
I have added confirmDateOnSelect to the datepicker container as .confirmDateOnSelect, data-mdb-confirmDateOnSelect, data-mdb-confirmDateOnSelect="true" I have also tried to apply it on the input itself, same variations. none seem to trigger the behaviour. but all other data- options work.
any ideas?
Resources (screenshots, code snippets etc.) Picker container:
<div class="col-md-4">
<label class="form-label" for="insdate">Examination Date</label>
<div id="insCont" class="input-group datepicker" data-mdb-datepicker-init data-date-type="disableFuture" data-mdb-toggle-button="false" data-mdb-input-init
data-mdb-format="dd-mm-yyyy">
<input class="form-control" data-mdb-toggle="datepicker" type="text" name="insdate" id="insdate" value="<?= date('d-m-Y') ?>" placeholder="DD-MM-YYYY"
style="width: auto;" />
<button class="btn btn-md btn-info m-0 px-3" type="button" onclick="triggerCal('insdate')">
<i class="fad fa-calendar-alt"></i></button>
</div>
</div>
PIcker event:
const insDatePicker = document.querySelector('#insCont')
insDatePicker.addEventListener('valueChanged.mdb.datepicker', (e) => {
console.log('Datepicker value changed event:', e);
const newDateValue = document.querySelector('#insdate').value
console.log('New date value:', newDateValue);
changeFreq(newDateValue)
})
KelsoField priority answered 3 months ago
Thank you, that sorted it. Good to know the tip for converting options to data attributes.
I appreciate the assist.
Grzegorz Bujański staff answered 3 months ago
Try data-mdb-confirm-date-on-select="true"
.
Always, if you have an option that consists of many words, to make it a data attribute, put a -
before the capital letter and change the capital letter to a lowercase letter. So, for example, for the removeOkBtn
option it will be data-mdb-remove-ok-btn="true"
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: *all
- Browser: *all
- OS: *all
- Provided sample code: No
- Provided link: No