javascript - type - Entrada de fecha angular 2 no vinculante al valor de fecha

input type date value

Question

tratando de configurar un formulario, pero por alguna razón, la entrada de Fecha en mi html no está vinculada al valor de fecha del objeto, a pesar de usar [(ngModel)]

html:

<input type=''date'' #myDate [(ngModel)]=''demoUser.date''/><br>

componente de formulario:

export class FormComponent {
    demoUser = new User(0, '''', '''', '''', '''', new Date(), '''', 0, [], []);  
}

Clase de usuario

export class User {
    constructor (
        public id: number,
        public email: string,
        public password: string,
        public firstName: string,
        public lastName: string,
        public date: Date,
        public gender: string,
        public weight: number,
        public dietRestrictions: string[],
        public fitnessGoals: string[]
    ){

    }
}

Una salida de prueba revela la Fecha "nueva" actual como el valor del objeto, pero la entrada no actualiza el valor de la fecha del objeto Usuario ni refleja el valor, lo que sugiere que ninguno de los enlaces de dos vías está funcionando. La ayuda sería muy apreciada.

Answer 1

Angular 2 ignora por completo el type=date . Si cambia el tipo de text a text , verá que su input tiene un enlace bidireccional.

<input type=''text'' #myDate [(ngModel)]=''demoUser.date''/><br>

Aquí está bastante mal aconsejar con mejor seguir:

Mi proyecto originalmente usaba jQuery . Por lo tanto, estoy usando jQuery datepicker por ahora, con la esperanza de que el equipo angular solucione el problema original. También es un reemplazo mejor porque tiene soporte para varios navegadores. Para tu input=date , input=date no funciona en Firefox .

Un buen consejo : hay algunas selecciones de fecha Angular2 datepickers bastante buenas:

• https://github.com/emirdeliz/meus-projetos/tree/master/angular2-schedule/app/frontend/components/datepicker

• https://github.com/MrPardeep/Angular2-DatePicker

• https://www.npmjs.com/package/ng2-datepicker

Answer 2

En .ts:

today: Date;

constructor() {  

    this.today =new Date();
}

.html:

<input type="date"  
       [ngModel]="today | date:''yyyy-MM-dd''"  
       (ngModelChange)="today = $event"    
       name="dt" 
       class="form-control form-control-rounded" #searchDate 
>

Answer 3

En lugar de [(ngModel)] puedes usar:

// view
<input type="date" #myDate [value]="demoUser.date | date:''yyyy-MM-dd''" (input)="demoUser.date=parseDate($event.target.value)" />

// controller
parseDate(dateString: string): Date {
    if (dateString) {
        return new Date(dateString);
    } else {
        return null;
    }
}

También puede optar por no utilizar la función parseDate. En este caso, la fecha se guardará como un formato de cadena como "2016-10-06" en lugar del tipo de fecha (no he probado si esto tiene consecuencias negativas al manipular los datos o guardar en la base de datos, por ejemplo).

Answer 4

En tu componente

let today: Date;

ngOnInit() {
  this.today = new Date().toISOString().split(''T'')[0];
}

y en tu html

<input name="date" [(ngModel)]="today" type="date" required>

Answer 5

Puedes usar una solución, como esta:

<input type=''date'' (keyup)="0" #myDate [(ngModel)]=''demoUser.date''/><br>

en su componente:

 @Input public date: Date,

Answer 6

Según HTML5, puede usar input type="datetime-local" lugar de input type="date" .

Permitirá que la directiva [(ngModel)] lea y escriba el valor desde el control de entrada.

Nota: Si la cadena de fecha contiene ''Z'', entonces para implementar la solución anterior, debe recortar el carácter ''Z'' de la fecha.

Para más detalles, visite este link en mozilla docs.

Answer 7

Si está utilizando un navegador moderno, hay una solución simple.

Primero, adjunte una variable de plantilla a la entrada.

<input type="date" #date />

Luego pasa la variable a tu método de recepción.

<button (click)="submit(date)"></button>

En su controlador, simplemente acepte el parámetro como tipo HTMLInputElement y use el método valueAsDate en el HTMLInputElement.

submit(date: HTMLInputElement){
    console.log(date.valueAsDate);
}

A continuación, puede manipular la fecha de todos modos sería una fecha normal.

También puede establecer el valor de su <input [value]= "..."> como lo haría normalmente.

Personalmente, como alguien que intenta mantenerse fiel al flujo de datos unidireccional, trato de evitar el enlace de datos bidireccional en mis componentes.

Answer 8

usar DatePipe

> // ts file

import { DatePipe } from ''@angular/common'';

@Component({
....
providers:[DatePipe]
})

export class FormComponent {

constructor(private datePipe : DatePipe){}

    demoUser = new User(0, '''', '''', '''', '''', this.datePipe.transform(new Date(), ''yyyy-MM-dd''), '''', 0, [], []);  
}

Answer 9

Angular 2, 4 y 5 :

la forma más sencilla: plunker

<input type="date" [ngModel] ="dt | date:''yyyy-MM-dd''" (ngModelChange)="dt = $event">