prithvi prithvi - 5 months ago 30
AngularJS Question

Unable to Hide the Week Column Angular UI Bootsrap

I am new to Angular JS and I am having trouble with hiding the Week Column in angular UI bootstrap Date picker popup. I changed the value to false in the Angular Js file but the week column doesn't get hidden. below is the link to plunker.

I would also like to know if the styling of the calendar can be changed so that I can split the month and year as 2 separate drop down menu's.

plunker link

$scope.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: false


In ui-bootstrap-tpls-2.1.3.js

.constant('uibDatepickerConfig', {
datepickerMode: 'day',
formatDay: 'dd',
formatMonth: 'MMMM',
formatYear: 'yyyy',
formatDayHeader: 'EEE',
formatDayTitle: 'MMMM yyyy',
formatMonthTitle: 'yyyy',
maxDate: null,
maxMode: 'year',
minDate: null,
minMode: 'day',
monthColumns: 3,
ngModelOptions: {},
shortcutPropagation: false,
showWeeks: true,   <<---------- SET THIS AS FALSE
yearColumns: 5,
yearRows: 4

set showWeeks as false.

You can right-click on week number and do Inspect element to see how it is getting populated.

For eg:

<td ng-if="showWeeks" class="text-center h6 ng-scope">
  <em class="ng-binding">38</em>

Here you can see ng-if directive which us rendering the week column.

For changing the styles you can either change the existing directive styling or you can find some other custom directive with desired styling. There are plenty of directive, try to google (its a good habit ;) ) and let me know if you cant find one. I'll provide some links then.