Topic: Datepicker without Input-element
Is it possible to use the Datepicker without having to open it by using an "input" and an "mdb-datepicker-toggle" element?
For example, I want to open a Datepicker on a button click and just save the selected date with the (dateChanged) function.
I only managed to do it with an hidden Input and a "datepicker.open()"-click-function on the button with following code:
<button class="btn btn-link" (click)="datepicker.open()">BUTTON</button>
<mdb-form-control>
<input
mdbInput
[mdbDatepicker]="datepicker"
type="hidden"
(click)="datepicker.open()" />
<mdb-datepicker #datepicker="mdbDatepicker"
(dateChanged)="selectDate($event)"></mdb-datepicker>
</mdb-form-control>
The only problem I have with this is that the Datepicker is not closable by clicking on the backdrop.
Do you have a solution to that?
I think hiding the input is a good solution in this case. You can add $event.stopPropagation() on the button click to prevent the date picker from closing immediately after opening. We tested everything using the following code and it looks like there are no problems with closing on backdrop click.
<mdb-form-control style="visibility: hidden">
<input
mdbInput
[mdbDatepicker]="basicDatepicker"
type="text"
class="form-control"
id="exampleDatepicker1"
/>
<label mdbLabel for="exampleDatepicker1" class="form-label">Select a date</label>
<mdb-datepicker-toggle [mdbDatepicker]="basicDatepicker"></mdb-datepicker-toggle>
<mdb-datepicker #basicDatepicker></mdb-datepicker>
</mdb-form-control>
<button class="btn btn-primary" (click)="basicDatepicker.open(); $event.stopPropagation()">Open datepicker</button>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 1.5.1
- Device: any
- Browser: any
- OS: Windows 10
- Provided sample code: No
- Provided link: No