Datepicker without Input-element


Topic: Datepicker without Input-element

itkaufmann pro premium priority asked 3 years ago

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?


Arkadiusz Idzikowski staff answered 3 years ago

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>

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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