Remove week column and button from Angular-ui bootstrap datepicker

Question

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?

Gm0t · Accepted Answer · 2013-12-19 15:04:25Z

34

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

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

answered Dec 19, 2013 at 15:04

Gm0t

7037 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dipesh Gandhi Over a year ago

Thanks It's working. Do you know how to hide only weeks button from bottom?

Gm0t Over a year ago

I looked at source for datepickerPopup, there is no possible way for doing this. You can use dirty hack and hide button with css instead, something like this: plnkr.co/edit/6i4G7JkvBiWXZYlrV2GL?p=preview ... but it's a very dirty hack %)

Dipesh Gandhi Over a year ago

Thanks, It's okay for me.

shruti · Accepted Answer · 2021-09-29 14:44:10Z

12

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]

edited Sep 29, 2021 at 14:44

answered Jul 20, 2014 at 17:12

shruti

5,9631 gold badge17 silver badges12 bronze badges

4 Comments

Claus Conrad Over a year ago

This should be the accepted answer, because it only removes the weeks from this datepicker, not all datepickers in the application.

Schokea Over a year ago

Thanks for the answer I think it's a cleaner solution than the accepted answer however showWeeks:'false' wouldn't work for me. I had to remove the single quotes and then it worked.

Adrian Carr Over a year ago

Angular 1.5.6 I also had to remove the single quotes for it to work.

Rahul Modi Over a year ago

Thanks for help, however without single quotes solution is work. Thus, showWeeks:false is work in place of showWeeks:'false'.

Bartłomiej Semańczyk · Accepted Answer · 2015-12-05 08:20:48Z

4

If angular bootstrap ui version is 0.14.3, use the following

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

edited Dec 5, 2015 at 8:20

Bartłomiej Semańczyk

62k52 gold badges257 silver badges408 bronze badges

answered Dec 5, 2015 at 7:56

Suresh Velusamy

2,40820 silver badges24 bronze badges

1 Comment

Jensen Over a year ago

showButtonBar is set in the PopupConfig: uibDatepickerPopupConfig.showButtonBar = false;

ValentinH · Accepted Answer · 2014-04-30 13:23:41Z

0

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

answered Apr 30, 2014 at 13:23

ValentinH

9581 gold badge12 silver badges31 bronze badges

3 Comments

robert.bo.roth Over a year ago

I've been trying to use the show-weeks attribute and it doesn't seem to work for me :(

ValentinH Over a year ago

Well, I have it working at work but I can't reproduce in the demo plunker of documentation. It does work with the inline calendar but does't work for the popup. It might be linked with this issue: github.com/angular-ui/bootstrap/issues/1132 I'll check on Monday my code to see how I did it.

jeveloper Over a year ago

THIS would only work if you are using directive as an element such as <datepicker show-weeks='false' /> if you are using <input , that attribute will not be read.

user45205 · Accepted Answer · 2014-07-01 09:00:40Z

0

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'"

answered Jul 1, 2014 at 9:00

user45205

214 bronze badges

1 Comment

jeveloper Over a year ago

THIS would only work if you are using directive as an element such as <datepicker show-weeks='false' /> if you are using <input , that attribute will not be read.

suresh · Accepted Answer · 2023-03-06 11:21:51Z

0

This should work

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

or

<datepicker show-weeks='false' />

answered Mar 6, 2023 at 11:21

suresh

737 bronze badges

Collectives™ on Stack Overflow

Remove week column and button from Angular-ui bootstrap datepicker

6 Answers 6

3 Comments

4 Comments

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

4 Comments

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related