How to Validation date in angular

Question

I'm new to angular. so I need a small favor from you. How can I validate the date field when I click the search button. This is my source code.

This is my Search Button Code

  public search() {
    debugger
    console.log(this.searchPhraseDate)
    let searchPhrase :any = (this.searchCriteria == "Keyword" || this.searchCriteria == "ReferenceNumber")? this.searchPhrase : this.searchPhraseDate
    if (searchPhrase != "" && this.selectedWorkflow.workflowName != null) {
      this.searchResults.length = 0
      this.allSearchResults = null
      this.isZeroResults = false
      this.searchMessage = "Searching..."
      this.showNoResultPannel = true
      // debugger
      if (this.searchCriteria == "Keyword") {
        console.log("CHECKED KEYWORD")
        this.KeywordSearch(searchPhrase)
      }
      else if (this.searchCriteria == "ReferenceNumber") {
        console.log("CHECKED REFERENCENUMBER")
        this.SearchByReferenceNumber(parseInt(searchPhrase))
      }
      else {
        console.log("CHECKED DATE")
        this.SearchByInitiateDate(searchPhrase)
      }
    }
    else{
      var alertString = this.translate.store.translations[this.translate.defaultLang].search.searchPhaseEmptyAlert;
      if(this.searchCriteria == "Keyword"){
        alert("Please Enter a Keyword");
      }else if(this.searchCriteria == "ReferenceNumber"){
        alert("Please Enter a Referece Number");
      }
      ****else if(this.searchPhraseDate == ""){
        alert("Please Enter a Date");
      }
      else{
          alert("Invalid Date Format");
      }****
    }
  }

This is my search date method source code

  public SearchByInitiateDate(initiateDate:Date){

    this.apiService.SearchByInitiateDate(this.selectedWorkflow.id, initiateDate).subscribe((result: any) => {
      if (result != null) {
        this.allSearchResults = result
        this.allSearchCount = this.allSearchResults.length
        this.maxPageNumber = Math.ceil(this.allSearchCount / 10)
        this.configureSearchResults(1)
        this.isZeroResults = false
        this.showNoResultPannel = false
      }
      else {
        this.showNoResultPannel = true
        this.isZeroResults = true
        this.searchMessage = "No Search Results..."
      }
    })   
  }

what input you are using for date ?, Is it a date picker or free field (where user can enter alphanumeric). I would suggest you to use date picker as it will make sure that user only select date. Please update your question with html as well — Sameer
– Sameer, Commented Jan 8, 2020 at 9:30
can you show output of this console.log(this.searchPhraseDate) in case of date? — Kaushik
– Kaushik, Commented Jan 8, 2020 at 9:51

Chirag Patel · Accepted Answer · 2020-01-08 09:46:18Z

1

You can use the Date.Parse({string}) function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse. Invalid date would return NaN.

     
const prasedDate = Date.Parse(searchPhrase)

if (!isNaN(prasedDate)) {
  console.log("CHECKED DATE")
  this.SearchByInitiateDate(searchPhrase)
}

Alternatively the momentJs library is quite useful to work with dates, and you can even specify the expected format to be parsed in: https://momentjs.com/docs/#/parsing/string-format/

answered Jan 8, 2020 at 9:46

Chirag Patel

3742 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Validation date in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related