Customization

13 Sep 20175 minutes to read

DatePicker provides more flexible way to customize the below listed properties.

Set Dimension

By default DatePicker has standard height and width (height: ‘30px’ and width: ’143px’). You can change this height and width by using height and width property respectively.

HTML

<div align="center">
    <input type="text" id="datepick" ej-datepicker [(ngModel)]="value"  height="50px" width="300px"/>
    </div>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './rtl.component.html'
})
export class RTLComponent {
  value: string;
  constructor() {
    this.value = Date();
  }
}

Mostly dimension plays a vital role in web application to get responsive layout in all devices. DatePicker is a form control and you can make it as responsive by specifying its width as “100%”.

HTML

<div align="center">
    <input type="text" id="datepick" ej-datepicker [(ngModel)]="value" width="100%"/>
    </div>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './rtl.component.html'
})
export class RTLComponent {
  value: string;
  constructor() {
    this.value = Date();
  }
}

Show Footer

You can show or hide the footer of DatePicker calendar by using showFooter property.

HTML

<div align="center">
    <input type="text" id="datepick" ej-datepicker [(ngModel)]="value" [(showFooter)]="showfooter"/>
    </div>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './rtl.component.html'
})
export class RTLComponent {
  value: string;
  showfooter: boolean;
  constructor() {
    this.value = Date();
    this.showfooter = false;
  }
}

NOTE

Footer contains the today button to quickly navigate to the current date. By turning off it, you have to select current date by manually.

Show Popup Button

DatePicker textbox contains a button to open the DatePicker calendar. You can hide this DatePicker calendar button using showPopupButton value as false.

By hiding this button, you can open the DatePicker by focusing the input textbox element itself.

HTML

<div align="center">
    <input type="text" id="datepick" ej-datepicker [(ngModel)]="value"  [(showPopupButton)]="showpopupbutton"/>
    </div>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './rtl.component.html'
})
export class RTLComponent {
  value: string;
  rtl: boolean;
  showpopupbutton: boolean;
  constructor() {
    this.value = Date();
    this.rtl = true;
    this.showpopupbutton = false;
  }
}

Show Other Months

You can show or hide the other month days from DatePicker calendar by using showOtherMonths property.

HTML

<div align="center">  
    <input type="text" id="datepick" ej-datepicker [(ngModel)]="value"  [(showOtherMonths)]="showothermonths"/>
    </div>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './rtl.component.html'
})
export class RTLComponent {
  value: string;
  showothermonths: boolean;
  constructor() {
    this.value = Date();
    this.showothermonths = false;
  }
}

Highlight Special Date

DatePicker allows you to highlight the special dates in DatePicker calendar by using specialDates property. It receives the array of JSON data, in which the data should contain the date value, icon CSS class and tooltip as field values with any names.

And you can map those above field names to DatePicker by using fields property, which holds following members.

Members	Description
date	It specifies the mapping field of special date
iconClass	It specifies the mapping field of icon CSS class.
tooltip	It specifies the mapping field of tool tip text.

HTML

<div align="center">
    <input type="text" id="datepick" ej-datepicker [(ngModel)]="today"  [(specialDates)]="special" [(cssClass)]= "specialClass"/>
    </div>

HTML

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './special-dates.component.html',
  styleUrls: ['./common.component.css'], encapsulation: ViewEncapsulation.None,
})
export class SpecialDatesComponent {
  special: Object;
  year: number;
  today: any;
  month: number;
  specialClass: string;
  constructor() {
    this.specialClass = 'splClass';
    this.today = new Date();
    this.year = this.today.getFullYear();
    this.month = this.today.getMonth();
    this.special = [{ date: new Date(this.year, this.month, 8), tooltip: 'In Australia', iconClass: 'flags sprite-Australia' },
        { date: new Date(this.year, this.month, 21), tooltip: 'In France', iconClass: 'flags sprite-France' },
        { date: new Date(this.year, this.month, 17), tooltip: 'In USA', iconClass: 'flags sprite-USA' },
        { date: new Date(this.year, this.month + 1, 15), tooltip: 'In Germany', iconClass: 'flags sprite-Germany' },
        { date: new Date(this.year, this.month - 1, 22), tooltip: 'In India', iconClass: 'flags sprite-India' }
    ];
  }
}