CODEWITHSUNDEEP
angularjsdatepickerangular-ui-bootstrap
Dipesh Gandhi
Dipesh Gandhi

Reputation: 765

Remove week column and button from Angular-ui bootstrap datepicker

I am using angular-ui bootstrap datepicker. Now I need to remove #(week) column and week button from datepicker. This date picker is being used in many forms of my application. I want to remove week column from all of them.

For this, I had globally configured the datepickerConfig (show-weeks) but still it is not working. Can anyone please let me know I am doing wrong with this?

Upvotes: 22

Views: 28033

Answers (6)

suresh
suresh

Reputation: 73

This should work

<input type="text" placeholder="mm/dd/yyyy" [bsConfig]="{showWeekNumbers:false}" />

or

<datepicker show-weeks='false' />

Upvotes: 0

shruti
shruti

Reputation: 5963

For datepicker in popup, datepicker-options attribute has value dateOptions in which json can be added for any datepicker settings as shown in the HTML below.

<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" **datepicker-options="dateOptions"** date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

In javascript this is given

 $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1,
    
  };

just add showWeeks:false in dateOptions like this,

 $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1,
    showWeeks:false
  };

or you can add like this 'show-weeks':'false' . Demo is shown at plunker [http://plnkr.co/edit/qbp3IObj13op2RS17IEg?p=preview][1]

Upvotes: 12

Suresh Velusamy
Suresh Velusamy

Reputation: 2398

If angular bootstrap ui version is 0.14.3, use the following 

app.config(function (uibDatepickerConfig) {
    uibDatepickerConfig.showWeeks = false;
    uibDatepickerConfig.showButtonBar = false;
});

Upvotes: 4

user45205
user45205

Reputation: 21

To hide the weeks number you can use two different way.

First one: adding into controller

$scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1   };

or Second way: add attribute in input field

show-weeks="'false'"

Upvotes: 0

ValentinH
ValentinH

Reputation: 958

If you want to do it directly in the template, simply add the following attribute to the input:show-weeks="false".

Upvotes: 0

Gm0t
Gm0t

Reputation: 703

Please, look at this example: http://plnkr.co/edit/6i4G7JkvBiWXZYlrV2GL?p=preview

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

Upvotes: 34

Related Questions