1

He intentado buscar información sobre esto pero no consigo aclararme.

Quiero que en el calendario la semana comience con el día lunes.

Adjunto package.json

"dependencies": {
    "@angular/animations": "~10.1.5",
    "@angular/cdk": "^10.2.5",
    "@angular/common": "~10.1.5",
    "@angular/compiler": "~10.1.5",
    "@angular/core": "~10.1.5",
    "@angular/forms": "~10.1.5",
    "@angular/material": "^10.2.5",
    "@angular/platform-browser": "~10.1.5",
    "@angular/platform-browser-dynamic": "~10.1.5",
    "@angular/router": "~10.1.5",
    "bootstrap": "^4.5.3",
    "mongoose": "^5.10.10",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  }, 

html

<mat-form-field appearance="fill">
        <mat-label>Choose a date</mat-label>
        <input matInput [matDatepicker]="picker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>

Código por defecto de angular material. Espero que me puedan ayudar gracias.

0

1 respuesta 1

0

En el constructor del componente se debe agregar una instancia de DateAdapter luego reemplazar la función getFirstDayOfWeek() por una que retorne 1 (lunes):

import { Component } from "@angular/core";
import { DateAdapter } from "@angular/material/core";

/** @title Datepicker open method */
@Component({
  selector: "datepicker-api-example",
  templateUrl: "datepicker-api-example.html",
  styleUrls: ["datepicker-api-example.css"]
})
export class DatepickerApiExample {

  constructor(date: DateAdapter<Date>) {
    // retorna 1 como primer día de la semana
    date.getFirstDayOfWeek = () => 1;
  }

}

Ejemplo en vivo

5
  • Si lo que quiero es que aparezca primero le lunes y el último el domingo, como si fuera calendario en español. el 31 oct. 2020 a las 17:43
  • Lo que quieres entonces es cambiar el orden de las columnas de los días?
    – Lobos
    el 31 oct. 2020 a las 17:56
  • Si. como he añadido arriba que aparezca el lunes primero. el 31 oct. 2020 a las 20:08
  • Ya actualicé la respuesta.
    – Lobos
    el 31 oct. 2020 a las 22:01
  • Muchas gracias. el 31 oct. 2020 a las 22:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.