angular ui.boostrap popup datepicker date-disabled not working

Question

This is my first angular js site so please excuse my ignorance.

I've added a ui.boostrap popup datepicker to my page which works perfectly except it appears the dateDisabled method never gets hit.

My markup looks like the following:

<input id="inputWeekEnding"
       type="text"
       class="form-control"
       uib-datepicker-popup="mediumDate"
       ng-model="vm.weekEnding"
       is-open="vm.weekEndingOpen.opened"
       ng-required="true"
       close-text="Close"
       date-options="vm.dateOptions"
       ng-change="vm.weekEndingChanged()"/>

and my controller:

vm.dateOptions = {
        dateDisabled: function (data) {
            var date = data.date,
                mode = data.mode;
            return (mode === 'day' && (date.getDay() !== 0));
        }
    };

I've even tried hardcoding the return true and still no dates are disabled. I've seen this work on a variety of different plunkers so I know it works. As mentioned my dateDisabled function never gets hit. I'm assuming it's ok as other methods of the calender get hit such as vm.weekEndingOpen.opened and vm.weekEndingChanged().

I'm wondering whether I've forgotten to add a script file. My scripts look like the following:

    <!-- Library Scripts -->
    <script src="scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script src="Scripts/angular-ui-router.js"></script>
    <script src="Scripts/angular-animate.js"></script>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

While I'm asking a datepicker question, I've noticed on other peoples plunkers that their date pickers look a little better, like the calendar has more shadows, perhaps it's the version I'm using. Also my days of the week are not showing, they're there but they don't show as I have a white background and the text is white.

My library versions are as follows:

<package id="Angular.UI.Bootstrap" version="1.3.3" targetFramework="net452" />
  <package id="AngularJS.Animate" version="1.5.5" targetFramework="net452" />
  <package id="AngularJS.Core" version="1.5.5" targetFramework="net452" />
  <package id="AngularJS.Resource" version="1.5.5" targetFramework="net452" />
  <package id="bootstrap" version="3.3.6" targetFramework="net452" />
  <package id="jQuery" version="1.9.1" targetFramework="net452" />

Not sure if this is relevant but I am getting failed gets looking for icons also: - http://localhost/TimeSheet.WebSite/fonts/glyphicons-halflings-regular.woff2 - http://localhost/TimeSheet.WebSite/fonts/glyphicons-halflings-regular.woff

Any help would be much appreciated.

score 2 · Answer 1 · answered Jun 07 '16 at 07:15

2

There isn't disabled attribute for datepicker. You should use datepicker-options:

<input datepicker-options="dateOptions" ... >   

 $scope.dateOptions = {
        dateDisabled: function (data) {
          var date = data.date,
          mode = data.mode;
          return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
        }
 };

Read the documentation: https://angular-ui.github.io/bootstrap/#/datepickerPopup

answered Jun 07 '16 at 07:15

Roman Koliada

4,286
2
30
59

Thanks @Roman, unfortunately I've tried this so I have exactly what you have and my method still doesn't get hit. – D34th Jun 08 '16 at 00:23
I've edited my post to what you've suggested and as per the documentation. – D34th Jun 08 '16 at 00:50
Thanks @Roman, I got it to work just as you (and the doco) suggested. I've marked yours as a correct answer but it won't show publically as I don't have high enough reputation yet. – D34th Jun 08 '16 at 01:24

angular ui.boostrap popup datepicker date-disabled not working

1 Answers1