issue with Angular: Unable to set both minimum and maximum values in the same input field for date type

I have been attempting to apply minimum and maximum values to an Angular code snippet, here is what I have:

 <input type="date" 
        class="form-control" 
        style="width: 30%" 
        [disabled]="!dateSent" 
        min="{{dateSent|date:'yyyy-MM-dd'}}" 
        max="{{todaysdate|date:'yyyy-MM-dd'}}" 
        #myDate
        [value]="dateReceived | date:'yyyy-MM-dd'" 
        (input)="dateReceived=$event.target.value" />

The values of 'dateSent' and 'todaysdate' are identical.

dateSent=1527445800000 and todaysdate=1527445800000 can any one help me and the out put is like this

https://i.sstatic.net/NqBDc.png

Thank you for taking the time to read and consider my question.

angulartypescript

Answer №1

To retrieve the date, make use of new Date(dateReceived)

Software Element:

import { Component,OnInit} from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

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

  dateSent;
  dateReceived;
  todaysdate;

  ngOnInit(){
    this.dateSent="1527445800000"
    this.todaysdate="1527445800000"

  }

}

Document Object Model Representation:

  <input type="date" 
    class="form-control" 
    style="width: 30%" 
    [disabled]="!dateSent" 
    min="{{dateSent|date:'yyyy-MM-dd'}}" 
    max="{{todaysdate|date:'yyyy-MM-dd'}}" 
    #myDate
    [value]="dateReceived | date:'yyyy-MM-dd'" 
    (input)="dateReceived=$event.target.value" />

Check out the Live Interaction Example Here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Enhance your development experience with the TypeScript definitions for the Vue 2 plugin

Currently, I am utilizing VSCode alongside TypeScript classes for developing Vue 2 components. You can check out more information at: vuejs/vue-class-component. Within my present project, I make use of plugins like vue-i18n for handling translations of la ...

typescriptvue.jsvisual-studio-codetypescript-typings

Limit the category to a specific subset of strings

Looking for a way to implement literal type restrictions without using type aliases: const foo = (a: 'string', b: 'string') => { } foo("123", "abc") // should fail foo("123" as 'string', "abc" as 'string') I pr ...

typescripttypes

Utilizing electron and Systemjs to import node modules

Is it feasible for systemjs to utilize require("remote").require("nodemodule") when the module cannot be located in its registry? A similar mechanism seems to be functioning when utilizing electron with typescript and commonjs modules... Has anyone succe ...

javascriptnode.jstypescriptelectronsystemjs

Integrate a service component into another service component by utilizing module exports

After diving into the nestjs docs and exploring hierarchical injection, I found myself struggling to properly implement it within my project. Currently, I have two crucial modules at play. AuthModule is responsible for importing the UserModule, which conta ...

typescriptnestjs

Tips for showcasing individual row information in a popup window with Angular 9

Here is the code snippet for utilizing the open dialog method in the component: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { AuthService } from '../_services/auth.se ...

htmlangulartypescript

Using parameters to create unions in TypeScript

Is there a standard method to parametrically define a union? I'm searching for a way to generically define something like: type U<K> = T<K1> | T<K2> | ... | T<Kn> // Where K === (K1 | ... | Kn) Note: I'm encountering a s ...

typescripttypes

Activate the input event for a text box when the ng model is assigned from a different angular method

Is it feasible to activate the input event of a text box when a value is assigned to ng-model from another function? <p><input type="text" [(ngModel)]="testValue" (input)="modelupdated(testValue)"/></p> <p><button type="button ...

angular

Learn how to retrieve data outside of the .subscribe function in an Angular 2 polling service

// I'm facing an issue where I am unable to assign values from outside the subscribe function to any variable. In my current project, I am fetching JSON content using the http.post() method and storing it in a variable. However, I need to access this ...

angularpollingsubscribe

Implement type declarations for a React JS form validation schema

I encountered the following scenario: interface FORM<P> { onSubmit: (d: P) => void; schema?: yup.SchemaOf<P>; } This is an example of my onSubmit function: const onSubmit = (d: { firstName: string; lastName: string }) => { conso ...

reactjstypescript

Cheerio fails to retrieve items from the specified directory

My main goal with cheerio is to scrape the titles from this IMDb ranking: Despite following the documentation and specifying the exact HTML path for the titles, I am getting back random and confusing objects like: 'x-attribsNamespace': [Object ...

typescriptweb-scrapingaxioscheerio

Construct this node project utilizing either gulp or webpack exclusively

In the structure of my project, you will find various folders like node, build, gulp, and src. These folders contain important files for the development process such as .gitignore, gulpfile.js, package.json, tsconfig.json, webpack.config.js, server.js, con ...

node.jstypescriptbuildgulpwebpack-2

What methods are typically used for testing functions that return HTTP observables?

My TypeScript project needs to be deployed as a JS NPM package, and it includes http requests using rxjs ajax functions. I now want to write tests for these methods. One of the methods in question looks like this (simplified!): getAllUsers(): Observable& ...

javascripttypescriptjasminerxjskarma-jasmine

Converting JSON data into an Angular object

I'm struggling to map the JSON data below to an Angular 7 object: [ { "id": "123456", "general": { "number": "123", "name": "my name 1", "description": "My description with <li> html tags ...

jsonangulartypescript

The response parser in Angular 7 is failing to function correctly

Hey, I recently updated my Angular from version 4.4 to the latest 7 and after encountering several errors, I was able to get my service up and running. However, I'm facing an issue with my output parser function which is supposed to parse the login re ...

javascriptangulartypescriptrxjssingle-page-application

AmplifyJS is throwing an error: TypeError - It seems like the property 'state' is undefined and cannot be read

I am currently working on integrating the steps outlined in the Amplify walkthrough with an Angular cli application. My app is a brand new Angular cli project following the mentioned guide. My objective is to utilize the standalone auth components a ...

javascriptangulartypescriptamplifyjs

Stopping the subscription to an observable within the component while adjusting parameters dynamically

FILTER SERVICE - implementation for basic data filtering using observables import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { Filter } from '../../models/filter.model'; imp ...

angulartypescriptrxjs

What are the benefits of reverting back to an Angular 1 directive instead of using an Angular 2 application

Our team has created numerous Angular 1 components and is eager to incorporate them into our Angular 2 application. However, the documentation suggests that we must downgrade the Angular 2 application in order to integrate and utilize the Angular 1 direc ...

angularjsangular

Error: Incorrect data type found in React Route component

I've encountered an issue while attempting to utilize the Route component in my application. The error message I'm receiving reads as follows: [ts] Type '{ path: "/:shortname"; component: typeof FirstComponent; }' is not assignable ...

reactjstypescriptreact-router

Developing the headers for a service using React.js

As someone new to ReactJs, I'm curious about the various methods we can use to include Headers in our service Url before making a call. While I'm familiar with how GET/POST Calls are made in angular Js after including headers, I'd like to l ...

reactjstypescriptreact-nativereact-redux

Entering _this

I am encountering an issue with my typescript file where it is failing TSLint. I need some help resolving this problem. The structure of the object in question is as follows: export default class Container extends Vue { // methods doSomething() { ...

typescriptvue.jstslint