CODEWITHSUNDEEP
htmlangulartypescriptdate
Cara
Cara

Reputation: 165

How to get the date value of an input?

I wonder how to get the date of the input and compare it with a list of objects.

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

How do I get the value from the date and compare it with the date of my list of object? I mean after picking 23 as the day, there should some objects appear with the correct day and so on. I am not sure how to implement that.

Do anyone know how to implement such function in a good way?

EDIT: So far, I used (ngModelChange) to get the new date value. 

<input type="date" [(ngModel)]="date" (ngModelChange)="changedDate($event)>

Getting the value like this:

changedDate(e){
let date = e.target.value;
}

I wonder whether I can get a sub value for the date when not every field is filled but I think not since the validationMessage say the full date is required.

Upvotes: 0

Views: 4281

Answers (4)

Plochie
Plochie

Reputation: 4117

You can use YYYY-MM-DD format for the dates which can directly be converted to Javascript Date objects. After these obejcts you can get date and compare the results.

Demo

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  dateArr = [{ name: 'carlo', date: '2012-01-23'}, { name: 'carla', date: '1999-10-20'}];

  changedDate(e) {
    const value = this.filterDate(new Date(e));

    if (value) {
      console.log('Object found', value)
    }
    else {
      console.log('Nothing found')
    }
  }

  filterDate(selectedDate: Date) {
    for(const d of this.dateArr) {
      const elemDate = new Date(d.date);
      if (elemDate.getDate() === selectedDate.getDate()) {
        return d;
      }
    }
  }
}

Upvotes: 3

Hardik Kothari
Hardik Kothari

Reputation: 1766

You can use ngModelChange event like this

<input type="date" [(ngModel)]="date" (ngModelChange)="date = $event">

also call a function like this

<input type="date" [(ngModel)]="date" (ngModelChange)="matchDate($event)">

Create that function and you will get value on date change there you can get a date value with using function or just bind in the variable.

you can compare date with using momentjs

Upvotes: 3

Chirag Patel
Chirag Patel

Reputation: 374

if your date input is not part of a form and you need to update/check against values whenever the date changes you can do something like this:

<input type="email" [(value)]="date" (change)="dateChanged()">

if it is then you can use ngModelChange with your above code:

<input type="date" [(ngModel)]="date" (ngModelChange)="dateChanged()">

Note: you can pass through the change event into the functions using $event too.

then in the dateChanged() function you can do whatever you need with the new value.

Upvotes: 1

spnq
spnq

Reputation: 31

You need to learn how Reactive Forms work. Pay attention for [formControl] directive and valueChanges observable of that formControl. You can access input data in your component with it.

Upvotes: 1

Related Questions