2

I am unable to use AngularJS' ui-bootstrap's datepicker in the month mode.

Here's a plunker.

Here's my template:

<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-app="TestApp">
    <div ng-controller="testController">

      {{dt}}
      <datepicker ng-model="dt.from" datepicker-mode="mode" min-mode="mode"></datepicker>
      <datepicker ng-model="dt.to" datepicker-mode="mode" min-mode="mode"></datepicker>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.25/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>

    <script src="script.js"></script>
  </body>

</html>

Here's my JS:

var app = angular.module('TestApp', ['ui.bootstrap'])

app.controller('testController', function($scope) {
  $scope.dt = {to: '', from: ''};
  $scope.mode = 'month';

})

Whenever I click on a month, it changes to the 'day' mode. This is working fine in the day mode.

1 Answer 1

1

Your code is working as-is with the latest version of Bootstrap UI (also requires a later version of Angular).

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>

Plunker

If upgrading is not an option then hard-coding min-mode to month also works.

<datepicker ng-model="dt.from" datepicker-mode="mode" min-mode="month"></datepicker>
<datepicker ng-model="dt.to" datepicker-mode="mode" min-mode="month"></datepicker>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.