Miscellaneous

Start Day

By default DatePicker calendar starts with “Sunday” and ends with “Monday”. You can redefine this start day by using startDay property.

Refer below code to start Wednesday as start day.

  • html
  • <div align="center">
        <input type="text" id="datepick" ej-datepicker [(ngModel)]="value" [startDay]="start"/>
        </div>
  • html
  • import { Component } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './rtl.component.html'
    })
    export class RTLComponent {
      value: string;
      start: number;
      constructor() {
        this.value = Date();
        this.start = 2;
      }
    }

    Step Months

    DatePicker calendar allows you to quick navigate back and forth from one month to previous or next month by clicking the arrow button. By default it’s navigate one by one month. You can also navigate by skipping months in odd or even or any count by using stepMonths property.

  • html
  • <div align="center">
        <input type="text" id="datepick" ej-datepicker [(ngModel)]="value" [stepMonths]="start"/>
        </div>
  • html
  • import { Component } from '@angular/core';
    
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './rtl.component.html'
    })
    export class RTLComponent {
      value: string;
      start: number;
      constructor() {
        this.value = Date();
        this.start = 2;
      }
    }

    Read Only

    You can make DatePicker as read only by setting readOnly property as true. It allows only to read the value and it can’t be changed by interaction.

  • html
  • <div align="center">
        <input type="text" id="datepick" ej-datepicker [(readOnly)]="read"/>
        </div>
  • html
  • import { Component } from '@angular/core';
    @Component({
      selector: 'ej-app',
      templateUrl: './rtl.component.html'
    })
    export class RTLComponent {
        read: boolean;
      constructor() {
          this.read = true;
      }
    }

    Enable or Disable

    You can enable or disable the DatePicker textbox by using enabled property. In inline mode DatePicker calendar also gets enabled or disabled.

  • html
  • <div align="center">
        <input type="text" id="datepick" ej-datepicker [(enabled)]="enable"/>
        </div>
  • html
  • import { Component } from '@angular/core';
    @Component({
      selector: 'ej-app',
      templateUrl: './rtl.component.html'
    })
    export class RTLComponent {
      enable: boolean;
      constructor() {
        this.enable = false;
      }
    }