How do you change the time from the code in Datpicker?

Question

I would like to choose a date, then convert it to the last day of the month and display it in the datpicker? Has anyone done something like that already? I have been struggling for two days and I still have not found the problem solved. The problem concerns the display itself and in the datepicker. If anyone has an idea, I am asking for an example of virtue.

Answer 1

I would recommend you to use native datepickers (html) to make your life easier. Once you have it, it will run everywhere (desktop, web or phone apps)

Click here to see a working example with datepickers on JSFiddle

const $origin_day = document.querySelector('label:first-of-type > input')
const $last_day = document.querySelector('label:last-of-type > input')

$origin_day.onchange = () => {
  if (!$origin_day.value) return;

  const date = new Date($origin_day.value)
  $last_day.value = new Date(date.getFullYear(), date.getMonth() + 1, 1)
    .toISOString().slice(0, 10)
}

Answer 2

As you can basically write in plan JS you should take a look at this Thread on how to get last day of previous month

You didn't tell us which datepicker you are using but assuming it's Material Datepicker, using Reactive forms, it goes like this:

JS:    this.editForm.controls['dateTo'].setValue(yourDate);
        HTML:
         <input matInput [matDatepicker]="pickerTo" placeholder="Choose a date" id="cmp_dateEndField" 
                            [formControl]="dateTo">
                            <mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
                            <mat-datepicker #pickerTo></mat-datepicker>