D4mations.com

Customise ngx bootstrap datepicker

[ad_1]
https://i.ytimg.com/vi/R_QcssTIEr0/hqdefault.jpg



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

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

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

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

Text version of the video
http://csharp-video-tutorials.blogspot.com/2018/01/customise-ngx-bootstrap-datepicker.html

Slides
http://csharp-video-tutorials.blogspot.com/2018/01/customise-ngx-bootstrap-datepicker_18.html

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

Original source

d4mer

,
, , , , , , , ,

25 responses to “Customise ngx bootstrap datepicker”

  5. Hi Venkat,

    Thanks so much for these tutorials, it really helps a lot.

    Following are question regarding ngx – bootstrap

    1. Calendar doesn't open when textbox get focus using tab key.
    2. when reading date from textbox value is something else for example date format is dd-MM-yyyy and I choose 01-06-219, while reading values I am getting 2 Jun 2019 and appended string. How to get exact value that is in the textbox.

    Please suggest.
    Thanks in advance.

    Regards
    Dheeraj

  7. Really good tutorial. I have a query in bsRangedatepicker, Suppose current month is February, then bs rangedatepicker shows February and March months. what I want is, it should display January and February months. i.e: previous and current months.
    Please tell me how to implement that

  12. Hi sir thank you for the video. I have a problem and in your video also shows the same thing. The date format is fine while displaying the data on input field but while submitting the form it shows us different date format like your bottom of the screen where you print the form data.

  14. sir i have create this application in dot net core angular but it showing me error when click on textbox for dob BsDatepickerContainerComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'schedule' of undefined
    at ObserveOnSubscriber.scheduleMessage (observeOn.js:99)
    at ObserveOnSubscriber._error (observeOn.js:105)
    at ObserveOnSubscriber.Subscriber.error (Subscriber.js:105)
    at BehaviorSubject.Observable._trySubscribe (Observable.js:177)
    at BehaviorSubject.Subject._trySubscribe (Subject.js:97)
    at BehaviorSubject.Observable.subscribe (Observable.js:160)
    at ObserveOnOperator.call (observeOn.js:74)
    at AnonymousSubject.Observable.subscribe (Observable.js:157)
    at ScanOperator.call (scan.js:72)
    at AnonymousSubject.Observable.subscribe (Observable.js:157)

    what to do

  17. Thanks so much. I have a question. how should I stop browser doing automatic date conversion according to timezone .. I am able to send the selected date in datepicker to server but when I come back to this page, I see the date is changed in UI according to timezone. it is using UTCDate() by default

Leave a Reply