Question 229313 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to set value to input of type date via [(ngModel)]

as shown below in the html code, i have a date-picker. when onDateOfSpraySet() is called, the iDatePasser.dateOfSpray will be set to the chosen value of the date.For example, if the user selected 08-31-2023,iDatePasser.dateOfSpray will contain a string
equal to the same aforementioned date.

the problem iam facing is, when i want to set the date on the data-picker via iDatePasser.dateOfSpray. for example, i want to be able to when i set iDatePasser.dateOfSpray = 15-08-2022 the data picker changes accordingly and automatically set to 15-08-2022

please let me know how to achieve that

private onDateOfSpraySet(event:any):void {
    const splitted = this.iDatePasser.dateOfSpray.split('/')
    const numOfDateBites = splitted.length
    this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd ','en-US')
    const maxDateLimitAsDate = new Date(this.maxDateLimit)
    const dateOfSprayAsDate = new Date(this.iDatePasser.dateOfSpray)
    const maxDateDate = maxDateLimitAsDate.getDate()
    const maxDateMonth = maxDateLimitAsDate.getMonth()
    const maxDateYear = maxDateLimitAsDate.getFullYear()

    let isValidInputDateFrom = false
    if (dateOfSprayAsDate < maxDateLimitAsDate && Number(splitted[1]) < maxDateDate - 2) {
      isValidInputDateFrom = true
    } else{
      isValidInputDateFrom = false
      this.iDatePasser.dateOfSpray = formatDate(new Date(), 'yyyy-MM-dd','en-US') //<=== here i want to set date value to the iDatePasser.dateOfSpray and make the data picker reflects the date value accordingly
    }

<div id="idDateOfSprayContainer">
    <clr-date-container class="clsDateContainer">
        <label id="idDateOfSprayLabel">
            {{ "SITE.INSECTICIDES.DATE_OF_SPRAY_LABEL" | translate }}:
        </label>
        <input id="idDateOfSprayValue" class="clr-control-container" clrDate type="time" placeholder="" [(ngModel)]="iDatePasser.dateOfSpray"  name="dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)"
            value="2021-07-21" [min]="minDateLimit" [max]="maxDateLimit" [disabled] = "!siteSelectionState"/>
    </clr-date-container>
</div>
Tags:

2

Answers


  1. 0

    The date format in iDatePasser.dateOfSpray matches the format of the date picker so if date picker wants a date in the format MM/dd/yyyy make sure you are setting the date like that.

    You can use DatePipe to format the date instead of using formatDate – this helps ensuring the date is formatted correctly. Add it to the providers in the module.

    providers: [DatePipe]

    And instead of updating the model inside the onDateOfSpraySet fn, directly update the model when the condition is not met.

    constructor(private datePipe: DatePipe) {}

private onDateOfSpraySet(event:any):void{
  const maxDateLimitAsDate = new Date(this.maxDateLimit);
  const dateOfSprayAsDate = new Date(this.iDatePasser.dateOfSpray);

  if (dateOfSprayAsDate>=maxDateLimitAsDate || dateOfSprayAsDate.getDate() >= maxDateLimitAsDate.getDate() - 2){
    this.iDatePasser.dateOfSpray = this.datePipe.transform(new Date(), 'MM/dd/yyyy');
  }
}
    Login or Signup to reply.
  2. 0

    From your question What i get is that
    when you set iDatePasser.dateOfSpray = 15-08-2022 ,the data picker should changes accordingly and automatically set to 15-08-2022.

    I think I have answered other question related to this "clr-date-container".
    There also I found the solution to be using a DATE PIPE.

    so you have to write it as (This will give an error.Please continue to read)

    
    <input id="idDateOfSprayValue" class="clr-control-container" clrDate type="time" placeholder="" [(ngModel)]="iDatePasser.dateOfSpray |  date : 'yyyy-MM-dd'"  name="dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)"
        value="2021-07-21" [min]="minDateLimit" [max]="maxDateLimit" [disabled] = "!siteSelectionState"/>

    **NOTE:**the above will give you an error of using pipe with ngModel two way binding like below.

    Cannot have a pipe in an action expression at column

    The Work around for this is from ngModel basics

    [(ngModel)]=[ngModel]+(ngModelChange)

    CORRECT CODE IS BELOW

    
    <input id="idDateOfSprayValue" class="clr-control-container" clrDate type="time" placeholder="" [ngModel]="iDatePasser.dateOfSpray |  date : 'yyyy-MM-dd'"  name="dateOfSpray" (ngModelChange)="iDatePasser.dateOfSpray=$event;onDateOfSpraySet($event)"
        value="2021-07-21" [min]="minDateLimit" [max]="maxDateLimit" [disabled] = "!siteSelectionState"/>

    [ngModel]="iDatePasser.dateOfSpray | date : ‘yyyy-MM-dd’"
    (ngModelChange)="iDatePasser.dateOfSpray=$event;"

    the above two will give the effect of [(ngModel)].
    You can add onDateOfSpraySet($event) with ngModelChange like I have written on Code.

    Sorry if i made it confusing.(Just describing all details thinking someone may want that & Since I have answered two of your questions related to the same problem solved by same method ).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search