• Monday , 25 May 2020

Customise ngx bootstrap datepicker

Code Canyon
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

3d Ocean

Related Posts

25 Comments

  1. Neha Sharma
    December 18, 2019 at 17:09

    hello, thanks for explaning it so well, quick question, is it possible for the bsDatePicker component to accept text strings like "TBD" or something too? I mean so it doesnt validate it?

  2. Ravindra patel
    December 18, 2019 at 17:09

    Hey any one have idea about how to put gif icon on date picker

  3. Alex Ponce
    December 18, 2019 at 17:09

    Great tutorial. Thank you!

  4. Amiya Gupta
    December 18, 2019 at 17:09

    Sir, Plz help Me , I need date like : 23/12/2018

    But its return 'Sun Dec 23 2018 00:00:00 GMT+0530 (India Standard Time) ' format. plz. help me.

  5. Dheeraj gupta
    December 18, 2019 at 17:09

    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

  6. HARSIMRAN kaur
    December 18, 2019 at 17:09

    hi, can we open the calendar on a click of button .

  7. Tushar Gupta
    December 18, 2019 at 17:09

    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

  8. Belmiris
    December 18, 2019 at 17:09

    Thank you.

  9. Hao Pham Phung
    December 18, 2019 at 17:09

    Hi Kudvenkat, how could we check invalid datet input to the date field?

  10. Weird Awesome
    December 18, 2019 at 17:09

    Hi is it possible to change the colour of the cells. Also can i use my custom background colour instead of the predefined themes.

  11. Vinod kumar Mandati
    December 18, 2019 at 17:09

    Sir can you explain , how to remove last row in calendar

  12. Sudarshan Neupane
    December 18, 2019 at 17:09

    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.

  13. Imadabathuni Gopikrishn
    December 18, 2019 at 17:09

    Is there any option to show the date picker with out clicking on it, like autoopen

  14. GeoffJOlly Geoff
    December 18, 2019 at 17:09

    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

  15. Mohamed Saleem
    December 18, 2019 at 17:09

    Nice Tutorial ..

  16. Abhilash Gudapati
    December 18, 2019 at 17:09

    Cool, that was really an useful tutorial for customizing the Date. Would like to request for kind of input validation too for not accepting the characters & spl characters.

  17. Tharun Tez
    December 18, 2019 at 17:09

    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

  18. Waleed Shaukat
    December 18, 2019 at 17:09

    Thank you so much for this video. Watching this solved many of my issues trying to customize the datepicker!

  19. Shailesh Bhat
    December 18, 2019 at 17:09

    Thank you so much Sir for posting this series..I have posted the problem facing, while doing angular project using Visual Studio IDE in Stack overflow(https://stackoverflow.com/questions/48417205/if-the-content-type-is-json-data-is-not-going-to-webapi-post-action-in-angular)..Can anyone help me out

  20. Amar kumar
    December 18, 2019 at 17:09

    Excellent video for angular crud tutorial! curiously waiting for next video sir

  21. Rizwan Rahim
    December 18, 2019 at 17:09

    Please bring a video serious on NoSQL DB

  22. Puneet Kankar
    December 18, 2019 at 17:09

    This article is steps right or not please comment this is written by me http://www.c-sharpcorner.com/article/angular-5-crud-opration-using-nodeexpressmongo/

  23. Yeabsira Gashaw
    December 18, 2019 at 17:09

    Please Sir , do the tutorial about how to retrieve the data from Database …Thanks For the Great Tutorials

  24. Irfan H Y
    December 18, 2019 at 17:09

    sir, i m using this date picker in reactive form but unable to do validation for this please show!! it is showing er msg like date cannot be null before it load

  25. Riyaz Ahmad
    December 18, 2019 at 17:09

    Hi sir.can we include the icon..so that user can click the icon and select the date?

Leave A Comment

You must be logged in to post a comment.