Скачать или смотреть #5: Customize ngx - bootstrap DatePicker

In this video we will discuss customising the ngx-bootstrap datepicker component with an example.

Changing ngx-bootstrap datepicker theme : the Datepicker is using the default green theme. We want to change it to differebt theme. ngx-bootstrap datepicker component has the following 6 color schemes.
theme-default
theme-green
theme-blue
theme-dark-blue
theme-red
theme-orange

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

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.

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 and so on.
minDate: new Date(2018, 0, 1),
maxDate: new Date(2018, 11, 31),

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

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.

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

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...)

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

To use disable property set [isDisabled]="true"
To use outsideclick propery set that property to boolean value as you want.
-----------------------------------------------------------------------------------------------------------
Angular CRUD Tutorial
   • How to Create Web API Project & Entity Dat...  

Angular 6 : User Registration
   • Angular 6 - User Registration  

Angular 6 Tutorial
   • Angular 6 Tutorial  

Angular 4 Tutorial
   • Angular 4 Tutorial  

React JS with Web API Tutorial
   • React JS With Web API  

ASP .Net Core Web API Complete Tutorial
   • ASP.NET Core Web API Complete Tutorial  

ASP .Net Web API Step by Step
   • Asp.Net Web Api