C#.NET, ADO.NET, ASP.NET, JavaScript, JQuery, AngularJS

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

In this article i am going to show how to remove footer 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

If you observe above angular ui date picker image you can see that it is also showing a footer which contains options to choose Today, Weeks and Clear.

We can remove this footer from angular ui bootstrap date picker using following code

if you want to remove footer globally you can use following AngularJS code

yourApp.config(function (datepickerConfig, datepickerPopupConfig) {
    // datepickerConfig.showWeeks = false;
    // datepickerPopupConfig.toggleWeeksText = null;
    datepickerPopupConfig.showButtonBar = false;
});

Or if you want to remove footer for only one specific date picker you can do using following code

<input type="text" data-datepicker-popup show-button-bar="false" />

In this way you can remove footer from angular ui bootstrap datepicker

To remove week column from Angularjs ui bootstrap date picker check this post http://www.coding-issues.com/2015/10/remove-week-column-and-button-from-angular-ui-bootstrap-datepicker.html