Change format of date input and also set value


Topic: Change format of date input and also set value

MPL pro premium asked 2 years ago

I have the following date input

<div class="row"> <div class="col-6 col-md-6"> <input mdbInput type="date" class="form-control" placeholder=""/> </div> </div> Example

I am wondering how I can change the format for example to mm/dd/yyyy? Also I am wondering how I can set the value on this?

Thanks for any help


Arkadiusz Idzikowski staff answered 2 years ago

Here is an example:

TS:

datepickerControl = new FormControl(new Date(2020, 5, 10));

HTML:

<mdb-form-control>
  <input
    mdbInput
    [mdbDatepicker]="formatDatepicker"
    type="text"
    class="form-control"
    id="exampleDatepicker1"
    [formControl]="datepickerControl"
  />
  <label mdbLabel for="exampleDatepicker1" class="form-label">Select a date</label>
  <mdb-datepicker-toggle [mdbDatepicker]="formatDatepicker"></mdb-datepicker-toggle>
  <mdb-datepicker #formatDatepicker [format]="mm/dd/yyyy'"></mdb-datepicker>
</mdb-form-control>

You can find more information in our documentation: https://mdbootstrap.com/docs/angular/forms/datepicker/


MPL pro premium commented 2 years ago

Thanks for your answer, but I am wondering that on the example I provided it has fixed '/' positions as you type the date and automatically switches from dd to mm to yyyy as you type it. I am wondering if something like that is possible with this solution?


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 3.0.0
  • Device: Laptop
  • Browser: All
  • OS: Linux
  • Provided sample code: No
  • Provided link: Yes