Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
título editado
Enlace

¿Como obtengo el valor de un Datepicker en Angular 7?

Origen Enlace

¿Como obtengo el valor de un Datepicker?

Me gustaría obtener el valor de dos fechas obtenidas desde un datapicker en angular, y poder pasarlo al controlador en una variable, y en vez de mostrar el valor de la fecha en formato con slash , cambiarlo a guion, por ejemplo "2019-07-16" y asignarlo dentro de de la función getListOrder, en la linea comentada. La idea es obtener tener un filtro entre dos fechas para realizar un gráfico para un componente

Adjunto el html de mi componente

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { OrderInterface } from '../../../models/order';
import { NgForm } from '@angular/forms';
import { AuthService } from '../../../services/auth.service';
import { AngularFireAuth } from '@angular/fire/auth';
import { UserInterface } from '../../../models/user';
import { OrderService } from '../../../services/order.service';
import { DetailsInterface } from 'src/app/models/details';
import * as moment from "moment";

declare let Chart: any;

@Component({
  selector: 'chart-list',
  templateUrl: './chart-list.component.html',
  styleUrls: ['./chart-list.component.css']
})
export class ChartListComponent implements OnInit {

  constructor(private dataApi: OrderService,  private authService: AuthService) { }
  private details: DetailsInterface[];
  private charts: OrderInterface[];
  private chartParams: { xParams: string[], yParams: number[] };
  private order = [];
  public isAdmin: any = null;
  public userUid: string = null;

  ngOnInit() {
    this.getListOrder();
  }


getListOrder() {


    this.dataApi.getAllOrdersOffer()
      .subscribe(order => {
        this.dataApi.getAllDetails()
          .subscribe((details: any) => {
            // elimianr grafico
            const ids = order.filter((row) => {
              return row.status // && moment(row.date).isSameOrAfter("2019-07-16") && moment(row.date).isSameOrBefore("2019-07-16");
            }).map((row) => row.id);

            let productos = details
            .filter((row) => ids.includes(row.ref))
            .map((detail) => detail.details.map((row) => row.name))
            .join().split(",");
            
            productos = Array.from(new Set(productos));
            this.chartParams = {
              xParams: productos,
              yParams: productos.map((p) => {
                return details.reduce((suma, current) => {
                  return suma += current.details.filter((row) => row.name === p).reduce((suma, current) => {
                    return suma += current.cant;
                  }, 0);
                }, 0);
              })
            };
            this.buildChart();
          });
      });
  }
<mat-form-field>
    <input matInput [matDatepicker]="dp3" placeholder="Fecha de inicio" disabled >
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>