Remove week column and button from Angular ui bootstrap datepicker

In this article i am going to explain how to remove weeks column and button from Angular ui bootstrap date picker.

Assume you have following angular ui bootstrap date picker

<input type="text" data-datepicker-popup data-ng-model="dateOfBirth" />

above code renders date picker as shown below 

To remove weeks column from angular ui bootstrap date picker use the following code

angular.module('app', ['ui.bootstrap'])
  .config(function (datepickerConfig) {
      datepickerPopupConfig.toggleWeeksText = null;
      datepickerConfig.showWeeks = false;
    });

above code removes the weeks column from angular ui bootstrap date picker.

datePickerConfig.showWeeks = false removes week column from date picker and datePickerPopupConfig.toggleWeeksText = null removes the week button from date picker.

You also need to add the following css 

ul[datepicker-popup-wrap] > li > .btn-group > button.btn-info {

        display: none;

      }  

Above code removes weeks column and button from all instances of date picker. If you want to remove them only for one instance of date picker you can use the following code

<input type="text" data-datepicker-popup data-show-weeks="false" data-ng-model="dateOfBirth" />

You can check this Plunker for above code examples.

In this way we can remove weeks column and button from Angular ui bootstrap date picker.

To know how to remove footer from angular ui bootstrap date picker visit remove footer from Angular ui bootstrap datepicker

For more posts on AngularJS visit AngularJS