CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-bootstrap
Jakub
Jakub

Reputation: 3129

Setting options to datepicker in angular-ui bootstrap

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?

Upvotes: 5

Views: 51888

Answers (8)

Parzibyte
Parzibyte

Reputation: 1598

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"/>

Upvotes: 0

Marcel
Marcel

Reputation: 1514

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)

Upvotes: 8

Andrei Cojea
Andrei Cojea

Reputation: 675

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.

Upvotes: 0

bobvan
bobvan

Reputation: 251

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

Upvotes: -1

Martin Bajcar
Martin Bajcar

Reputation: 105

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.

Upvotes: 5

Craig Sketchley
Craig Sketchley

Reputation: 330

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
};

Upvotes: 5

kazuar
kazuar

Reputation: 1154

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

Upvotes: 1

Jakub
Jakub

Reputation: 3129

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.

Upvotes: 12

Related Questions