Setting options to datepicker in angular-ui bootstrap

Question

I'm trying to use datepicker component from angular-ui bootstrap lib as descibed here: http://angular-ui.github.io/bootstrap/ And I try to set options for the popup picker and accoriding to the documentation I should pass options for datepicker as JSON using the datepicker-options attribute.

In my view I have:

        <div class="row">
        <div class="col-md-6">
            <p class="input-group">
                <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                <span class="input-group-btn">
                <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
            </p>
        </div>
    </div>

And in my controller I have:

    $scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};

    $scope.today = function() {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.showWeeks = false;

    $scope.clear = function () {
        $scope.dt = null;
    };

    $scope.toggleMin = function() {
        $scope.minDate = ( $scope.minDate ) ? null : new Date();
    };
    $scope.toggleMin();

    $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
    };

    $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
    };
    $scope.format = 'dd/MM/yyyy'

As you can see at the beginning I try to set the options:

 $scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};

however, it doesn't seem to work, the datepicker does not change. Any ideas what I'm doing wrong?

You're shadowing the first dateOptions with the second at the bottom. Have you tried combining the two asssignments into one object? — Patrick
– Patrick, Commented Apr 28, 2014 at 14:15
That's true, however, merging the two assignments did not help. — Jakub
– Jakub, Commented Apr 29, 2014 at 7:41

Jakub · Accepted Answer · 2014-04-29 09:30:08Z

12

I found the solution to this, I put the options as attributes, e.g.:

   <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2014-12-31'" datepickerOptions="dateOptions" ng-required="true" show-button-bar="false"/>

so I put show-button-bar as the attribute and not as a part of object passed to datepickerOptions.

answered Apr 29, 2014 at 9:30

Jakub

3,1398 gold badges46 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user227353 Over a year ago

datepickerOptions probably should be datepicker-options, but this solution does work.

Marcel · Accepted Answer · 2016-06-02 06:50:02Z

8

You are using dash-cased option names. These dash-cased names are only required when using them as single attributes on an element. i.e.

<input type="text" datepicker-popup="{{format}}" starting-day="1" ng-model="dt" >

However datepicker-options expects named options in json with camelCased format as following:

datepicker-options="{startingDay: 1, yearFormat: 'yy'}"

<input type="text" datepicker-popup="{{format}}" 
       datepicker-options="{startingDay: 1, yearFormat: 'yy'}" ng-model="dt" >

or

$scope.options = {
    'startingDay': 1,
    'yearFormat': 'yy'
}

<input type="text" datepicker-popup="{{format}}" 
       datepicker-options="{{options}}" ng-

The attribute starting-day="1" should also work on the datepicker input, as told at https://angular-ui.github.io/bootstrap/#/datepicker, but I can't seem to get that working (using version 0.12.1)

edited Jun 2, 2016 at 6:50

answered Mar 25, 2015 at 16:03

Marcel

1,5142 gold badges23 silver badges33 bronze badges

2 Comments

H Varma Over a year ago

what is the use of having yearFormat: 'yy', in options?

Marcel Over a year ago

@HVarma I do not know the use of the 'yy' option. It was just a (working) example. See docs.angularjs.org/api/ng/filter/date for available formats in angular. I used 'yy' because the default is already 'yyyy'. See angular-ui.github.io/bootstrap/#/datepicker for the defaults

Craig Sketchley · Accepted Answer · 2015-02-23 03:48:45Z

5

I know this an old question but thought I'd point out where you were probably having trouble.

In your controller you are assigning to $scope.dateOptions twice and therefore overwriting your first assignment.

So your initial assignment of:

$scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};

Is overwritten when you do this towards the end:

$scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1
};

answered Feb 23, 2015 at 3:48

Craig Sketchley

3303 silver badges14 bronze badges

Comments

Martin Bajcar · Accepted Answer · 2015-03-12 18:27:21Z

5

According to datePicker documentation, popup setting can be globally configured through the datepickerPopupConfig, so you have to add it into you controller.

yourApp.controller('YourController', function ($scope, datepickerPopupConfig) {
  datepickerPopupConfig.showButtonBar = true;
  datepickerPopupConfig.closeText = 'I am done';
  datepickerPopupConfig.clearText = 'Wipe it out';
}

Setting closeText doesn't work for some reason. I don't know why.

Example on Plunker for playing.

answered Mar 12, 2015 at 18:27

Martin Bajcar

1051 silver badge4 bronze badges

Comments

kazuar · Accepted Answer · 2014-09-08 15:16:46Z

1

datepicker-options was introduced in version 0.11 so make sure you are using angular-ui-bootstrap version 0.11 or higher

answered Sep 8, 2014 at 15:16

kazuar

1,1641 gold badge13 silver badges15 bronze badges

Comments

Andrei Cojea · Accepted Answer · 2016-05-10 09:47:21Z

0

Looks like your dateOptions object keys are not camelCased. Try this:

$scope.dateOptions = {
    'showButtonBar': 'false', 
    'closeText':'SomeText'
};

Html attributes should be dash-cased, like show-button-bar, or close-text, etc.

Notice the difference between the datepicker-options html attribute and the datepickerOptions javascript object.

answered May 10, 2016 at 9:47

Andrei Cojea

6656 silver badges17 bronze badges

Comments

Parzibyte · Accepted Answer · 2017-08-07 02:36:41Z

0

Just provide close-text, current-text and clear-text attributes in the input :)

<input type="text" uib-datepicker-popup ng-model="dt" is-open="popup2.isopen" datepicker-options="dateOptions" ng-required="true" close-text="your close text here" current-text="Your current text here (today for example)" clear-text="Your clear-text here"/>

answered Aug 7, 2017 at 2:36

Parzibyte

1,61616 silver badges21 bronze badges

Comments

bobvan · Accepted Answer · 2016-02-05 21:21:56Z

-1

The site is pretty lite on examples. For me, with version 1.1.1, I passed in the config object as an attrib:

datepicker-options="datepickerOptions"

And in the controller, was able to set some options:

$scope.datepickerOptions = {
    formatYear: 'yy',
    startingDay: 0,
    showWeeks: false
};

But 'showButtonBar' doesn't cooperate, so looking through the code I saw 'uibDatepickerPopupConfig'. I pass that in and and set it separately and it works:

.controller('DatepickerCtrl', function ($scope, uibDatepickerPopupConfig){

    uibDatepickerPopupConfig.showButtonBar = false;

With 'datepickerPopupConfig' I get the provider error:

Unknown provider: datepickerPopupConfigProvider <- datepickerPopupConfig

answered Feb 5, 2016 at 21:21

bobvan

2513 silver badges9 bronze badges

2 Comments

Tristan Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review

bobvan Over a year ago

I was just expanding on previous answers with some details more relevant to 2016, but I suppose I could have done that via a comment.

Collectives™ on Stack Overflow

Setting options to datepicker in angular-ui bootstrap

8 Answers 8

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related