CODEWITHSUNDEEP
angularjsdatepickerangular-ui-bootstrap
Ravi Kapula
Ravi Kapula

Reputation: 11

5 weeks datepicker in AngularJS

The datepicker (ui.bootstrap.datepicker) in AngularJS is presented with a 6-week calendar for a specified month.

AngularJS <code>6</code> week datepicker

How can we change it to a 5 weeks per month datepicker by default, and use 6 week rows only if necessary?

    <input type="text" class="form-control datedesktop"
            uib-datepicker-popup="{{format}}"
            ng-model="dt"
            is-open="popup1.opened"
            datepicker-options="dateOptions"
            ng-required="true"
            show-button-bar="true"
            show-weeks="false"
            alt-input-formats="altInputFormats"
            on-open-focus="false"
            close-text="X"
            clear-text=""
            ng-click="open()" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-calendar" ng-click="open()">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>

Upvotes: 1

Views: 1528

Answers (2)

Julia
Julia

Reputation: 1321

Run into similar issue when had to hide row that doesn't belong to current month. Maybe my solution will be useful for someone. UI Bootstrap version 2.5.0

Overwrited uib/template/datepicker/day.html template.

"<tr class=\"uib-weeks\" ng-repeat=\"row in rows track by $index\" role=\"row\">\n"

changed to

"<tr class=\"uib-weeks\" ng-repeat=\"row in rows track by $index\" role=\"row\" ng-hide=\"row[0].secondary && row[6].secondary\">\n"

row[0].secondary && row[6].secondary condition checks if first and last days in week doesn't belong to current month.

Upvotes: 0

ramamoorthy_villi
ramamoorthy_villi

Reputation: 2055

as @svarog mentioned override the template is best approach.

There is no option given to change to 5 weeks.

if you see datepicker library ( line number 399 ) 

// 42 is the number of days on a six-week calendar
    var days = this.getDates(firstDate, 42);

No.of weeks 42 (6 weeks * 7 days) is hardcoded. if you replace 42 by 35, (5 weeks * 7 rows ) this will gives you 5 weeks calendar.

Upvotes: 1

Related Questions