Customise ngx-bootstrap datepicker

Suggested Videos
Part 9 - Angular bootstrap select list | Text | Slides
Part 10 - Angular select options from array | Text | Slides
Part 11 - Angular datepicker tutorial | Text | Slides

In this video we will discuss customising the ngx-bootstrap datepicker component with an example. This is continuation to Part 11. Please watch Part 11 from Angular CRUD tutorial before proceeding.


At the moment we have date range picker. Use bsDatepicker directive instead of bsDaterangepicker directive on the input element so we can capture single date i.e the Date of Birth of the employee.

<div class="form-group">

  <label for="dateOfBirth">Date of Birth</label>

  <input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="dateOfBirth"

          class="form-control" type="text" bsDatepicker  />

</div>

Changing ngx-bootstrap datepicker theme : At the moment, the Datepicker is using the default green theme. We want to change it to dark-blue theme, so it matches with the rest of the form. As of this recording ngx-bootstrap datepicker component has the following 6 color schemes.

1. theme-default
2. theme-green
3. theme-blue
4. theme-dark-blue
5. theme-red
6. theme-orange

We can change the default colour-scheme, by manipulating containerClass property in bsConfig object. Here are the steps.

Step 1 : Make the following changes in CreateEmployeeComponent class (i.e create-employee.component.ts file)

// Import BsDatepickerConfig type. This is the Config object for datepicker. Using this

// config object we can set minDate, maxDate, whether to show/hide week numbers and

// change the color theme using the containerClass property.

import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

// In the CreateEmployeeComponent class make the following changes

export class CreateEmployeeComponent implements OnInit {

  // create a property of type Partial<BsDatepickerConfig>

  datePickerConfig: Partial<BsDatepickerConfig>;

  // In the constructor set containerClass property to the preferred theme

  constructor() {

    this.datePickerConfig = Object.assign({}, { containerClass: 'theme-dark-blue' });

   }

   // Rest of the code...

}

Please note : 
We are using the TypeScript partial type here to set only the "containerClass" property of BsDatepickerConfig object. To learn more about the partial type please refer to the following article.
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html

Object.assign() copies the property values from one or more source objects to a target object. The target object is the first parameter and the rest are the sources. Object.assign() is useful for merging objects or cloning them shallowly.

Step 2 : In the view template (i.e in create-employee.component.html file) bind the "datePickerConfig" property in the component class we created above in Step 1, to the bsConfig input property.

<div class="form-group">

  <label for="dateOfBirth">Date of Birth</label>

  <input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="dateOfBirth"

          class="form-control" type="text" bsDatepicker [bsConfig]="datePickerConfig" />

</div>

At this point, you should see the Datepicker using the dark-blue theme colour as shown below.


Showing or hiding week numbers : By default, the weeknumber are displayed. If you want to hide them, all you have to do is set "showWeekNumbers" boolean property to false in the config object as shown below. 

constructor() {

  this.datePickerConfig = Object.assign({},

    {

      containerClass: 'theme-dark-blue',

      showWeekNumbers: false

    });

}

You can find all the properties of the config object at the following page. 
https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/bs-datepicker.config.ts

Along the same lines we can also set the min and max dates. Please note that the month numbers start from 0 and not 1. So for January it is 0, February it is 1, so on and so forth.

constructor() {

  this.datePickerConfig = Object.assign({},

    {

      containerClass: 'theme-dark-blue',

      showWeekNumbers: true,

      minDate: new Date(2018, 0, 1),

      maxDate: new Date(2018, 11, 31),

    });

}

To change the date format, use dateInputFormat property of the config object. 

constructor() {

  this.datePickerConfig = Object.assign({},

    {

      containerClass: 'theme-dark-blue',

      showWeekNumbers: true,

      minDate: new Date(2018, 0, 1),

      maxDate: new Date(2018, 11, 31),

      dateInputFormat: 'DD/MM/YYYY'

    });

}

To set a default date, create a property (dateOfBirth) in the component class and set it to the default value you want. Since we are using 2 way databinding, the defualt date is displayed in the corresponding input field when them form loads. In this case we have set default date to January 30, 2018.

dateOfBirth: Date = new Date(2018, 0, 30);

At the moment, the "Date of Birth" input element is spanning across the entire width of the form. There are sevral options to limit it's width. One option is to use the Bootstrap row and grid classes (Example: col-md-4, col-md-5, etc...)

<div class="row">

  <div class="form-group col-md-4">

    <label for="dateOfBirth">Date of Birth</label>

    <input id="dateOfBirth"  name="dateOfBirth" [(ngModel)]="dateOfBirth"

           class="form-control" type="text" bsDatepicker

           [bsConfig]="datePickerConfig" />

  </div>

</div>

To control the placement of the Datepicker use the placement property. The allowed values are "top" | "bottom" | "left" | "right". The default is "bottom".

For our form we do not want a default date to be set. So please remove the dateOfBirth property from the component class. We also do not want minDate and maxDate, so delete these properties as well from the datePickerConfig object. Also delete, showWeekNumbers property as it is set to true by default. This means our datePickerConfig object in the constructor has just 2 properties (dateInputFormat and containerClass)

constructor() {

  this.datePickerConfig = Object.assign({},

    {

      containerClass: 'theme-dark-blue',

      dateInputFormat: 'DD/MM/YYYY'

    });

}