Disable specific days of the week on WjInputDate Angular control

Disable specific days of the week on WjInputDate Angular control

Posted by: ken on 8 April 2019, 3:05 pm EST

• 

  ken

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 April 2019, 3:05 pm EST

  I want to prevent the user from selecting certain days of the week on a WjInputDate, so something like

  <wj-input-date [(value)]="myDate" [days]="{saturday: false, sunday: false}"></wj-input-date>
  

  Is there any way to do this, or maybe through the TypeScript code?

• 

  ken

  • Post Options:
  • Link
    Copy

  Posted 8 April 2019, 5:33 pm EST

  Side note: is this forum ever going to get the ability to edit/delete initial posts?

  I found the “itemValidator” property, which seems to do what I want if I hard-code the days, but I’m having trouble getting it to work with my asynchronously loaded configuration. The validator is only running once, before the configuration loads, but somehow if I try to refresh the control after the configuration loads it says it isn’t defined yet.

  HTML:

  
  <div *ngIf="config">
      <wj-input-date #dateElement [(value)]="myDate" [itemValidator]="disableDay"></wj-input-date>
  </div>
  
  

  TS:

  
  @ViewChild("dateElement") dateElement: WjInputDate
  config: any
  myDate: Date
  
  ngOnInit () {
      // Config values come from Firebase
      this.myService.getConfig().subscribe(config => {
          this.config = config
  
          // If I uncomment this, I get an error that dateElement is undefined
          // this.dateElement.invalidate()
      })
  }
  
  disableDay (date: Date): boolean {
      // If I uncomment this, it works fine
      // return ![0,6].includes(date.getDay())
  
      // This is always undefined when it runs
      console.log(this.config)
  
      if (this.config) {
          return !this.config.disableDays.includes(date.getDay())
      } else {
          return true
      }
  }
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 9 April 2019, 8:17 am EST

  Hi,

  >> this.config is undefined
  
  This is happening because inside disableDay method, the context of ‘this’ is changed to the InputDate control. Therefore, config is undefined inside disableDay method. To solve this issue, use the bind method to bind ‘this’ to the specific object:

  <wj-input-date [itemValidator]="disableDate"></wj-input-date>
  
  disableDate = this.validateDate.bind(this);
  
  validateDate(date: Date) {
       // code for validation
  }
  
  

  >> this.dateElement is undefined
  
  The issue is arising because the inputDate control is hosted inside a container control by *ngIf, so the control is not created until the config is set. Now in the code, first we are setting this.config and then accessing the this.dateElement but the issue is even after setting this.config before accessing the dateElement, the dateElment is not created until the angular’s next change detection cycle. Further, we do not need to call invalidate on the control, validator will be called by the input-date control whenever it is required.
  
  Please refer to the sample below:
  
  https://stackblitz.com/edit/ckkyne-ujrkju

  >>Side note: is this forum ever going to get the ability to edit/delete initial posts?
  
  Sorry for the inconvenience caused and thanks for your valuable feedback. We will forward it to the concerned team.

  ~Sharad