Topic: DatePicker support of other date types, such as Luxon

limestonedevelopmentraistone-com premium asked 2 days ago


Expected behavior Data type agnostic date picker to be equivalent to Angular Material Date Picker, allowing for other Date objects such as Luxon DateTime

Angular Material Documentation: https://material.angular.dev/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings

Actual behavior DatePicker in MDB Angular is hardcoded to only allow for JS Date objects. So even though we have set up our Angular project to use Luxon through the MatLuxonDateModule (registering Angular Material to use Luxon as Angular Material Date Picker is data type agnostic), when we try to set this up for MDB we get errors as MDB code is hardcoded to use JS Dates rather than an interface that allows for different date representations.

Example Code

this.formGroup = new UntypedFormGroup({
  publicationDate: new FormControl<DateTime>(DateTime.now(), Validators.required),
  referenceRateType: new UntypedFormControl(null, Validators.required)
});

<mdb-form-control>
  <input
    mdbInput
    formControlName="publicationDate"
    [mdbDatepicker]="datepicker"
    type="text"
    class="form-control"
    id="exampleDatepicker"
  />
  <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
  <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
  <mdb-datepicker #datepicker></mdb-datepicker>
</mdb-form-control>

This gives errors as DateTime is not a "Date" and I am unable to find MDB documentation to allow for a good adapter (Angular Material uses DateAdapter interface) to have the date picker automatically convert or use these values.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.0.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes