current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 16 down vote favorite
2

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?

share|improve this question
up vote 31 down vote accepted

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

angular.module('app', ['ui.bootstrap'])
  .config(function (datepickerConfig) {
      datepickerConfig.showWeeks = false;
    });
share|improve this answer
    
Thanks It's working. Do you know how to hide only weeks button from bottom? – Dipesh Gandhi Dec 20 '13 at 5:27
2  
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 %) – Gm0t Dec 20 '13 at 7:00
    
Thanks, It's okay for me. – Dipesh Gandhi Dec 21 '13 at 18:33
up vote 9 down vote

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]

share|improve this answer
    
how to remove time – vinodh Oct 27 '14 at 5:51
    
This should be the accepted answer, because it only removes the weeks from this datepicker, not all datepickers in the application. – Claus Conrad Dec 22 '14 at 12:17
1  
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. – Schokea Mar 2 at 12:12
    
Angular 1.5.6 I also had to remove the single quotes for it to work. – Adrian Carr Jun 24 at 19:17
up vote 2 down vote

If angular bootstrap ui version is 0.14.3, use the following 

app.config(function (uibDatepickerConfig) {
    uibDatepickerConfig.showWeeks = false;
    uibDatepickerConfig.showButtonBar = false;
});
share|improve this answer
    
showButtonBar is set in the PopupConfig: uibDatepickerPopupConfig.showButtonBar = false; – Jensen Apr 12 at 13:20
up vote 0 down vote

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

share|improve this answer
2  
I've been trying to use the show-weeks attribute and it doesn't seem to work for me :( – robert.bo.roth May 12 '14 at 16:03
1  
This doesn't work – Ronnie Overby May 17 '14 at 0:10
    
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. – ValentinH May 17 '14 at 6:52
1  
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. – jeveloper Oct 15 '14 at 14:55
up vote 0 down vote

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'"
share|improve this answer
2  
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. – jeveloper Oct 15 '14 at 14:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.